three.js анимация в ember js

Question

Как создать цикл рендеринга three.js для анимации в ember 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. Каков правильный способ преодолеть это?

Answer 1

Чтобы передать объем правильно, сделайте следующее:

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

или

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