1

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。これを通過する適切な方法は何ですか?

4

1 に答える 1

1

スコープを正しく渡すには、次のようにします。

requestAnimationFrame(this.renderLoop.bind(this));

また

requestAnimationFrame(() => {this.renderLoop()});

于 2016-09-12T21:06:16.063 に答える