javascript window.addEventListener three.js [英] javascript window.addEventListener three.js

问题描述

我一直在尝试创建MyObject.prototype.onWindowResize函数，以在调整窗口大小但没有运气时缩放简单的多维数据集。它要么显示为未定义，要么什么都没有改变。搜寻了很长一段时间，却无法解决这个问题。有人可以帮我吗。在此先多谢。

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

推荐答案

构造函数中的解决方案

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 没有传递给函数。我猜这是范围的错误。

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不应该使用它们并保持原始的 window.innerWidth & window.innerHeight 。如下所示。

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

这篇关于javascript window.addEventListener three.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！