浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

A-FRAMEフレームワークに触れる

A-FRAMEと呼ばれるhtml・javascriptで作れる3D・VRに特化したwebフレームワークが

面白かったので触ってみました。

インストールは特に必要なく、 a-entityと呼ばれるタグ(パーツ)を追加してjavascriptで動作を追加していきます。

簡単なサンプルはこんな感じ↓ただ立体的な図形が並んでいるだけですが、これに

通常のhtml + javascriptと同じ要領で動作・装飾を追加することができます。

glitchエディタ(ログイン必要)でお試しください。

<pre class="wp-block-syntaxhighlighter-code"><!DOCTYPE html>
<html>
  <head>
    <a href="https://aframe.io/releases/1.2.0/aframe.min.js">https://aframe.io/releases/1.2.0/aframe.min.js</a>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html></pre>

本格的な3Dを作りたい場合はthree.jsの学習コストが別途かかります。

あと、マガジン登録を強く勧められますが特に無視してよい模様

(そこまで有益な情報がなくネットで十分なため)

  • この記事いいね! (0)