ゲームオブジェクトが定義されなくなるTypescript/Three.js

Question

コードはうまくいきました。私はおそらくそれを実現することなく何かを変えました。

コンストラクタの最後にthis.render()を呼び出す前に、「ゲーム」オブジェクトが正常である理由がわかりません。そして、renderメソッドでは未定義になります。 Eaのレンダラ：Ddをシーン：JB __proto__：オブジェクトrender()

後

そして、この私が、コンソールでオブジェクトをログインしたとき、それは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

[OK]をので、私は問題を発見：

windowにスコープ（requestAnimationFrameのは、窓の一部である）ことを

requestAnimationFrame(this.render); 

を行う場合。だから私はどちらかする必要があります：

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

またはのためのレンダリング機能を変更：

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

は地獄の範囲でバーン！