3D Loading glTF and GLB Scenes

Part of Working in 3D.

glTF 2.0 is the open, web-native scene format — the "JPEG of 3D". Author a scene in Blender (or any DCC tool: Maya, 3ds Max, Cinema 4D, …), export .glb, and load it like a TMX map. Where an OBJ model is a single mesh, a glTF scene carries a node hierarchy, multiple meshes, materials, and a camera.

WebGL required, same as all 3D meshes (renderer: video.WEBGL).

Loading a scene

me.loader.preload([
  { name: "level", type: "glb", src: "models/level.glb" },
], () => {
  const scene = me.loader.getGLTF("level");   // { nodes, cameras, bounds }
  for (const node of scene.nodes) {
    const mesh = new me.Mesh(0, 0, {
      vertices: node.vertices, uvs: node.uvs, indices: node.indices,
      texture: node.image,
      width: SCALE,        // pixels per glTF unit (uniform scene scale)
      normalize: false,    // preserve real scene scale across nodes
      rightHanded: true,   // glTF is Y-up right-handed (see below)
    });
    mesh.currentTransform.val.set(node.world);  // node world transform
    me.game.world.addChild(mesh);
  }
});

getGLTF(name) returns { nodes, cameras, bounds }:

• nodes — one entry per mesh node, each carrying its world matrix (column-major 4×4), geometry (vertices / uvs / indices / vertexCount), and a decoded baseColor image.
• cameras — parsed camera nodes (world matrix + perspective params).
• bounds — { min, max } of the whole scene, handy for framing the camera.

View the scene under a Camera3d for a coherent perspective. See the glTF Scene example for a complete, orbit-controllable reference (Kenney Platformer Kit, CC0).

The two Mesh options that matter for scenes: normalize: false keeps every node at its real scale in a shared coordinate space (the default normalizes a single model to fit a box), and rightHanded: true fixes the coordinate handedness — see below.

Coordinate system (rightHanded)

glTF is Y-up, right-handed; melonJS is Y-down. Pass rightHanded: true so the conversion is a rotation (negate Y and Z, determinant +1), which preserves orientation. Without it, the default Y-only flip is a reflection that mirrors the scene left ↔ right. Triangle winding is handled automatically either way.

Camera

The glTF camera node is parsed into scene.cameras (world matrix + yfov / aspect / near / far). You can derive a Camera3d pose — position, orientation, and FOV — from it to reproduce the framing the author set up.

Supported	Not yet
Perspective cameras parsed (scene.cameras)	Orthographic camera handling
Derive a Camera3d pose from the embedded camera	Auto-instantiation (you wire it to Camera3d)

Honoring the authored FOV is optional and scene-dependent: a narrow authored FOV framed for a small set may not fit a much wider level within the far plane — use the camera's yfov only when it suits the scene, otherwise frame to the scene bounds.

Files & packaging

Supported	Not yet
.glb (binary, self-contained); .gltf with embedded / data-URI buffers & images	External .bin files and separate image files referenced by .gltf

For what's supported in terms of geometry, materials, animation, and lighting once loaded, see Loading & supported 3D assets (those limits apply to all 3D meshes, glTF included — notably: no PBR maps, no lighting, and no skeletal/morph animation).