无法将旧代码更新为Three.js 88

Question

过去两周我一直在将旧的THREE.js版本中的threejs_mousepick.html示例更新为当前版本。哦，是的，我是编程的新手。

我创造了一个小提琴，跳跃的人会花一些时间来帮助我。 CANNON.js是一个伟大的API，这是可悲的看到的例子是这么老了/不能用今天＆＃39; S three.js所。我知道这是很多工作，我很乐意帮助，但我首先需要一些帮助。所以，如果@schteppe你读到这个，请联系：我愿意花一些时间来处理这个问题。

Answer 1

答案与问题一样广泛。

使用THREE.Raycaster()和THREE.Plane()简化了很多事情。它允许删除诸如projectOntoPlane，findNearestIntersectingObject，getRayCasterFromScreenCoord之类的功能，并缩短setScreenPerpCenter函数（它的名字很荒谬，但我把它保留原样）到只有一行。

jsfiddle示例r87

gplane是THREE.Plane()：

var gplane = new THREE.Plane(), gplaneNormal = new THREE.Vector3();

正如在描述评论中所写，我们创建了一个虚拟平面，我们移动了我们的关节点。

function setScreenPerpCenter(point) {
  gplane.setFromNormalAndCoplanarPoint(gplaneNormal.subVectors(camera.position, point).normalize(), point);
}

这里，我们将平面设置为法线和共面点，法线是相机位置和立方体点击点之间减法的归一化矢量，点是点击本身的点。阅读该方法here