2

表示サイズに応じてメッシュのサイズと位置を管理する方法はありますか。

私がやっているのは、カメラのズームとシーン/カメラの位置の変化を持つ単純なアニメーション プレゼンテーションです。

画面サイズが異なる場合は、メッシュの配置とメッシュ サイズがすべて間違っています。

これを制御する方法がわかりませんか？

画面上のメッシュの位置を確認する方法は?

4

2 に答える 2

2

あなたがしたいのは、画面、または以下の例のように、コンテナとして使用する「バケット」divのサイズ変更をチェックすることです... divのサイズを変更するとき（プログラムまたはその他の方法で）、作成するだけです必ず onBucketResize() を呼び出してください

function onBucketResize() {
    camera.aspect = bucket.clientWidth / bucket.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( bucket.clientWidth, bucket.clientHeight );
}

セットアップするには、次のようなものを使用できます。

bucket.addEventListener( 'resize', onBucketResize, false );

または多分

document.addEventListener( 'resize', onBucketResize, false );

適切なものは何でも:)

これが役立つかどうか教えてください！

于 2013-03-09T23:18:35.593 に答える
2

私の推測では、スマートな人がやって来て、あなたが本当に望む解決策 (オブジェクトが正しい位置/サイズにとどまるようにカメラを移動する方法など) を提供してくれると思いますが、あなたの質問に対する直接的な回答が役立つかもしれません。 .

プロポーションを window.innerWidth と window.innerHeight の関数にすることで、メッシュ サイズを管理できます。

メッシュが画面上にあるかどうかを判断するには、次のコードを使用できます。3D 空間のメッシュ位置をブラウザの 2D 空間に投影します。また、カメラを移動したり、見ているものを変更したりした後は、必ず camera.updateMatrixWorld() を呼び出してください。そうしないと、不安定な結果が得られます (そのヒントについては WestLangley に感謝します)。vector.x > window.innerWidth または vector.x > window.innerHeight の場合、オブジェクトは画面の表示可能領域の外にあります。

function toXYCoord (object) {
    var vector = projector.projectVector(object.position.clone(), camera);
    vector.x = (vector.x + 1)/2 * window.innerWidth;
    vector.y = -(vector.y - 1)/2 * window.innerHeight;
    return vector;
}
于 2013-03-07T22:20:32.697 に答える