three.js ember js 中的动画
three.js animations in ember js
我应该如何在 ember js 中为动画创建 three.js 的渲染循环。我现在的代码是
import Ember from 'ember';
export default Ember.Controller.extend({
scene: new THREE.Scene(),
camera: new THREE.PerspectiveCamera(75,
window.innerWidth/window.innerHeight,1,500),
renderer: new THREE.WebGLRenderer(),
init: function() {
this.renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(this.renderer.domElement);
this.renderPreloader();
},
renderPreloader:function() {
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh(geometry,material);
this.scene.add(cube);
this.camera.position.set(2,2,2);
this.camera.lookAt(cube.position);
this.renderer.render(this.scene,this.camera);
this.renderLoop();
},
renderLoop: function() {
requestAnimationFrame(this.renderLoop);
this.camera.position.x = this.camera.position.x+0.01;
this.renderer.render(this.scene,this.camera);
}
});
我收到的错误是 this
未在 requestAnimationFrame
处定义。解决这个问题的正确方法是什么?
要正确传递作用域,请执行:
requestAnimationFrame(this.renderLoop.bind(this));
或
requestAnimationFrame(() => {this.renderLoop()});
我应该如何在 ember js 中为动画创建 three.js 的渲染循环。我现在的代码是
import Ember from 'ember';
export default Ember.Controller.extend({
scene: new THREE.Scene(),
camera: new THREE.PerspectiveCamera(75,
window.innerWidth/window.innerHeight,1,500),
renderer: new THREE.WebGLRenderer(),
init: function() {
this.renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(this.renderer.domElement);
this.renderPreloader();
},
renderPreloader:function() {
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh(geometry,material);
this.scene.add(cube);
this.camera.position.set(2,2,2);
this.camera.lookAt(cube.position);
this.renderer.render(this.scene,this.camera);
this.renderLoop();
},
renderLoop: function() {
requestAnimationFrame(this.renderLoop);
this.camera.position.x = this.camera.position.x+0.01;
this.renderer.render(this.scene,this.camera);
}
});
我收到的错误是 this
未在 requestAnimationFrame
处定义。解决这个问题的正确方法是什么?
要正确传递作用域,请执行:
requestAnimationFrame(this.renderLoop.bind(this));
或
requestAnimationFrame(() => {this.renderLoop()});