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

Question

过去两周，我一直在努力将 threejs_mousepick.html 示例从旧 THREE.js 版本更新到当前版本。哦对了，我是编程新手

我创建了一个 Fiddle，希望有人能花时间帮助我。 CANNON.js 是一个伟大的 API，很遗憾看到今天的 THREE.js 的例子如此 old/unusable。我知道这是很多工作，我很想帮忙，但我首先需要一些帮助。所以，如果@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

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

Can't update old code to Three.js 88

three.js

cannon.js