javascript - 使用 aframe webVR 制作全景/360 度

Question

我有多个图像（比如北、东、南、西），我希望它们使用 java 脚本中的 aframe 显示为一个组合全景/360 视图，而不是像 a-sky 那样将每个图像显示为单独的 360 视图.

这是一个供参考的代码笔。

<script>
  AFRAME.registerComponent('set-sky', {
    schema: {default:''},
    init() {
      const sky = document.querySelector('a-sky');
      this.el.addEventListener('click', () => {
        sky.setAttribute('src', this.data);
      });
    }
  });
</script>

<a-scene>
  <a-camera position="0 2 4">
    <a-cursor color="#4CC3D9" fuse="true" timeout="10"></a-cursor>
  </a-camera>

  <a-sphere color="#F44336" radius="1" position="-4 2 0" set-
sky="https://c3.staticflickr.com/2/1475/26239222850_cabde81c39_k.jpg"></a-
sphere>

  <a-sphere color="#FFEB3B" radius="1" position="4 2 0" set-
sky="https://c2.staticflickr.com/2/1688/25044226823_53c979f8a1_k.jpg"></a-
sphere>

  <a-sky></a-sky>
</a-scene>

相关博客：
https ://blog.neondaylight.com/build-a-simple-web-vr-ui-with-a-frame-a17a2d5b484

Answer 1

正如 ngokevin 的评论中所说，您可以：

• 使用您的图像创建一个由平面组成的实体，并将相机放置在里面：

  <a-entity position="0 0 0">
    <a-plane width="5" height="5" position="0 0 -2.5" 
       material="src:#north"></a-plane>
    <a-plane width="5" height="5" position="2.5 0 0" rotation="0 -90 0" 
       material="src:#west"></a-plane>
    <a-plane width="5" height="5" position="-2.5 0 0" rotation="0 90 0" 
       material="src:#east"></a-plane>
    <a-plane width="5" height="5" position="0 0 2.5" rotation="0 180 0" 
       material="src:#south"></a-plane>
  </a-entity>
  

  但是你需要用一些地面和顶部填充它，所以你可以尝试：

• 用六个图像创建一个立方体贴图：

  <a-assets>
    <a-cubemap id="sky">
      <img src="right.png" crossorigin="anonymous">
      <img src="left.png" crossorigin="anonymous">
      <img src="top.png" crossorigin="anonymous">
      <img src="bottom.png" crossorigin="anonymous">
      <img src="front.png" crossorigin="anonymous">
      <img src="back.png" crossorigin="anonymous">
    </a-cubemap>
  </a-assets>
  <a-entity  position="0 0 0" rotation="0 0 0" scale="3 3 3" 
   geometry="primitive: box;" material="envMap: #sky; 
   roughness: 0;metalness:1;side:back"></a-entity>
  

包含两个选项的演示在这里。只需使用立方体贴图或平面内的 wasd 控件导航您自己。在这里
查看源代码。