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:
Some features require patches in three.js to work properly. We're using the aframe ES module with a super-three fork with some HUBS patches in the code below.
Be sure to load any script that uses global AFRAME or THREE with defer.
<head>
<title>My A-Frame Scene</title>
<script type="importmap">
{
"imports": {
"aframe": "https://aframe.io/releases/1.7.0/aframe.module.min.js",
"three": "https://cdn.jsdelivr.net/gh/vincentfretin/three.js@super-r173-5-lut/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/gh/vincentfretin/three.js@super-r173-5-lut/examples/jsm/"
}
}
</script>
<script type="module">
import AFRAME from 'aframe';
</script>
<script defer src="https://cdn.jsdelivr.net/gh/c-frame/[email protected]/dist/gltf-model-plus.min.js"></script>
<script>
window.absoluteURLForAsset = (url) => {
if (!url) return "";
if (url.startsWith("https://uploads-prod.reticulum.io/files/")) {
return url.replace("https://uploads-prod.reticulum.io/files/", "./files/");
}
return url;
}
</script>
</head>
<body>
<a-scene>
<a-assets timeout="30000">
<a-asset-item id="sceneGLB" src="./scene.glb"></a-asset-item>
<!--<a-asset-item id="objectsGLB" src="./objects.gltf"></a-asset-item>-->
<!-- put the files in a files directory next to objects.gltf and uncomment the second gltf-model-plus below -->
</a-assets>
<a-entity class="environment-settings" gltf-model-plus="#sceneGLB"></a-entity>
<!--<a-entity gltf-model-plus="#objectsGLB"></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="./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 defer src="../../dist/gltf-model-plus.min.js"></script>
by
<script defer src="https://cdn.jsdelivr.net/gh/c-frame/[email protected]/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:
For comparison of this repository with Hubs code, see mapping to aframe components in Hubs's gltf-component-mappings.js.