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プログラミング道場」と合わせてどうぞ！
行こう、未来！
Fri Night
