Question

我一直在尝试创建一个简单的应用程序，其中360图像显示在球体上。下一步是动态添加热点＆＃39;当用户平移时，在此图像上。

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

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

我希望创建一个新的热点＆＃39;在摄像机方向上，然而这被证明是相当困难的，因为摄像机位置永远不会改变，但旋转确实如此。

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

＆＃13;

<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>

＆＃13;

理想情况下，为了在这个位置创建一个新的热点，我假设我需要做的就是将旋转值添加到位置值，并且它是热点的正确位置，但不幸的是，这不起作用，要么热点处于错误的位置，要么没有面对相机，或者它不再在视野中。

如何创建热点＆＃39;在相机视角（中间）？

我已经设置codepen，这有助于显示我有更好的问题。理想情况下，当我平移并点击“创建热点”时，一个热点＆＃39;应该直接在中间创建（就像红色和黄色一样）。

谢谢！

更新：我的想法是拥有一个没有背景的二级球体（更小的半径）。如果很容易知道相机视图的XYZ坐标与它相交，那么这就变得非常简单了。有找到这个的方法吗？

Answer 1

是的，我认为你的第二个想法是对的，你可以制作一个新的球体，它与你的相机有接缝位置。如果你想创建一个新的热点＆＃39;在你的屏幕中心。你可以用相机做一个raycaster到热点＆＃39;它将与球体相交。但是，您应该使用＆＃39; doubleside＆＃39;设置材料的侧面属性，否则，您将不会与球体相交。然后，您可以获得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]（相机旋转/相机位置）

2 个答案: