1

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

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

A-Frame 在让开发人员启动和运行变得超级简单方面非常棒。我设法找到了一个示例，其中一个球体上有两个“热点”，当悬停/聚焦时，球体背景发生了变化。

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

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

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

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

如何在相机视点（中间）中创建“热点”？

我已经设置了一个代码笔，它应该有助于显示我遇到的问题。理想情况下，当我平移并单击“创建热点”时，应该直接在中间创建一个“热点”（就像红色和黄色的一样）。

谢谢！

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

4

2 回答 2

1

是的，我认为您的第二个想法是正确的，您可以制作一个与您的相机具有接缝位置的新球体。如果您想在屏幕中心创建一个新的“热点”。您可以制作从相机到“热点”的光线投射器，它将与球体相交。但是，您应该使用“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);
}

`

于 2016-11-04T03:00:18.067 回答
1

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

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

jsfiddle示例

于 2016-11-04T11:48:52.633 回答