Three.js: サイズ変更のウィンドウとアスペクト比

作成日 2010年12月27日  ·  13コメント  ·  ソース: mrdoob/three.js

ここにもう1つあります:
ウィンドウのサイズ変更を処理したかったのですが、

window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize(){
    renderer.setSize( window.innerWidth, window.innerHeight );
}

これは「ほとんど」機能しますが、粒子の色が黒にリセットされ、アスペクト比が更新されず、卵のボールが変形します...これを修正する方法がわかりません。

ありがとう:-)

Question

最も参考になるコメント

また、カメラを更新する必要があります。

window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize(){

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

全てのコメント13件

また、カメラを更新する必要があります。

window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize(){

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

ウィンドウのサイズが変更されたとき、またはページ内の他の要素が非表示になったときにサイズが変更される動的なディメンションを持つ「div」があります。 この「div」コンテナのサイズが変更された場合、divを完全に埋めるためにキャンバスが必要です。 $( '#center-pane')。width()と.height()を使用してネットワークを初期化し、「center」divを目的のサイズで正しく埋めていますが、サイズを変更できません。

理論的には、同じ関数を使用して両方のサイズ変更シナリオを処理できます。 関数が呼び出されているときにcamera.updateProjectionMatrix()に問題があるようです。 関数内にalert()があり、サイズ変更時に起動するため、カメラとレンダラーしか把握できません。

また、キャンバス内のすべてのオブジェクトをクリック可能にする必要があります。これには機能がありますが、更新する必要があります。正しいですか?
私はCombinedCameraを使用しています。 (私はそれに関するドキュメントを見つけることができません、ほんの一例です);

これは私が使用しているレイアウトです、多かれ少なかれ: http
サイズ変更ボタンなしで「ui-center-pane」を動的に埋めるためにサイズ変更機能が必要です

ありがとう、
ブレント

申し訳ありませんが、何が問題なのかわかりません。簡単に説明していただけますか?

すみません。

  1. CombinedCameraのドキュメントについて説明またはリンクしていただけますか
  2. サイズ変更時に、「メソッドupdateProjectionMatrix()がない」というエラーが表示されます。
  3. サイズ変更時にどのように、そして何を更新する必要がありますか。 (また、それはハンドリングイベントの交差光線にどのように影響しますか)

ブレント

1CombinedCameraのドキュメントについて説明またはリンクしていただけますか

そこにあるのはそれだけです:
https://github.com/mrdoob/three.js/blob/master/src/extras/cameras/CombinedCamera.js

2サイズ変更時に、「メソッドupdateProjectionMatrix()がない」というエラーが表示されます

http://layout.jquery-dev.net/demos/simple.htmlにアクセスしてページのサイズを変更しても、このようなエラーは表示されません。 Uncaught TypeError: Object #<Object> has no method 'getCookie'しか表示されません

3サイズ変更時にどのように、そして何を更新する必要がありますか。 (また、それはハンドリングイベントの交差光線にどのように影響しますか)

カメラのアスペクト比(幅/高さ)を更新する必要があります。 そして、レンダラーに新しいサイズを設定します。 サイズ変更が光線に与える影響については、#988をお読みください。

camera.aspect =幅/高さ; 正常に動作しますが、camera.updateProjectionMatrix()がエラーをスローしています。 onWindowResize()関数だけで、私のレイアウトとは何の関係もないはずです。

UI-レイアウトリンクは彼らの例へのリンクでした。

コードやライブリンクを共有できますか? camera間違いなくupdateProjectionMatrix()メソッドがあります。

これが私のリポジトリです:
https://github.com/BioInfoBrent/BIOINFORMATICS
ファイル:
バイオインフォマティクス/js/networkMain.js

プロジェクトは現在、学期半ばの書き直しの最中にバラバラになっています。 元のプロジェクトは1つの大きな「SWITCH」ステートメントによって制御されていました。私はそれを廃止する過程にあります。

週末にアーキテクチャを完成させます。これにより、プロジェクトの実際のTHREE.js側で作業するために多くの時間を解放できます。 さらにいくつか質問があり、1日か2日で質問をより明確に指示して説明できるようになります。

ああ、なるほど。 CombinedCameraカメラにはupdateProjectionMatrix()がありません。

@ zz85cameraOcameraP両方でcameraO updateProjectionMatrix()を呼び出すupdateProjectionMatrix()メソッドをCombinedCameraに追加するとよいでしょう。

ありがとうございました! これをチェックします。 私のサーバーにプロジェクトがあります。
住所: http
-現在、上部の[ネットワーク]ボタンが唯一の機能部分です。

ありがとう!

以下は私のためにそれを解決しました:

camera.aspect = 1;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth、window.innerHeight);

私はバージョン66を使用していて、

window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize(){

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

CombinedCameraでは機能しません

function onWindowResize(){

    if(camera.inPerspectiveMode){
        camera.cameraP.aspect = window.innerWidth / window.innerHeight;
        camera.cameraP.updateProjectionMatrix();
    }
    else{
        camera.cameraO.left = window.innerWidth / - 2;
        camera.cameraO.right = window.innerWidth / 2;
        camera.cameraO.top = window.innerHeight / 2;
        camera.cameraO.bottom = window.innerHeight / - 2;
        camera.cameraO.updateProjectionMatrix();
    }

    renderer.setSize( window.innerWidth, window.innerHeight );

}

反応3ファイバーでglftのサイズを変更したい

このページは役に立ちましたか?
0 / 5 - 0 評価