2021-11-27
NT鯖江の出展、Meta社に変わったFacebook社によるVR、Oculus Quest 2 とiPhoneのLiDARを使ってスキャンした3Dモデルの世界へ入ってみる体験。


EIGHT SENSEへバーチャル帰宅中
行ったことない場所へ、実際歩いてみる体験。2次元のスマホでは伝わらなくてもどかしい、3次元体験。 Oculus Questから、Meta Questへ名前が変わることになった様子。スタンドアローンで安価で、衝撃的、引き続きオススメです!


Webプログラミング道場
VRを使ったアプリ開発はとってもかんたん!このアプリに下記コードをコピペして、「見てみる」ボタンか「Ctrl+S」キーで右側で動き始めます! <!DOCTYPE html><html><head> <title>glb-viewer</title> <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script> <script src="https://rawgit.com/fernandojsg/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script> <script type="module"> onload = async () => { let th = -2.5; const tick = () => { const x = Math.cos(th); const y = 1.3; const z = Math.sin(th); sphere.setAttribute("position", { x, y, z }); const r = Math.cos(th) * .02 + .1; sphere.setAttribute("radius", r); th += .03; requestAnimationFrame(tick); }; tick(); }; </script> </head> <body> <a-scene id="scene" background="color: black"> <a-assets timeout="10000"> <a-asset-item id="sabae" src="https://code4fukui.github.io/glb-viewer/eightsense.glb"></a-asset-item> </a-assets> <a-entity gltf-model="#sabae" position="0 .3 0"></a-entity> <a-entity light="type: ambient; color: #FFF"></a-entity> <a-entity light="type: directional; color: #FFF; intensity: 1" position="-0 2 1"></a-entity> <!--<a-plane color="#888" height="300" width="300" rotation="-90 0 0"></a-plane>--> <a-sphere id="sphere" color="#f22"></a-sphere> <a-entity id="cameraRig"> <a-entity id="head" camera position="0 1.7 0" wasd-controls look-controls></a-entity> <a-entity oculus-touch-controls="hand:left" teleport-controls="button:trigger; collisionEntities:.collidable; cameraRig:#cameraRig; teleportOrigin:#head;"></a-entity> <a-entity oculus-touch-controls="hand:right" teleport-controls="button:trigger; collisionEntities:.collidable; cameraRig:#cameraRig; teleportOrigin:#head;"></a-entity> </a-entity> </a-scene> </body> </html> 「a-」で始まるハイフン付きHTMLの拡張タグが、VRフレームワーク、A-Frameの特徴。 ページを作るように、3D空間が創れて楽しいですよ!
VRではじめる現代HTML入門 - Oculus Quest x 福井高専生
Webプログラミング道場」と合わせてどうぞ!


行こう、未来!

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS