This aframe component allows to load a glb with extensions from the hubs blender addon.
This is an alternate implementation of how Hubs imported the scene glb with aframe components. Some key differences:
<head>
<title>My A-Frame Scene</title>
<script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-gltf-model-plus@main/dist/aframe-1.4.2-custom.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-gltf-model-plus@main/dist/gltf-model-plus.min.js"></script>
...
</head>
<body>
<a-scene>
<a-assets timeout="30000">
<a-asset-item
id="sceneGLB"
src="https://cdn.jsdelivr.net/gh/c-frame/outdoor-festival@e9311cf/Outdoor_Festival.glb"
></a-asset-item>
</a-assets>
<a-entity class="environment-settings" gltf-model-plus="#sceneGLB"></a-entity>
...
</a-scene>
</body>
See the index.html file for the full example, some additional scripts and templates are required. This example is really just demonstrating how to load a hubs scene and has no UI. If you need a multi-users experience with avatars, chat, audio and screen share, look at the naf-valid-avatars example.
The gltf-model-plus
component make some assumptions:
simple-navmesh-constraint
component loaded.The waypoint
component make some assumptions:
move-to-spawn-point
component on the camera rig. Be sure to remove any spawn-in-circle
component that conflicts with it..clickable
, example raycaster="far: 100; objects: .clickable;"
Some components can also be used on <a-entity>
.
See the components documentation.
Clone the repo, install the dev dependencies and start the dev server:
git clone https://github.com/c-frame/aframe-gltf-model-plus.git
cd aframe-gltf-model-plus
npm install
npm start
Then go to http://localhost:8080
To test your scene, you can copy your_scene.glb
in the examples/playground
folder,
edit examples/playground/index.html
and modify the line that references the scene to
<a-asset-item id="sceneGLB" src="https://github.com/c-frame/aframe-gltf-model-plus/raw/main/your_scene.glb"></a-asset-item>
and refresh the page.
You can deploy the content of the examples/playground
folder to any server with static hosting but be sure to replace those two script tags:
<script src="https://github.com/c-frame/aframe-gltf-model-plus/raw/main/./../dist/aframe-1.4.2-custom.min.js"></script>
<script src="https://github.com/c-frame/aframe-gltf-model-plus/raw/main/./../dist/gltf-model-plus.min.js"></script>
by
<script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-gltf-model-plus@main/dist/aframe-1.4.2-custom.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-gltf-model-plus@main/dist/gltf-model-plus.min.js"></script>
Depending on your needs, if your experience doesn't require multi-users, you can run it on GitHub Pages for free. For this you need to push the folder content on a public GitHub repository and enable GitHub Pages in the repository settings.
If your experience only needs users without audio you can use the networked-aframe wseasyrtc or socketio adapters (see list of naf adapters).
For 3-4 users with audio and video with the easyrtc adapter (peer to peer), you can host it for free (the server will need to wake up on first access) or using a paid subscription on Glitch.
If you need more users with audio and video, you can subscribe to a VPS and have up to 30 users in a room with the janus adapter (SFU).
Legend:
Some features require a custom aframe build.
For comparison of this repository with Hubs code, see mapping to aframe components in Hubs's gltf-component-mappings.js.