Don't inflate the scene glb as aframe entities, keep it as is, but if needed create an entity and reparent the mesh to apply an aframe component (nav-mesh, waypoint, simple-water), keep track of those to remove them when switching scene.
Properly dispose of geometries, materials and textures when switching scene

Usage

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/aframe-gltf-model-plus@1.2.1/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:

You have the simple-navmesh-constraint component loaded.
It will load the environment-settings extension from the glb only if you add the class "environment-settings" to the entity.

The waypoint component make some assumptions:

You have your camera rig with id="rig" or id="cameraRig", and a child entity with the camera component.
For the spawn point to work (a waypoint with canBeSpawnPoint set to true), you need to add the move-to-spawn-point component on the camera rig. Be sure to remove any spawn-in-circle component that conflicts with it.
You have a raycaster component that targets .clickable, example raycaster="far: 100; objects: .clickable;"
You need to call unoccupyWaypoint() for navigation-start and moved events, see the player-info component in index.html
Optional: you have a player-info component on the camera rig with avatarPose string property (stand or sit) and seatRotation number property (y angle).

Components and primitives

Some components can also be used on <a-entity>. See the components documentation.

Run the examples locally

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.

Deployment

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>

<script defer src="https://cdn.jsdelivr.net/gh/c-frame/aframe-gltf-model-plus@1.2.1/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).

Blender hubs components compatibility

Legend:

Done
[?] Probably won't be implemented

Animation

Loop Animation ({clip: 'animationName'} and {activeClipIndices: [0]} structs support only)
UV Scroll

Avatar

[?] Morph Audio Feedback
[?] Personal Space Invader
[?] Scale Audio Feedback

Elements

Link (open-link to not conflict with aframe link component)
Media Frame
Particle Emitter
Simple Water (use simple TextureLoader instead of HubsTextureLoader so no ImageBitmap, only support high quality so MeshStandardMaterial)
Spawner
Text (with aframe-troika-text)
Waypoint (if you add move-to-spawn-point component on your camera rig, it takes the first waypoint with canBeSpawnPoint to change the camera rig position and rotation, and reset camera rig to first spawn point when switching scene)
Mirror (use @fern-solutions/aframe-mirror) It's not in hubs addons, but you can write a Python module to add it.

Lights

Media

Audio: sounds with old audio component or audio+audio-params components
[?] Audio Source
[?] Audio Target
[?] Audio Zone
Image (supports gif, jpg, png, webp, avif and ktx2, animated gif not implemented)
Model
PDF
Video (spatial sound not implemented)

Object

Ammo Shape
Shadow (to set receive and cast)
Billboard
[?] Frustum
Visible (used with nav-mesh component generally)

Scene

Navigation Mesh (aframe-extras nav-mesh component is set on it for aframe-extras nav-agent, and also a class navmesh that can be used with simple-navmesh-constraint)
[?] Scene Preview Camera
Video Texture Target (set on a material associated to a plane on an avatar or in the scene)
[?] Skybox
Environment Settings (from Scene icon) (require three.js patch for non hdr background texture loaded from glb)
- toneMapping with LUTToneMapping support (require three.js patch) & toneMappingExposure
Fog (from Scene icon)
Support of MOZ_lightmap (Node in Shading tab) (require three.js patch)
Reflection Probe (require three.js patch)

For comparison of this repository with Hubs code, see mapping to aframe components in Hubs's gltf-component-mappings.js.

Keywords

FAQs

What is @c-frame/aframe-gltf-model-plus?

Is @c-frame/aframe-gltf-model-plus well maintained?

Package last updated on 20 Jun 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@c-frame/aframe-gltf-model-plus

gltf-model-plus