游戏对象变成undefined Typescript/Three.js
问题描述:
代码波纹管工作正常,突然不是。我可能改变了一些东西而没有意识到它。游戏对象变成undefined Typescript/Three.js
尽管如此,在构造函数结尾调用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
答
行,所以我发现了问题:
当这样做
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);
}
下地狱吧范围!