遊戲對象變成undefined Typescript/Three.js

Question

代碼波紋管工作正常，突然不是。我可能改變了一些東西而沒有意識到它。

儘管如此，在構造函數結尾調用this.render()之前，我仍無法找到爲什麼「遊戲」對象沒有問題。在render方法中變成undefined。

更準確地說，當我登錄到控制檯中的對象時，它給我這個以前render()

遊戲攝像頭：EA渲染：DD場景：JB __proto__：對象

這render()

後

遊戲攝影機：Ea渲染器：Dd場景：jb __proto__：對象 ：3000/game.js：38 undefined

歡迎任何建議。

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

下地獄吧範圍！