Can'；t将旧代码更新为Three.js 88

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

---

我创造了一把小提琴，希望有人能花些时间帮助我。CANNON.js是一个很棒的API，看到今天的THREE.js中的示例如此陈旧/无法使用，我感到很难过。我知道这是一个很大的工作，我觉得帮助，但我需要一些帮助第一。因此，如果@schteppe你读到了这篇文章，请联系我：我愿意花一些时间在这方面。

答案和问题一样广泛

使用

THREE.Raycaster（）

和

THREE.Plane（）

可以简化很多事情。它允许去掉诸如

projectOntoPlane

，

findnearesintersectingobject

，

getRayCasterFromScreenCoord

，并将

setScreenPerpCenter

函数（它的名字很可笑，但我还是原封不动）缩短为一行

示例r87

gplane

是

THREE.Plane（）

：

正如描述注释中所述，我们创建了一个虚拟平面，并在其上移动关节点

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

---

在这里，我们从法线和共面点设置平面，其中法线是相机位置和立方体上点击点之间的归一化减法向量，点是点击点本身。阅读有关该方法的信息

这里有一个链接：检查登录控制台，这里有几个有用的消息。读过了，我读过。我知道如何使用Three.js raycaster，我尝试过替换该函数，但没有成功。。。然而这段代码是复杂的、嵌套的。我会继续试验。检查我答案中的JSFIDLE）伙计，谢谢。我总是对这些函数感到困惑，不知道如何使用它们。今晚我将花时间学习你的代码。再次感谢你，不客气。将答案标记为已接受，如果它解决了您的问题）希望您能读到这篇文章，prisoner849，因为我在理解l.165时遇到了一些问题：（为了长度的目的，我更改了参照平面的gplane，我无法键入它）根据我的理解：1）参照平面法线从“camera.position”-“point”分配了新值（取自click事件；我有Vector3类型的varialble.2）然后对refPlaneNormal进行规范化，这意味着refPlaneNormal/1；这里我还有一个Vector3.3）使用我的“2）vector2”和我的click事件点解算SetFromNormal和CopLamarPoint后，我得到一个名为refPlane的平面。你是这样读的吗？再次谢谢你。所有这些对我来说都有点新鲜，但我开始掌握它了。

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