javascript - Game object become undefined Typescript/Three.js -

the code bellow working fine , not. changed without realising it.

still can't find why "game" object fine before call this.render() @ end of constructor. , become undefined in render method.

to more precise when log object in console give me before render()

game camera: ea renderer: dd scene: jb __proto__: object

and after render()

game camera: ea renderer: dd scene: jb __proto__: object :3000/game.js:38 undefined

any suggestion welcomed.

///<reference path="../typings/index.d.ts"/> import config './config'; import * 3 '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 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();     }*/   } 

the generated 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 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 

ok found problem:

when doing

requestanimationframe(this.render); 

that scope window (requestanimationframe part of window). need either :

requestanimationframe(this.render.bind(this)); 

or change render function :

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

burn in hell scope !