javascript window.addEventListener three.js

问题

I have been trying to create a MyObject.prototype.onWindowResize function to scale a simple cube when the window is resized but am having no luck. Either its appearing as undefined or nothing changing at all. Been searching for quite a while and have not been able to figure this out. Could someone help me please. My many thanks 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);
};

回答1:

Try to use three-onEvent,which you can add an eventListener like click,hover,gaze.

Use like that:

geo = new THREE.CubeGeometry(5,5,5);
var mat = new THREE.MeshBasicMaterial({color:0x00aadd});
var mesh = new THREE.Mesh(geo,mat);
mesh.on('click',function(m) {
  m.scale.set(2,2,2); // m is link to mesh
})
myScene.add(mesh);

or hover

// hover eventLisener 
mesh.on('hover',function(m) {
  // mouse enter the mesh
  m.scale.set(2,2,2); 
},function(m) {
// mouse leave out the mesh
  m.scale.set(1,1,1);
});

finally,remove eventLisener

mesh.off('click');

回答2:

Solution in constructor

window.addEventListener( 'resize', this.onWindowResize.bind(this), false);

The rest can be ignored.

There was also a problem with the onWindowResize function.

Originally posted

Cube.prototype.onWindowResize = function() {

    this.camera.aspect = this.width/this.height;
    this.camera.updateProjectionMatrix();
    this.renderer.setSize(this.width, this.height );
    this.render();   
 }  

Where this.width and this.height were not being passed to the function. I guess this was an error with scope. Not great on the terminologies.

In should never had used them and kept with the original window.innerWidth & window.innerHeight. As below.

Cube.prototype.onWindowResize = function() {

    this.camera.aspect = window.innerWidth/window.innerHeight;
    this.camera.updateProjectionMatrix();
    this.renderer.setSize( window.innerWidth, window.innerHeight );
    this.render();
 }  

来源：https://stackoverflow.com/questions/27890490/javascript-window-addeventlistener-three-js