three.js Animationen in Ember js

Question

Wie sollte ich eine Render-Schleife von three.js für Animationen in Ember js erstellen. Der Code, den ich bis jetzt haben, ist

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); 
    } 
}); 

Der Fehler, ich bin immer ist this nicht an requestAnimationFrame definiert. Was ist der richtige Weg, um das durchzustehen?

Answer 1

Umfang korrekt zu übergeben, tun:

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

oder

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