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 に答える