0

我的three.js代码是这样的：

cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200, 1, 1, 1, materials), new THREE.MeshFaceMaterial());
cube.position.y = 150;
cube.position.x = 0;
scene.add(cube);

但是当我渲染我的立方体时，这个立方体的大小总是不同的。我试图更好地解释。每次我调整浏览器大小并刷新页面时，立方体大小都会不同。是否可以将立方体大小设置为固定？如果窗口调整大小！

4

2 回答 2

1

您可以为渲染器设置固定大小：

renderer.setSize(WIDTH, HEIGHT);

看看这个简单的例子：http: //jsfiddle.net/9stj8/

还要检查您的代码是否正在处理窗口调整大小事件。

于 2012-04-23T13:32:03.607 回答
0

我知道这个问题已经得到解答，但我想提交一些东西以供后代考虑，以及跟随我们步骤的人的沮丧程度。

Three.js 使用相机对象来提供 3d 场景的视图。我主要使用透视相机（而不是正交相机，如果您使用的是正交相机，抱歉目前无法帮助您。），我碰巧偶然发现了您正在讨论的问题的解决方案. 透视图在创建时采用某些参数：

  1. fov（确定垂直视野的角度
  2. 纵横比（宽度/高度值）<--重要！
  3. 近剪裁平面（当对象足够接近以被视为“在”相机镜头“后面”时的标量值，因此不再可见）
  4. 远剪裁平面（当对象距离足够远以被认为对相机不可见时的标量值

由于浏览器窗口是您的视口，因此我们通常使用浏览器窗口属性来设置相机的纵横比。由于这些属性将相机设置为正确渲染（如果视口大小和相机/渲染器设置不匹配，您的图像将出现粉碎/挤压/扭曲，如果它出现的话），如果浏览器窗口被调整大小相机值不再匹配相机用于渲染场景的值。

正如 Juan Mellado 所指出的，您可以使用该renderer.setSize(w,h)方法更改视口的大小。如果您希望窗口调整大小更改也更新渲染器和相机，请执行以下操作：

function onResize()
        {
            var width, height;
            width = window.innerWidth; // for example
            height = window.innerHeight; // for example                

            //First update the camera's aspect ratio: width / height
            camera.aspect = width/height;

            //Whenever you make a change to the camera, 
            //you must update for your changes to take effect
            camera.updateProjectionMatrix();

            //Here we reset the size of the window to the new height
            renderer.setSize(width, height);
        }

现在我们已经声明了一个可以处理更新相机和渲染器的回调函数，不要忘记将它绑定到 window.resize 事件。我只是使用 jQuery 来做到这一点：

jQuery(window).resize(onResize);

或者

window.onresize = onResize;

回顾：

1.) 用于计算相机纵横比的值必须与作为渲染器大小值传递的值相匹配。

2.) 如果您希望相机纵横比和渲染器大小值随浏览器大小缩放，则必须将回调函数绑定到 window.onresize 事件来执行此操作。

3.) 如果您对相机进行更改，在创建后，您必须调用“updateProjectionMatrix()”来更新相机的内部值，以便您的更改生效。

如果一切顺利，当您更改窗口大小时，相机纵横比和渲染器大小将自动随窗口大小缩放。

干杯和快乐的编码！

于 2012-05-03T04:14:13.883 回答