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の学習コストが別途かかります。
あと、マガジン登録を強く勧められますが特に無視してよい模様
(そこまで有益な情報がなくネットで十分なため)
