Three.js

Question

我是 three.js 的新手，我使用 http://threejs.org/examples/webgl_interactive_draggablecubes.html 的示例来拖放我的对象。问题是我希望它们只在 XZ 平面上移动（而不是在 Y 轴上），但我不知道如何实现才能在平面上移动它们。用户应该只能 "slide" 他们在地面上。我使用的是 OrbitControls 而不是 TrackballControls。

https://jsfiddle.net/d58bbLey/

    function onDocumentMouseMove( event ) {
    event.preventDefault();

    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    raycaster.setFromCamera( mouse, camera );

    if ( SELECTED ) {
        var intersects = raycaster.intersectObject( plane );

        if ( intersects.length > 0 ) {
            SELECTED.position.copy( intersects[ 0 ].point.sub( offset ) );
        }
        return;
    }

    var intersects = raycaster.intersectObjects( objects );

    if ( intersects.length > 0 ) {

        if ( INTERSECTED != intersects[ 0 ].object ) {

            if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
            INTERSECTED = intersects[ 0 ].object;
            INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
            plane.position.copy( INTERSECTED.position );
            plane.lookAt( camera.position );
        }
        container.style.cursor = 'pointer';
    } else {
        if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
        INTERSECTED = null;
        container.style.cursor = 'auto';
    }
}

感谢您的帮助！ :D

Answer 1

终于找到问题所在了：每个对象都有一个看相机的平面。所以，我删除了 plane.lookAt(camera.position) 并添加了这一行：

plane.applyMatrix(new THREE.Matrix4().makeRotationX( -Math.PI / 2));

现在我的对象停留在平面上（XZ 轴）。

Answer 2

我必须做同样的事情，到目前为止我使用的是 DragControls

const geometry = new THREE.SphereGeometry(5, 32, 32);
const materialSphere = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide, wireframe: true });
const sphereMesh = new THREE.Mesh(geometry, materialSphere);
this.scene.add(sphereMesh);

this.dragControls = new DragControls([sphereMesh], camera, renderer.domElement);

this.dragControls.addEventListener('drag', (event) => {
  event.object.position.z = 0;
  event.object.position.x = 0;
});

Three.js - 拖放 (XZ)

Three.js - Drag and drop (XZ)

2d