三.js + TypeScript。为什么动画方法只调用一次？答案

【问题标题】：Three.js + TypeScript. Why a method for animation is called only once?三.js + TypeScript。为什么动画方法只调用一次？
【发布时间】：2017-07-26 13:38:06
【问题描述】：

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

解决方案。将这一行 requestAnimationFrame(() => this.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();
}

【问题讨论】：

从animate方法获取控制台日志多少次？
我在控制台中只看到一次“动画”字符串。
你能试试这个吗？ requestAnimationFrame(this.animate());
如果我使用requestAnimationFrame(this.animate); 而不是requestAnimationFrame(() => this.animate);，那么我会在控制台中看到两次“动画”字符串，但我在控制台中收到此错误：Uncaught TypeError: Failed to execute ' 'Window' 上的 requestAnimationFrame'：作为参数 1 提供的回调不是函数。在 e.animate
欢迎来到 StackOverflow！要将问题标记为已解决，请不要编辑标题。相反，请点击答案旁边的绿色箭头，并考虑通过点赞帮助您的人来表达爱意。

标签： animation typescript three.js

【解决方案1】：

我们在 cmets 中讨论过，我刚刚写了这个，下面的代码是如何让它在 TypeScript 中工作，我只是在 _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 并在运行示例时打开控制台

【讨论】：

您的代码对我不起作用。但是当我用这个替换requestAnimationFrame(()=>this.animate());时它会起作用：requestAnimationFrame(()=>{ this.animate(); });
@8Observer8 和我的代码几乎一样，我的代码有效！我用我的代码写了一个简单的程序

【解决方案2】：

解决方案 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();
}

【讨论】：