マウスクリックの3次元座標を取得するThree.jsサンプルコードの詳細説明-jsチュートリアル-php.cn

マウスクリックの3次元座標を取得するThree.jsサンプルコードの詳細説明

黄舟

リリース： 2017-03-25 14:28:30

オリジナル

2535 人が閲覧しました

この記事では主にマウスクリックの3次元座標を取得するThree.jsのサンプルコードを紹介します。一定の参考価値があり、興味のある友人は参考にすることができます。

仕事の都合で、three.jsのことは全く分かりませんし、ネット上にも情報が少ないので、座標を教えてもらったのですが、とても大変でした。何はともあれ、ついにそれが実現しました。

マウスクリックの 3 次元座標を取得したいので、カメラオブジェクトがすでにあると思いますが、分からない場合は、まずこれら 2 つのオブジェクトを見てください。ここでは原理はさておき、主に 3 次元座標の求め方について説明します。上記のコード:

function onDocumentMouseDown( event ) {
  event.preventDefault();
  var vector = new THREE.Vector3();//三维坐标对象
  vector.set(
    ( event.clientX / window.innerWidth ) * 2 - 1,
    - ( event.clientY / window.innerHeight ) * 2 + 1,
    0.5 );
  vector.unproject( camera );
  var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
  var intersects = raycaster.intersectObjects(scene.children);
  if (intersects.length > 0) {
    var selected = intersects[0];//取第一个物体
    console.log("x坐标:"+selected.point.x);
    console.log("y坐标:"+selected.point.y);
    console.log("z坐标:"+selected.point.z);
  }

ログイン後にコピー

私が理解しているのは、マウスをクリックすると、画面が 2 次元座標を受け取り、この 2 次元座標がカメラに接続され、視野角の方向に伸びて光線を形成するということです。レイはシーンに接続され、交差するすべてのオブジェクトを受け取ります。最初のオブジェクトはカメラに最も近いオブジェクトであり、最後のオブジェクトはカメラから最も遠いオブジェクトです。通常、最初に交差するオブジェクトがマウスでクリックされたオブジェクトとして使用されます。

以上がマウスクリックの3次元座標を取得するThree.jsサンプルコードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。