Question

我想创建一个网站主页，其中只有一个360浏览器，显示逼真的3D模型，您可以浏览并与之交互（WEBVR风格）但是，我想要识别的是可以嵌入一个第二个360浏览器进入此状态，以便在导航并进入特定点时，您可能希望在当前视图中查看另一个360图像/视频。看着使用A Frame for 1st 360图像和嵌入式查看器。一个已经提出了使用WebGL中的高级技术的解决方案，但我不太了解它做出这个决定。

网站需要具备响应能力并与标准浏览器，平板电脑和移动设备以及（手指交叉）选项兼容才能使用耳机

任何建议/建议将不胜感激!!!

Answer 1

Imo这里最重要的部分是设计至于兼容性，请记住PC（鼠标）/移动（凝视）/ HMD（控制器）需要不同的UI。

至于360 in 360.没有必要嵌入任何东西。
1）让你的模型在中间
2）当在某处导航时，在相机周围显示一个带有图像的球体+保留一些控件（如“后退”按钮）

你可以这样做：

<强> HTML

<a-scene>
  <a-entity id="model"></a-entity>
  <a-entity id="button" show="src:myPic.png"></a-entity>
  <a-sphere id="photosphere" material="side:back" visible="false"></a-sphere>
</a-scene>

<强> JS

AFRAME.registerComponent("show", {
  init: function() {
    let sphere = document.querySelector("a-sphere")
    this.el.addEventListener("click", (e)=>{
     let pos = document.querySelector("[camera]").getAttribute("position")
     sphere.setAttribute("position", pos)
     sphere.setAttribute("visible", true)
    })
  }
})

在我的fiddle中查看。您可以隐藏模型，当看到photosphere + UI时，执行由您决定。

360浏览器嵌入到第二个360浏览器中

1 个答案: