Animation Three.js+；打字稿。为什么动画方法只调用一次？

此代码正常工作，但有一个小错误：没有动画。它绘制了一个轴和一个立方体。立方体必须设置动画。我在控制台中只看到一次“动画”字符串

解决方案。替换此行

requestAnimationFrame（（）=>this.animate）requestAnimationFrame（this.animate.bind（this））

//
//从“三”中导入*作为三；
//这条线不行。错误：无法从中找到模块“3”。。。
// https://github.com/pinqy520/three-typescript-starter/blob/master/src/index.ts
班级游戏
{
私人(现场):三,现场,；
//私有画布：HTMLCanvasElement；
私人摄像机：三视角摄像机；
private\u渲染器：3.WebGLRenderer；
private _axis:THREE.AxisHelper；
私人照明：三个方向灯；
私人照明2:3.方向灯；
私人材料：三、基本材料；
私人_盒:三个,网状,；
公共构造函数（）
{
//这个._canvas=document.getElementById（canvasElement）；
此._scene=new THREE.scene（）；//创建场景
//创建摄影机
此._摄像头=新的三透视摄像头（75，window.innerWidth/window.innerHeight，0.11000）；
此.u renderer=new THREE.WebGLRenderer（）；
这个。_axis=new THREE.AxisHelper（10）；//将轴添加到场景中
此._light=new THREE.DirectionalLight（0xffffff，1.0）；//添加light1
这个。_light2=新的三个方向光（0xffffff，1.0）；//添加light2
此._材质=新的三网格基本材质({
颜色：0xaaaa，
线框：正确
});
//创建一个长方体并将其添加到场景中
this.\u-box=新的THREE.Mesh（新的THREE.BoxGeometry（1,1,1），this.\u材质）；
}
public createScene（）：void
{
//设定大小
此.u renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（this._renderer.domeElement）；//将画布添加到dom
此._场景.添加（此._轴）；
此灯位置设置（100100100）；
此._场景。添加（此._灯光）；
此._light2.位置.设置（-100100，-100）
这个。_场景。添加（这个。_灯光2）；
此.\u场景.添加（此.\u框）
这个._box.position.x=0.5；
这个._box.rotation.y=0.5；
这个._camera.position.x=5；
这是摄像机位置y=5；
这个._camera.position.z=5；
这个.摄像机.看（这个.场景.位置）；
}
public animate（）：void
{
requestAnimationFrame（this.animate.bind（this））；
这个；
}
private _render（）：void
{
设计时器=0.002*日期。现在（）；
此.u盒.position.y=0.5+0.5*Math.sin（计时器）；
这个._box.rotation.x+=0.1；
这个。_渲染器。渲染（这个。_场景，这个。_相机）；
}
}
window.onload=（）=>
{
让游戏=新游戏（）；
game.createScene（）；
游戏。动画（）；
}
我们在评论中讨论过，我刚刚写了这个，下面的代码是如何在TypeScript中工作的，我刚刚在
\u 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();

查看并在运行示例时打开控制台
解决方案1：
请求动画帧（（）=>this.animate（））

解决方案2：
请求动画帧（（）=>{this.animate（）；}）

解决方案3：
请求动画帧（this.animate.bind（this））

//
//从“三”中导入*作为三；
//这条线不行。错误：无法从中找到模块“3”。。。
// https://github.com/pinqy520/three-typescript-starter/blob/master/src/index.ts
班级游戏
{
私人(现场):三,现场,；
//私有画布：HTMLCanvasElement；
私人摄像机：三视角摄像机；
private\u渲染器：3.WebGLRenderer；
private _axis:THREE.AxisHelper；
私人照明：三个方向灯；
私人照明2:3.方向灯；
私人材料：三、基本材料；
私人_盒:三个,网状,；
公共构造函数（）
{
//这个._canvas=document.getElementById（canvasElement）；
此._scene=new THREE.scene（）；//创建场景
//创建摄影机
此._摄像头=新的三透视摄像头（75，window.innerWidth/window.innerHeight，0.11000）；
此.u renderer=new THREE.WebGLRenderer（）；
这个。_axis=new THREE.AxisHelper（10）；//将轴添加到场景中
此._light=new THREE.DirectionalLight（0xffffff，1.0）；//添加light1
这个。_light2=新的三个方向光（0xffffff，1.0）；//添加light2
此._材质=新的三网格基本材质({
颜色：0xaaaa，
线框：正确
});
//创建一个长方体并将其添加到场景中
this.\u-box=新的THREE.Mesh（新的THREE.BoxGeometry（1,1,1），this.\u材质）；
}
public createScene（）：void
{
//设定大小
此.u renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（this._renderer.domeElement）；//将画布添加到dom
此._场景.添加（此._轴）；
此灯位置设置（100100100）；
此._场景。添加（此._灯光）；
此._light2.位置.设置（-100100，-100）
这个。_场景。添加（这个。_灯光2）；
此.\u场景.添加（此.\u框）
这个._box.position.x=0.5；
这个._box.rotation.y=0.5；
这个._camera.position.x=5；
这是摄像机位置y=5；
这个._camera.position.z=5；
这个.摄像机.看（这个.场景.位置）；
}
public animate（）：void
{
requestAnimationFrame（this.animate.bind（this））；
这个；
}
private _render（）：void
{
设计时器=0.002*日期。现在（）；
此.u盒.position.y=0.5+0.5*Math.sin（计时器）；
这个._box.rotation.x+=0.1；
此._renderer.render（thi
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();

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