<!DOCTYPE html>
<html>
<head>
<title>A-Frame Physics & AR Sample</title>
<meta charset="utf-8">
<script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ammo-builds@1.0.0/ammo.wasm.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@c-frame/aframe-physics-system@4.2.2/dist/aframe-physics-system.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.2.0/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene
webxr="optionalFeatures: dom-overlay; overlayElement: #overlay;"
renderer="colorManagement: true;"
physics="driver: ammo; debug: false;">
<a-assets>
<img id="woodTexture" src="https://cdn.glitch.global/6d445c79-374c-4713-a035-7925a69700a8/wood.jpg?v=1680197921935">
</a-assets>
<a-entity id="world" position="0 0 -3">
<a-light type="ambient" color="#FFF" intensity="0.7"></a-light>
<a-light type="directional" position="0 5 2" intensity="0.8"></a-light>
<a-plane position="0 0 0" rotation="-90 0 0" width="30" height="30" static-body material="visible: false"></a-plane>
<a-entity id="table">
<a-box id="table-top" position="0 1 0" width="2" height="0.1" depth="1.2" static-body material="src: #woodTexture"></a-box>
<a-box id="leg1" position="-0.9 0.5 -0.5" width="0.1" height="1" depth="0.1" static-body material="src: #woodTexture"></a-box>
<a-box id="leg2" position="0.9 0.5 -0.5" width="0.1" height="1" depth="0.1" static-body material="src: #woodTexture"></a-box>
<a-box id="leg3" position="-0.9 0.5 0.5" width="0.1" height="1" depth="0.1" static-body material="src: #woodTexture"></a-box>
<a-box id="leg4" position="0.9 0.5 0.5" width="0.1" height="1" depth="0.1" static-body material="src: #woodTexture"></a-box>
</a-entity>
<a-box class="grabbable" position="-0.3 1.15 0" width="0.4" height="0.4" depth="0.4" dynamic-body color="tomato" ></a-box>
<a-box class="grabbable" position="0.1 1.15 -0.2" width="0.4" height="0.4" depth="0.4" dynamic-body color="skyblue"></a-box>
<a-box class="grabbable" position="0.4 1.15 0.1" width="0.4" height="0.4" depth="0.4" dynamic-body color="gold"></a-box>
<a-box class="grabbable" position="0 1.55 -0.1" rotation="30 45 15" width="0.4" height="0.4" depth="0.4" dynamic-body color="#4CC3D9"></a-box>
</a-entity>
<a-entity id="rig" movement-controls="enabled: false;"> <a-entity camera position="0 1.6 0" look-controls></a-entity>
<a-entity oculus-touch-controls="hand: left" super-hands></a-entity>
<a-entity oculus-touch-controls="hand: right" super-hands></a-entity>
</a-entity>
</a-scene>
</body>
</html>
使用変数
| charset | |
| class | |
| color | |
| controls | |
| depth | |
| height | |
| id | |
| intensity | |
| material | |
| physics | |
| position | |
| renderer | |
| rotation | |
| src | |
| type | |
| v | |
| webxr | |
| width |