aframeを使ってパノラマ/ 360度を作成する

Question

複数の画像（北、東、南、西など）があり、それぞれの組み合わせのパノラマ/ 360のビューの代わりにJavaスクリプトでaframeを使用します。 a-skyのように個々の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> 
  

  あなたがしようとすることができるように、O、いくつかの地面とトップでそれを埋める：

• を6枚の画像のうち、キューブマップを作成します。

  <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をご覧ください。