three.jsでマウスクリックポイントの3D座標を取得します

debugcn 投稿 Dev

GuRAm

私はTHREE.jsを初めて使用します。

Canvasでオブジェクト（単純なオブジェクトではない：Box、Sphere、..）をマウスでクリックしたときにポイントの3D座標を取得しようとしています。

詳細には、3Dオブジェクトビューアを使用しています-シーンにカメラ（THREE.PerspectiveCamera）、マウスコントロール（回転、ズーム、移動）、オブジェクトの追加/削除（自分のオブジェクト、THREE.jsのローダーを使用してロード）があります、..そして、クリックしたポイントの3D座標を3Dで取得する関数を追加したいと思います。

正確には、光線の終点の座標が必要です。camera_near_windowでのマウスクリックから始まり、オブジェクトの点で終わり、クリックしました。

私はそれを行うために多くの方法を試しました：

z = 0平面上の点の座標を取得する-正常に動作しますが、z = 0平面上にあり、OrbitControlsがあるため、必要なわけではありません。
THREE.jsの例-クリック可能なオブジェクト-CanvasRenderer（WebGLRendererではない）を使用し、小さなオブジェクトで機能します（ただし、私のプロジェクトでは機能します）：多くのオブジェクトをロードするとブラウザーがクラッシュします（CanvasRendererはWebGLRendererの5倍のメモリを必要とします）。
「マウスクリック座標からWebGL3D空間でオブジェクトを取得する方法」 -これも試しraycaster.intersectObjectsましたintersectsが、何も見つかりませんでした。空の配列でした（ボックス、球などの単純なオブジェクトでのみ機能する可能性があります）。

誰かが3Dでオブジェクトをクリックしたクリックポイントの3Dポイント座標を取得するデモコードを見せてもらえますか？

GuRAm

したがって、この質問は誰かに役立つと思うので、自分で答えます（解決策を書きます）。

var renderer, canvas, canvasPosition, camera, scene, rayCaster,  mousePosition;

function init() {
    renderer = new THREE.WebGLRenderer({ antialias: false });
    canvas = renderer.domElement;
    canvasPosition = $(canvas).position();
    camera = new THREE.PerspectiveCamera(20, $(canvas).width() / $(canvas).height(), 0.01, 1e10);
    scene = new THREE.Scene();
    rayCaster = new THREE.Raycaster();
    mousePosition = new THREE.Vector2();

    scene.add(camera);

    var myObjects = new THREE.Object3D();
    // myObjects.add( your object );
    // myObjects.add( your object );
    // myObjects.add( your object );
    myObjects.name = 'MyObj_s';
    scene.add(myObjects);
};

function getClicked3DPoint(evt) {
    evt.preventDefault();

    mousePosition.x = ((evt.clientX - canvasPosition.left) / canvas.width) * 2 - 1;
    mousePosition.y = -((evt.clientY - canvasPosition.top) / canvas.height) * 2 + 1;

    rayCaster.setFromCamera(mousePosition, camera);
    var intersects = rayCaster.intersectObjects(scene.getObjectByName('MyObj_s').children, true);

    if (intersects.length > 0)
        return intersects[0].point;
};

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]