Question

我一直在尝试创建一个MyObject.prototype.onWindowResize函数，以便在调整窗口大小但没有运气时缩放一个简单的多维数据集。要么它看起来是未定义的，要么根本没有变化。一直在寻找相当长的一段时间，但却无法解决这个问题。请有人帮助我。我非常感谢你提前。

//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);
};

Answer 1

构造函数中的解决方案

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

其余的可以忽略。

onWindowResize功能也存在问题。

最初发布

Cube.prototype.onWindowResize = function() {

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

this.width和this.height未传递给函数的位置。我猜这是范围错误。在术语上不是很好。

应该永远不要使用它们并保留原始window.innerWidth＆amp; window.innerHeight。如下所示。

Cube.prototype.onWindowResize = function() {

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

Answer 2

尝试使用three-onEvent，您可以添加click，hover，gaze之类的eventListener。

使用：

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);

或悬停

// 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);
});

最后，删除eventLisener

mesh.off('click');

javascript window.addEventListener three.js

2 个答案: