Three.js - 拖放（XZ）

我是three.js的新手，我用http://threejs.org/examples/webgl_interactive_draggablecubes.html的例子來拖放我的對象。問題是我希望它們只能在XZ平面上移動（不在Y軸上），我不知道如何實現它才能在飛機上移動它們。用戶應該只能在地面上「滑動」它們。我正在使用OrbitControls而不是TrackballControls。Three.js - 拖放（XZ）

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

來源

2015-10-05 sRcBh

最後我發現問題：每個物體都有一個看着相機的平面。所以，我刪除了plane.lookAt（camera.position）並添加了這一行：

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

現在我的物體停留在平面（XZ軸）上。

來源

2015-10-05 15:47:10 sRcBh

或使用evencontrols http://alexan0308.github.io/threejs/examples/controls_events_example.html –

是的，這也是一個很好的可能！：D 我的下一個問題是我的collada文件將無法移動。我不知道爲什麼... – sRcBh

可以顯示你的代碼？ –

Three.js - 拖放（XZ）

回答

相關問題