I am having an issue with my rotating cube class. Whenever I try to rotate or zoom the cube, I encounter an error message saying "Cannot read property 'render' of undefined". I suspect that the problem lies within the scopes. Below is my class implementation:
myRotationClass = function() {
this.camera = null;
this.scene = null;
this.renderer = null;
this.cube = null;
this.initialize = function(container) {
this.scene = new THREE.Scene();
this.camera = setupCamera();
this.cube = createCube();
this.scene.add(this.cube);
this.setupRenderer();
this.setupControls();
container.appendChild(this.renderer.domElement);
this.animateRotation();
};
function setupCamera() {
var camera = new THREE.PerspectiveCamera(20, 300 / 400, 1, 10000);
camera.position.z = 1800;
return camera;
}
function createCube() {
var geometry = new THREE.BoxGeometry(300, 200, 200);
var materials = ...;
var cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
return cube;
}
this.setupRenderer = function() {
this.renderer = new THREE.WebGLRenderer({antialias: true});
this.renderer.setClearColor(0xffffff);
this.renderer.setSize(this.sceneWidth, this.sceneHeight);
};
this.setupControls = function() {
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
this.controls.addEventListener('change', this.renderCube);
};
this.animateRotation = function() {
requestAnimationFrame(this.animateRotation.bind(this));
this.renderCube();
};
this.renderCube = function() {
this.renderer.render(this.scene, this.camera);
};
};
Thank you.