three.js - 如何轨道/缩放相机到贴花/光线转换？

Question

我有 This Example (归功于@Mugen87)-正如您可以看到贴花被添加到贴花数组中，我添加了一个从贴花创建列表的函数(添加贴花，您将看到它出现在左上角)-我想知道在选择一个时将相机指向指针的确切位置的方法是什么，所以假设我在头后部添加了贴花 - 我想在不手动旋转的情况下返回它 - 所以我可以点击它的名字 - 并获得正确的位置。
我想这种方法还包括保存交叉点，然后设置相机位置……像这样:

click on decal name function : 
//intersectionaArr - store intersections
camera.position.set(intersectionaArr[index of the decal].normal);
camera.lookAt(intersectionaArr[index of the decal].point);
camera.updateProjectionMatrix ();

Answer 1

由于您已经有了交点的位置以及相应表面法线的方向，您可以执行以下操作来计算相机的位置:

const normal = new THREE.Vector3( 0, 0, 1 ).applyEuler( orientation );
const camPosition = new THREE.Vector3().copy( position ).add( normal.multiplyScalar( 50 ) );

所以这个想法是通过从交点开始并沿着表面法线移动一定距离来计算新的相机位置。现在是 50 个世界单位。
然后，您可以将相机位置和交点存储在列表元素中，并在事件监听器中使用它来更改相机位置和方向。
更新 fiddle : https://jsfiddle.net/afsqm25t/2/