1

three.js の GoogleEarth のようなコントロールを構築しようとして失敗しました (3D ジオメトリの理解が不十分であり、掘り下げる時間が残念ながら不足しているため)。誰かが私を助けてくれるかもしれませんし、すでに持っているかもしれません。とにかく、three.js ライブラリへの素晴らしい追加になると思います。

私が構築しようとしている特定の機能は次のとおりです。

  1. マウスホイールでズームイン TO MOUSE CURSOR
  2. Shift キーを押しながらシーンを回転
  3. マウスの左ボタンを押してパンします。
  4. おまけとして、上記の 1 と 2 の操作中に小さなターゲット アイコンを表示します。

私は 1 に最も問題があり、2 は試していません。パンニングは簡単です (例がたくさんあります)。

現在、シーンをズームインしてカーソルの下に固定したままにすることができません (画面の右上隅をポイントしてズームインしても、カーソルの下にあったものを見ることができます)。

前もって感謝します、アレックス

4

2 に答える 2

2

私は過去の人生で似たようなものを実装しました。ここでは、フラットプレーンを操作していると仮定します。これらの手法を球に接する平面に変換することは、読者の練習問題として残されています。;）

マウスホイールでズームインしてカーソルを移動します

これを行うには、シーンに光線を当てて、それがどこに当たるかをメモします。次に、カメラのアイポイントをその交差点に向けて移動します。「正しい」と感じるには、固定ステップではなく、ある種の比例ズームインが必要になります。たとえば、各ズームステップは、20単位移動するだけでなく、現在のアイポイントからターゲットまでの距離を20％短縮します。これにより、カメラが近づくと自動的に速度が低下します。

Shiftキーを押しながら、シーンを回転します

Shiftキーを押したままにすると、マウスの左右の動きで視点を周回するようになります。これを行うには、交点に垂直な軸を中心にヨーイングする必要があります。シーンに光線を当てて（Shiftキーを押したままにすると）、交点に注意してから、カメラのアイポイントをその軸を中心に回転させます。また、回転するときにその交差点を継続的に指すようにカメラの向きを変える必要があるか、または目の方向を回転させて、アイポイントから交差点軸までのベクトルと一定の角度を保つ必要があることに注意してください。

マウスの左ボタンを押してパンします。

目の右のベクトルと目の上のベクトルを取得し、適切な方向に移動する必要があります（マウスのdx / dyに正規化された目の右/目の上を掛け、フレームレートに依存しない動きのタイムステップを掛けます）。

ボーナスとして：上記の1と2の操作中に小さなターゲットアイコンを表示します。

シーンの交差点に、小さなオブジェクトを追加します。モードを終了したら、オブジェクトを削除します。

于 2012-07-30T09:10:23.993 に答える
0

最初の質問では、マウス ホイールの下でこのプログラムを使用できます

mousewheel = function (event) {
event.preventDefault();
var factor = 15;
var mX = (event.clientX / jQuery(THREE_STUFF.container).width()) * 2 - 1;
var mY = -(event.clientY / jQuery(THREE_STUFF.container).height()) * 2 + 1;
var vector = new THREE.Vector3(mX, mY, 0.1);
vector.unproject(camera);
vector.sub(camera.position);
if (event.deltaY < 0) {
camera.position.addVectors(camera.position, vector.setLength(factor));                       trackBallControls.target.addVectors(trackBallControls.target, vector.setLength(factor));
} else {
camera.position.subVectors(camera.position, vector.setLength(factor));                        trackBallControls.target.subVectors(trackBallControls.target, vector.setLength(factor));
}
}

これが確実に役立つことを願っています。

于 2016-09-01T13:15:24.707 に答える