今回は、A-frameで３Dの球を円状に並べるというサンプルになります。

こんな感じのものを表示するのが、このサンプルのゴールになります。

環境

今回は、a-frameの「a-frame school」で推奨されている、glitchというWeb上で開発できるeditorを使っています。

  • 開発環境：glitch
  • 主なライブラリ：react, aframe

index.html

aframeのjs読み込みを、このファイルのheadに書いています。

  <head>
      ・・・省略・・・
      <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  </head>

HelloWorld.jsx

Reactで書いています。　ここでは、<a-scene>の中で、<a-sphere>を円状に繰り返し記述したかったので、座標を円状に設定した<a-sphere>を, listの中にpushするという方法をとりました。

const React = require('react');


const HelloWorld = function() {
  let list = [];
  for (let i=0; i<10; i++) {
    let r = 0.75
    let x = r * Math.cos(Math.PI/5.0 * i)
    let y = r * Math.sin(Math.PI/5.0 * i) + 1
        
    list.push(<a-sphere position={`${x} ${y} -5`} radius="0.25" color="#EF2D5E"></a-sphere>);
  }
  return (
    <a-scene>
      {list}
    </a-scene>
  );
}

module.exports = HelloWorld;

ソース一式

今回のソースは、glitch.com　上に作っています。