Spaces:
Running
Running
| <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> | |