I'm encountering a small issue with initializing the camera position in my three.js project written in TypeScript. The browser console is showing me an error message: Uncaught TypeError: Cannot read property 'position' of undefined. Below is the code from my app.ts file:
///<reference path="Lib/three.d.ts">
class Rendering {
camera: THREE.PerspectiveCamera;
scene: THREE.Scene;
renderer: THREE.CanvasRenderer;
windowHalfX: number;
windowHalfY: number;
constructor() {
this.windowHalfY = window.innerHeight/2;
this.windowHalfX = window.innerWidth / 2;
}
public init() {
var container = document.createElement('div');
document.body.appendChild(container);
this.camera = new THREE.PerspectiveCamera(60, this.windowHalfX / this.windowHalfY, 1, 1000);
this.camera.position.y = 100; // ISSUE WITH READING POSITION PROPERTY
this.camera.position.z = 200;
this.scene = new THREE.Scene();
this.renderer = new THREE.CanvasRenderer();
this.renderer.setSize(this.windowHalfX*2, this.windowHalfY*2);
container.appendChild(this.renderer.domElement);
var cubeGeometry = new THREE.CubeGeometry(150, 150, 150);
for (var i = 0; i < cubeGeometry.faces.length; i += 2) {
var hex = Math.random() * 0xffffff;
cubeGeometry.faces[i].color.setHex(hex);
cubeGeometry.faces[i + 1].color.setHex(hex);
}
var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors, overdraw: 0.5 });
var cube = new THREE.Mesh(cubeGeometry, material);
cube.position.y = 150;
this.scene.add(cube);
}
public render() {
this.camera.lookAt(this.scene.position);
this.renderer.render(this.scene, this.camera);
}
}
Does anyone have any suggestions on how to resolve this error?