Something in my code seems to have broken unexpectedly. I can't figure out why the "Game" object is defined before calling this.render() in the constructor, but becomes undefined in the render method.
Before render(), the console shows:
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
I appreciate any suggestions on how to troubleshoot this issue.
///<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');
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');
//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);
//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);
// Schedule the first frame.
this.render();
}
private render(){
this.renderer.render(this.scene, this.camera);
requestAnimationFrame(this.render);
}
}
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 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');
//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);
//light
var pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
this.scene.add(pointLight);
// Schedule the first frame.
this.render();
}
Game.prototype.render = function () {
this.renderer.render(this.scene, this.camera);
requestAnimationFrame(this.render);
};
return Game;
}());
exports.default = Game;
});
//# sourceMappingURL=/game.js.map