three.js多維數據集調整大小

Question

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

但是，當我渲染我的多維數據集時，此多維數據集的大小總是不同的。 我試圖更好地解釋。 每次調整瀏覽器大小並刷新頁面時，多維數據集的大小都會不同。 可以設置固定的多維數據集大小嗎？ 同樣，如果窗口調整大小！

Answer 1

您可以為渲染器設置固定大小：

renderer.setSize(WIDTH, HEIGHT);

看看這個簡單的例子： http : //jsfiddle.net/9stj8/

還要檢查您的代碼是否正在處理窗口調整大小事件。

Answer 2

我知道這個問題已經回答了，但是我想為后代提供一些東西，以及那些跟隨我們的人們的沮喪感。

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（）”來更新攝像機的內部值，以使更改生效。

如果一切順利，則更改窗口大小時，相機的寬高比和渲染器大小將自動隨窗口大小縮放。

歡呼和快樂的編碼！