javascript - 使用 Three.js 如何沿指定平面移动对象？

Question

我正在查看 http://threejs.org 上的示例站点( http://threejs.org/examples/webgl_interactive_draggablecubes.html )，我看到他们正在沿着相对于相机的平面移动选定的立方体。我明白了非投影如何与光线转换器一起工作。我不明白的是如何将其设置为始终沿地面(平面)移动物体，即使相机处于一定 Angular 也是如此。这个想法是让用户使用鼠标沿着地面移动对象，即使相机处于一定 Angular 并且没有完全俯视它。我刚开始使用 Three.js，因此您可能需要详细解释我所缺少的内容。或者如果我没有解释自己的话，也许可以反问问题。

我的项目如下所示，我希望用鼠标移动这些框。

Answer 1

示例代码创建一个平面，并在相机 Angular 发生变化时在 MouseMove 事件中更新它:

plane.setFromNormalAndCoplanarPoint(camera.getWorldDirection(plane.normal), INTERSECTED.position);

不要这样做，而是将平面创建为

var plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);

这是原点处的 XZ 平面。