Three.js -拖放(XZ)

Question

我是three.js新手，我用draggablecubes.html的例子拖放我的对象。问题是，我希望它们只在XZ平面上移动(而不是在Y轴上)，我不知道如何在平面上移动它们。用户应该只能在地面上“滑动”它们。我使用的是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';
    }
}

谢谢你的帮助！

Answer 1

最后，我发现了这个问题:每一个物体都有一个平面，它是lookAt摄像机的。因此，我删除了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;
});