I've been working on converting my code to object literal style. While I was able to successfully create the scene, I'm encountering some issues with the animation.
One specific error message that I'm getting is "Uncaught TypeError: Cannot read property 'render' of undefined" for this line of code:
this.renderer.render(this.scene, this.camera);
Below is the object I have created:
var customThree = {
objects: function() {
/*objects*/
},
createScene: function() {
this.container = document.getElementById("container");
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.001, (26 * 10));
this.camera.position.set(26, (26 / 2), 26);
window.addEventListener("resize", function() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
});
this.objects();
this.renderer = new THREE.WebGLRenderer();
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.container.appendChild(this.renderer.domElement);
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
},
animate: function() {
this.renderer.render(this.scene, this.camera);
requestAnimationFrame(this.animate);
},
render: function() {
this.createScene();
this.animate();
}
};
customThree.render();