Question

我有多个图像（比如北，东，南，西），我希望它们在java脚本中使用aframe显示为一个组合全景/ 360视图，而不是每个图像都是显示为单独的360视图，如同天空一样。

以下是codepen供参考。

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

由两个选项组成的演示是here。只需在立方体贴图或平面内使用wasd-controls导航自己查看源代码here。

使用aframe webVR制作全景/ 360度

1 个答案: