Math 在球体[a帧]上的摄影机前面添加形状（摄影机旋转/摄影机位置）

我一直在尝试创建一个简单的应用程序，其中360度图像显示在球体上。下一步是在用户移动时动态地将“热点”添加到此图像上

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

A-Frame让开发人员能够非常简单地启动和运行。我设法找到了一个例子，其中一个球体上有两个“热点”，当悬停/聚焦时，球体背景会发生变化

我希望在相机方向上创建一个新的“热点”，但是这被证明是相当困难的，因为相机位置永远不会改变，但旋转会改变

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

---

是的，我认为你的第二个想法是正确的，你可以用你的相机制作一个具有接缝位置的新球体。如果你想在屏幕中央制造一个新的“热点”。您可以将光线投射器从摄影机投射到“热点”，它将与球体相交。但是，应使用“doubleside”设置材质的side属性，否则，将不会与球体相交。然后，您可以得到相交[0]点

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);
}

---

`

如果没有任何交点，当您知道相机的位置时，这就是需要：求反、归一化、乘以等于球体半径的标量值的向量。结果就是你的新热点

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

---

示例

我无法将其用于A帧，因为当我尝试获取相机位置时，我总是将0,0,0作为向量。你知道我怎么用A-frame来做吗？@Hayanno，你也可以使用

.at（）

方法

.ray

属性的

THREE.Raycaster（）

。我真的不明白，我想我使用了“错误”的位置属性，因为A-frame包裹了Threejs，我无法从Threejs属性访问相机位置