Fix music sample
This commit is contained in:
parent
6b65befce2
commit
0efedd91d9
5 changed files with 33 additions and 17 deletions
src/music
|
@ -4,16 +4,6 @@
|
|||
|
||||
@import "~/src/lib/scss/main";
|
||||
|
||||
#playerUI {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#playerContent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#playerControls {
|
||||
background-color: $dark;
|
||||
max-width: 100%;
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import $ from "jquery";
|
||||
import * as three from "three";
|
||||
|
||||
import Background from "../background";
|
||||
|
@ -12,6 +13,19 @@ class Spectrum extends Background {
|
|||
this._init_analyser();
|
||||
this._init_scene();
|
||||
this._init_objects();
|
||||
this._resize();
|
||||
}
|
||||
|
||||
_get_canvas_height() {
|
||||
return this._display.parent().height() - this._display.siblings().toArray().reduce((a, b) => {
|
||||
return a + b.clientHeight;
|
||||
}, 0);
|
||||
}
|
||||
|
||||
_resize() {
|
||||
this._camera.aspect = this._display.width() / this._get_canvas_height();
|
||||
this._camera.updateProjectionMatrix();
|
||||
this._renderer.setSize(this._display.width(), this._get_canvas_height());
|
||||
}
|
||||
|
||||
_init_analyser() {
|
||||
|
@ -33,18 +47,25 @@ class Spectrum extends Background {
|
|||
_init_scene() {
|
||||
let scene = new three.Scene();
|
||||
|
||||
let camera = new three.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
|
||||
let camera = new three.PerspectiveCamera(70, this._display.width() / this._get_canvas_height(), 0.01, 10);
|
||||
camera.position.z = 1;
|
||||
scene.add(camera);
|
||||
|
||||
let renderer = new three.WebGLRenderer({antialias: true});
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
let renderer = new three.WebGLRenderer({
|
||||
antialias: true,
|
||||
powerPreference: "low-power"
|
||||
});
|
||||
|
||||
renderer.setSize(this._display.width(), this._display.height());
|
||||
|
||||
this._display.append(renderer.domElement);
|
||||
|
||||
this._scene = scene;
|
||||
this._camera = camera;
|
||||
this._renderer = renderer;
|
||||
|
||||
// Set the resize handler
|
||||
$(window).resize(() => this._resize());
|
||||
}
|
||||
|
||||
_init_objects() {
|
||||
|
|
Reference in a new issue