游戏对象变得未定义 Typescript/Three.js

Question

下面的代码工作正常，但突然就不行了。我可能在不知不觉中改变了一些东西。

在构造函数末尾调用this.render() 之前，我仍然无法找到“游戏”对象正常的原因。并在 render 方法中变得未定义。

更准确地说，当我在控制台中记录对象时，它会在 render() 之前给我这个

游戏摄像机：Ea 渲染器：Dd 场景：jb __proto__:Object

这在render()之后

游戏摄像机：Ea 渲染器：Dd 场景：jb __proto__：Object :3000/game.js:38 未定义

欢迎提出任何建议。

///<reference path="../typings/index.d.ts"/>
import config from './config';
import * as THREE from 'three'; 

export default class Game {

    private renderer: THREE.Renderer;
    private camera: THREE.PerspectiveCamera;
    private scene: THREE.Scene;

    constructor() {
        console.log('START');
        //var self = this;

        let container = document.querySelector(config.domSelector);
        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setSize(config.rendererW, config.rendererH);
        container.appendChild(this.renderer.domElement);
        console.log('renderer added');

        this.camera = new THREE.PerspectiveCamera(config.cameraViewAngle, (config.rendererW/config.rendererH), config.cameraNear, config.cameraFar);
        this.scene = new THREE.Scene();
        this.scene.add(this.camera);
        console.log('scene initialized');

        /*window.addEventListener('resize', function(){
            self.rendererResize
        });*/

        //mesh
        let sphereMaterial:THREE.MeshLambertMaterial = new THREE.MeshLambertMaterial({color: 0xCC0000})
        let sphere:THREE.Mesh = new THREE.Mesh(
            new THREE.SphereGeometry( 50, 16, 16), sphereMaterial
        );
        sphere.position.z = -300;
        this.scene.add(sphere);
        console.log('sphere added');

        //light
        let pointLight:THREE.PointLight = new THREE.PointLight(0xFFFFFF);
        pointLight.position.x = 10;
        pointLight.position.y = 50;
        pointLight.position.z = 130;
        this.scene.add(pointLight);
        console.log('light added');
        // Schedule the first frame.
        this.render();
    }

    private render(){
        this.renderer.render(this.scene, this.camera);
        requestAnimationFrame(this.render);
    }

    /*private rendererResize():void{
        let width:number = window.innerWidth;
        let height:number = window.innerHeight;
        console.log("height = ",height);
        console.log("width = ",width);

        this.renderer.setSize(width, height);
        this.camera.aspect = width / height;
        this.camera.updateProjectionMatrix();
    }*/


}

生成的javascript

define(["require", "exports", "./config", "three"], function (require, exports, config_1, THREE) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Game = (function () {
        function Game() {
            console.log('START');
            //var self = this;
            var container = document.querySelector(config_1.default.domSelector);
            this.renderer = new THREE.WebGLRenderer();
            this.renderer.setSize(config_1.default.rendererW, config_1.default.rendererH);
            container.appendChild(this.renderer.domElement);
            console.log('renderer added');
            this.camera = new THREE.PerspectiveCamera(config_1.default.cameraViewAngle, (config_1.default.rendererW / config_1.default.rendererH), config_1.default.cameraNear, config_1.default.cameraFar);
            this.scene = new THREE.Scene();
            this.scene.add(this.camera);
            console.log('scene initialized');
            /*window.addEventListener('resize', function(){
                self.rendererResize
            });*/
            //mesh
            var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0xCC0000 });
            var sphere = new THREE.Mesh(new THREE.SphereGeometry(50, 16, 16), sphereMaterial);
            sphere.position.z = -300;
            this.scene.add(sphere);
            console.log('sphere added');
            //light
            var pointLight = new THREE.PointLight(0xFFFFFF);
            pointLight.position.x = 10;
            pointLight.position.y = 50;
            pointLight.position.z = 130;
            this.scene.add(pointLight);
            console.log('light added');
            console.log(this);
            // Schedule the first frame.
            this.render();
        }
        Game.prototype.render = function () {
            console.log(this);
            this.renderer.render(this.scene, this.camera);
            requestAnimationFrame(this.render);
        };
        return Game;
    }());
    exports.default = Game;
});
//# sourceMappingURL=/game.js.map

Answer 1

好的，我发现了问题：

做的时候

requestAnimationFrame(this.render);

该范围为window（requestAnimationFrame 是窗口的一部分）。所以我需要这样做：

requestAnimationFrame(this.render.bind(this));

或更改渲染函数：

private render = ():void => {
       console.log("Render function start")
       this.renderer.render(this.scene, this.camera);
       requestAnimationFrame(this.render);
}

在地狱范围内燃烧！