Three.js - 拖放 (XZ)答案

【问题标题】：Three.js - Drag and drop (XZ)Three.js - 拖放 (XZ)
【发布时间】：2015-10-05 12:45:12
【问题描述】：

我是three.js 的新手，我使用http://threejs.org/examples/webgl_interactive_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';
    }
}

感谢您的帮助！ :D

【问题讨论】：

标签： three.js 2d

【解决方案1】：

最后我发现了问题：每个对象都有一个面向相机的平面。所以，我删除了 plane.lookAt(camera.position) 并添加了这一行：

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

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

【讨论】：

或使用 evencontrols alexan0308.github.io/threejs/examples/…
是的，这也是一个很好的可能性！ :D 我的下一个问题是我的 collada 文件无法移动。我不知道为什么...

【解决方案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;
});

【讨论】：