0

私は実際にthree.jsを使用してWebサイトに取り組んでいます。ここでデモを見ることができます: https://c9.io/frescogusto/demi/workspace/demi_0.3.html ios と android で表示できるようにキャンバス上にあります。

質問: カメラをその位置からクリックされたオブジェクトの位置に移動するにはどうすればよいですか? すべての軸でtranslateメソッドを使用する必要がありますか、それとももっと速い方法がありますか?

前もって感謝します

pp

4

1 に答える 1

1 
renderer.domElement.addEventListener('mousedown', function(event) {
    event.preventDefault();

    var vector = new THREE.Vector3(
        renderer.devicePixelRatio * (event.pageX - this.offsetLeft) / this.width * 2 - 1,
        - renderer.devicePixelRatio * (event.pageY - this.offsetTop) / this.height * 2 + 1,
        0.5
    );
    projector.unprojectVector(vector, camera);

    var raycaster = new THREE.Raycaster(
        camera.position,
        vector.sub( camera.position ).normalize()
    );
    var intersects = raycaster.intersectObjects(YOUR_CLICKABLE_OBJECTS);
    if (intersects.length) {
        camera.position = intersects[0].point;
        // Alternatively, camera.position = intersects[0].object.position.clone();
    }
}, false);

このコード:

  • mousedownイベントにリスナーを登録します
  • 2D 画面空間でクリックした位置を 3D シーン空間の位置に投影します
  • カメラからクリックに向かって仮想線 (光線) をキャストします。
  • その線と交差するオブジェクトがあるかどうかを確認します。交差する最初のオブジェクトは、クリックされたオブジェクトです
  • クリックした位置にカメラをスナップします

クリックした場所にカメラをすぐにスナップするのではなく、ゆっくりと遷移させたい場合は、TweenJSなどのトゥイーン ライブラリを調べて、遷移のタイミングを確認することをお勧めします。

(PS: WebGL レンダラーにのみ存在すると思いrenderer.devicePixelRatioます。他のレンダラーでは削除できます。)

于 2013-08-20T22:44:03.853 に答える