在球体 [AFrame] 上的相机前面添加形状（相机 rotation/camera 位置）

Question

我一直在尝试创建一个简单的应用程序，以便在 Sphere 上显示 360 度图像。下一步是在用户平移时将 'hotspots' 动态添加到该图像上。

我尝试了很多不同的方法（包括深入研究 Three.JS），但似乎并不那么容易。（UV、位置、顶点等）。

A-Frame 非常棒，它让开发人员的起床和运行变得超级简单。我设法找到了一个例子，其中球体上有两个 'hotspots'，当 hovered/focused 时，球体背景发生了变化。

我想在相机方向上创建一个新的 'hotspot'，但事实证明这非常困难，因为相机位置永远不会改变，但旋转会改变。

例如，平移后，我看到以下内容：

<a-camera position="0 2 4" camera="" look-controls="" wasd-controls="" rotation="29.793805346802827 -15.699043586584567 0">
    <a-cursor color="#4CC3D9" fuse="true" timeout="10" material="color:#4CC3D9;shader:flat;opacity:0.8" cursor="maxDistance:1000;fuse:true;timeout:10" geometry="primitive:ring;radiusOuter:0.016;radiusInner:0.01;segmentsTheta:64" position="0 0 -1" raycaster=""></a-cursor>
  </a-camera>

理想情况下，要在这个位置创建一个新的热点，我假设我需要做的就是将旋转值添加到位置值，这就是热点的正确位置，但不幸的是，这不起作用，要么热点位置错误，要么没有正对摄像头，要么不在视野范围内。

如何在相机视角（中间）创建 'hotspot'？

我已经设置了一个 codepen，这应该有助于显示我正在解决的问题。理想情况下，当我平移并单击 'create hotspot' 时，应该直接在中间创建一个 'hotspot'（就像红色和黄色的一样）。

谢谢！

更新：我有一个想法是有一个没有背景的辅助球体（较小的半径）。如果很容易知道与其相交的相机视图的 XYZ 坐标，那么这就变得非常简单。有办法找出来吗？

Answer 1

是的，我认为你的第二个想法是正确的，你可以制作一个与你的相机有接缝位置的新球体。如果您想在屏幕中央制作一个新的 'hotspot'。你可以制作一个从相机到 'hotspot' 的光线投射器，它会与球体相交。但是，你应该将 material 的边属性设置为 'doubleside'，否则，你将不会与球体相交。然后，你可以得到 intersect[0].point.

var pos = new THREE.Vector3().copy(cameraEl.getComputedAttribute("position"));
cameraEl.object3D.localToWorld(pos);
var vector = new THREE.Vector3(( event.clientX / window.inneenter code hererWidth ) * 2 - 1, -( event.clientY / window.innerHeight ) * 2 + 1, 0.5);
vector = vector.unproject(camera);
var raycaster = new THREE.Raycaster(pos, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects([sphere],true);
if(intersects.length > 0)
{
    console.log(intersects[0].point);
}

`

Answer 2

没有任何交集，当您知道相机的位置时，这是需要进行以下操作的矢量：取反、归一化、乘以等于球体半径的标量值。结果就是你新热点的点数。

var pos = camera.position.clone().negate().normalize().multiplyScalar(sphereRadius);

jsfiddle 例子

在球体 [AFrame] 上的相机前面添加形状（相机 rotation/camera 位置）

Add shape in front of camera on a sphere [AFrame] (camera rotation/camera position)

math

perspectivecamera

three.js

webvr

aframe