Three.js + TypeScript。爲什麼只有一次調用動畫的方法？

Question

此代碼正常工作，但有一個小錯誤：沒有動畫。它繪製一個軸和一個立方體。立方體必須是動畫的。我只在控制檯中看到「animate」字符串一次。

解決方案。這個一個requestAnimationFrame(this.animate.bind(this));https://codepen.io/8Observer8/pen/oWoXyz

/// <reference path="../node_modules/@types/three/index.d.ts" /> 

//import * as THREE from "three"; 
// this line does't work. Error: Cannot find module 'three' from ... 

// https://github.com/pinqy520/three-typescript-starter/blob/master/src/index.ts 

class Game 
{ 
    private _scene: THREE.Scene; 
    //private _canvas: HTMLCanvasElement; 
    private _camera: THREE.PerspectiveCamera; 
    private _renderer: THREE.WebGLRenderer; 
    private _axis: THREE.AxisHelper; 
    private _light: THREE.DirectionalLight; 
    private _light2: THREE.DirectionalLight; 
    private _material: THREE.MeshBasicMaterial; 
    private _box: THREE.Mesh; 

    public constructor() 
    { 
     //this._canvas = <HTMLCanvasElement>document.getElementById(canvasElement); 
     this._scene = new THREE.Scene(); // create the scene 
     // create the camera 
     this._camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
     this._renderer = new THREE.WebGLRenderer(); 
     this._axis = new THREE.AxisHelper(10); // add axis to the scene 
     this._light = new THREE.DirectionalLight(0xffffff, 1.0); // add light1 
     this._light2 = new THREE.DirectionalLight(0xffffff, 1.0); // add light2 
     this._material = new THREE.MeshBasicMaterial({ 
      color: 0xaaaaaa, 
      wireframe: true 
     }); 
     // create a box and add it to the scene 
     this._box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), this._material); 
    } 

    public createScene(): void 
    { 
     // set size 
     this._renderer.setSize(window.innerWidth, window.innerHeight); 
     document.body.appendChild(this._renderer.domElement); // add canvas to dom 
     this._scene.add(this._axis); 
     this._light.position.set(100, 100, 100); 
     this._scene.add(this._light); 
     this._light2.position.set(-100, 100, -100) 
     this._scene.add(this._light2); 
     this._scene.add(this._box) 
     this._box.position.x = 0.5; 
     this._box.rotation.y = 0.5; 

     this._camera.position.x = 5; 
     this._camera.position.y = 5; 
     this._camera.position.z = 5; 

     this._camera.lookAt(this._scene.position); 
    } 

    public animate(): void 
    { 
     requestAnimationFrame(this.animate.bind(this)); 
     this._render(); 
    } 

    private _render(): void 
    { 
     let timer = 0.002 * Date.now(); 
     this._box.position.y = 0.5 + 0.5 * Math.sin(timer); 
     this._box.rotation.x += 0.1; 
     this._renderer.render(this._scene, this._camera); 
    } 
} 

window.onload =() => 
{ 
    let game = new Game(); 
    game.createScene(); 
    game.animate(); 
} 

Answer 1

解決方案1 ​​：requestAnimationFrame(()=>this.animate());

解決方案2：requestAnimationFrame(() => {this.animate();});

解決方案3 ：requestAnimationFrame(this.animate.bind(this));https://codepen.io/8Observer8/pen/oWoXyz

/// <reference path="../node_modules/@types/three/index.d.ts" /> 

//import * as THREE from "three"; 
// this line does't work. Error: Cannot find module 'three' from ... 

// https://github.com/pinqy520/three-typescript-starter/blob/master/src/index.ts 

class Game 
{ 
    private _scene: THREE.Scene; 
    //private _canvas: HTMLCanvasElement; 
    private _camera: THREE.PerspectiveCamera; 
    private _renderer: THREE.WebGLRenderer; 
    private _axis: THREE.AxisHelper; 
    private _light: THREE.DirectionalLight; 
    private _light2: THREE.DirectionalLight; 
    private _material: THREE.MeshBasicMaterial; 
    private _box: THREE.Mesh; 

    public constructor() 
    { 
     //this._canvas = <HTMLCanvasElement>document.getElementById(canvasElement); 
     this._scene = new THREE.Scene(); // create the scene 
     // create the camera 
     this._camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
     this._renderer = new THREE.WebGLRenderer(); 
     this._axis = new THREE.AxisHelper(10); // add axis to the scene 
     this._light = new THREE.DirectionalLight(0xffffff, 1.0); // add light1 
     this._light2 = new THREE.DirectionalLight(0xffffff, 1.0); // add light2 
     this._material = new THREE.MeshBasicMaterial({ 
      color: 0xaaaaaa, 
      wireframe: true 
     }); 
     // create a box and add it to the scene 
     this._box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), this._material); 
    } 

    public createScene(): void 
    { 
     // set size 
     this._renderer.setSize(window.innerWidth, window.innerHeight); 
     document.body.appendChild(this._renderer.domElement); // add canvas to dom 
     this._scene.add(this._axis); 
     this._light.position.set(100, 100, 100); 
     this._scene.add(this._light); 
     this._light2.position.set(-100, 100, -100) 
     this._scene.add(this._light2); 
     this._scene.add(this._box) 
     this._box.position.x = 0.5; 
     this._box.rotation.y = 0.5; 

     this._camera.position.x = 5; 
     this._camera.position.y = 5; 
     this._camera.position.z = 5; 

     this._camera.lookAt(this._scene.position); 
    } 

    public animate(): void 
    { 
     requestAnimationFrame(this.animate.bind(this)); 
     this._render(); 
    } 

    private _render(): void 
    { 
     let timer = 0.002 * Date.now(); 
     this._box.position.y = 0.5 + 0.5 * Math.sin(timer); 
     this._box.rotation.x += 0.1; 
     this._renderer.render(this._scene, this._camera); 
    } 
} 

window.onload =() => 
{ 
    let game = new Game(); 
    game.createScene(); 
    game.animate(); 
} 

Answer 2

我們談了意見，我只是寫了這個替換該行requestAnimationFrame(() => this.animate);，代碼波紋管是你如何讓它在打字稿工作，我只是說裏面_render其他的console.log看結果。

class Game { 
    public animate() 
    { 
     console.log("animate()"); 
     this._render(); 
     requestAnimationFrame(()=>this.animate()); 

    } 

    private _render(): void 
    { 
     console.log("From _render") 

    } 
} 

let game = new Game(); 
    game.animate(); 

看看在example on Playground並打開控制檯，當你運行示例