三.js立方体大小调整

three.js cube resize

本文关键字：调整 立方体 js      更新时间：2023-09-26

我的代码有三个.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);

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

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

renderer.setSize(WIDTH, HEIGHT);

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

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

我知道这个问题已经得到了回答，但为了后代的缘故，我想提交一些东西，以及那些跟随我们脚步的人的沮丧程度。

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

  1. 视场（确定垂直视野的角度）
  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（）"来更新摄像机的内部值，以使更改生效。

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

干杯，编码愉快！

相关文章：