Struggling to create a MyObject.prototype.onWindowResize function for scaling a simple cube on window resize. Can't seem to make it work - either getting undefined or no change at all. Spent hours searching for a solution with no luck. Any help would be greatly appreciated. Thank you in advance.
//OOP THREE
//Global Variables
var ROTATE_Y = 0.03;
//Constructor
function Cube() {
this.width = window.innerWidth,
this.height = window.innerHeight;
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera( 70, this.width/this.height, 1, 1000);
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( this.renderer.domElement);
window.addEventListener( 'resize', onWindowResize, false);
//Attempts
//var self = this;
//window.onWindowResize = this.onWindowResize.bind(this);
//window.addEventListener( 'resize', function(e){this.onWindowResize(e);}.bind(this), false);
//window.addEventListener( 'resize', this.onWindowResize.bind(this), false);
//window.addEventListener( 'resize', function (event) {this.onWindowResize(event)}, false);
this.init();
}
Cube.prototype.init = function () {
this.light();
this.box();
this.render();
this.animate();
}
Cube.prototype.light = function(){
this.light = new THREE.DirectionalLight( 0xffffff );
this.light.position.set( 0, 1, 1).normalize();
this.scene.add(this.light);
}
Cube.prototype.box = function(){
this.geometry = new THREE.CubeGeometry( 10, 20, 10);
this.material = new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30 } );
var boxMesh = this.mesh = new THREE.Mesh(this.geometry, this.material);
this.mesh.position.z = -50;
boxMesh.rotation.y = ROTATE_Y;
this.scene.add( this.mesh );
}
Cube.prototype.update = function(number){
if(number > 0){
this.mesh.rotation.y += ROTATE_Y;
}
}
Cube.prototype.animate = function() {
requestAnimationFrame( this.animate.bind(this) );
this.render();
this.update();
}
Cube.prototype.onWindowResize = function() {
this.camera.aspect = this.width/this.height;
this.camera.updateProjectionMatrix();
this.renderer.setSize( this.width, this.height );
this.render();
}
Cube.prototype.render = function() {
this.renderer.render(this.scene, this.camera);
};