Spaces:
Running
Running
File size: 1,385 Bytes
f6682ef 468af3e f6682ef |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A-Frame GLB Loader Demo</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aframe-animation-component/dist/aframe-animation-component.min.js"></script>
</head>
<body>
<a-scene>
<!-- Load the first GLB file -->
<a-gltf-model id="model1" src="model1.glb" position="-2 0 -5" animation-mixer></a-gltf-model>
<!-- Load the second GLB file -->
<a-gltf-model id="model2" src="model2.glb" position="2 0 -5" animation-mixer></a-gltf-model>
<!-- Add a ground plane for the models to stand on -->
<a-plane position="0 -1 -5" rotation="-90 0 0" width="10" height="10" color="#7BC8A4"></a-plane>
<!-- Create an interface for moving the models around -->
<a-entity id="controller" laser-controls="hand: right" raycaster="objects: .movable">
<a-entity id="model1-handle" class="movable" position="-2 0 -5" rotation="0 45 0" scale="0.5 0.5 0.5">
<a-entity gltf-model="#model1" animation-mixer></a-entity>
</a-entity>
<a-entity id="model2-handle" class="movable" position="2 0 -5" rotation="0 -45 0" scale="0.5 0.5 0.5">
<a-entity gltf-model="#model2" animation-mixer></a-entity>
</a-entity>
</a-entity>
</a-scene>
</body>
</html>
|