angular-three-gltf

angular-three-gltf gives you a CLI to that turn GLTF assets into declarative and reusable Angular Three components.

This helps with performance optimization for asset-heavy Angular Three apps. It also allows you to modify your GLTF assets as Angular components, instead of working with 3D software like Blender.

Motivation

The GLTF workflow on the web is not ideal ...

• GLTF is thrown wholesale into the scene which prevents re-use, in threejs objects can only be mounted once
• Contents can only be found by traversal which is cumbersome and slow
• Changes to queried nodes are made by mutation, which alters the source data and prevents re-use
• Re-structuring content, making nodes conditional or adding/removing is cumbersome
• Model compression is complex and not easily achieved
• Models often have unnecessary nodes that cause extra work and matrix updates

angular-three-gltf fixes that

• 🧑‍💻 It creates a virtual graph of all objects and materials. Now you can easily alter contents and re-use.
• 🏎️ The graph gets pruned (empty groups, unnecessary transforms, ...) and will perform better.
• ⚡️ It will optionally compress your model with up to 70%-90% size reduction.

Usage

Usage
  $ npx angular-three-gltf@latest [Model.glb] [options]

Options
  --output, -o        Output file name/path
  --keepnames, -k     Keep original names
  --keepgroups, -K    Keep (empty) groups, disable pruning
  --meta, -m          Include metadata (as userData)
  --shadows, -s       Let meshes cast and receive shadows
  --printwidth, -w    Prettier printWidth (default: 120)
  --precision, -p     Number of fractional digits (default: 2)
  --draco, -d         Draco binary path
  --suspense -u       Make the component suspense-ready
  --root, -r          Sets directory from which .gltf file is served
  --transform, -T     Transform the asset for the web (draco, prune, resize)
    --resolution, -R  Transform resolution for texture resizing (default: 1024)
    --simplify, -S    Transform simplification (default: false) (experimental!)
      --weld          Weld tolerance (default: 0.0001)
      --ratio         Simplifier ratio (default: 0.75)
      --error         Simplifier error threshold (default: 0.001)
  --debug, -D         Debug output

Requirements

• NodeJS must be installed
• three (>= 148.x)
• angular-three > 2.0.0

A typical use-case

First you run your model through angular-three-gltf. npx allows you to use npm packages without installing them.

npx angular-three-gltf@latest model.gltf --transform

Add your model to your /public folder as you would normally do. With the --transform flag it has created a compressed copy of it (in the above case model-transformed.glb). Without the flag just copy the original model.

/public
  model-transformed.glb

The component can now be dropped into your scene.

<script>
  import { Canvas } from '@threlte/core'
  import Model from './Model.svelte'
</script>

<Canvas>
  <Model />
</Canvas>

You can re-use it, it will re-use geometries and materials out of the box:

<Model position={[0, 0, 0]} />
<Model position={[10, 0, -10]} />

Or make the model dynamic. Change its colors for example:

<T.Mesh geometry={$gltf.nodes.robot.geometry} material={$gltf.materials.metal} material.color="green" />

Or exchange materials:

<T.Mesh geometry={$gltf.nodes.robot.geometry}>
  <T.MeshPhysicalMaterial color="hotpink" />
</T.Mesh>

Make contents conditional:

{#if condition}
  <T.Mesh geometry={$gltf.nodes.robot.geometry} material={$gltf.materials.metal} />}
{/if}

Features

⚡️ Draco and meshopt compression ootb

You don't need to do anything if your models are draco compressed, since useGltf defaults to a draco CDN. By adding the --draco flag you can refer to local binaries which must reside in your /public folder.

⚡️ Auto-transform (compression, resize)

With the --transform flag it creates a binary-packed, draco-compressed, texture-resized (1024x1024), webp compressed, deduped, instanced and pruned *.glb ready to be consumed on a web site. It uses glTF-Transform. This can reduce the size of an asset by 70%-90%.

It will not alter the original but create a copy and append [modelname]-transformed.glb.

⚡️ Type-safety

Add the --types flag and your component will be typesafe.

<!--
Auto-generated by: https://github.com/pmndrs/gltfjsx
Command: npx [email protected] ./stacy.glb -t
-->
<script lang="ts">
  import type * as THREE from 'three'
  import { Group } from 'three'
  import { T, type Props, type Events, type Slots } from '@threlte/core'
  import { useGltf, useGltfAnimations } from '@threlte/extras'

  type $$Props = Props<THREE.Group>
  type $$Events = Events<THREE.Group>
  type $$Slots = Slots<THREE.Group>

  export const ref = new Group()

  type ActionName = 'pockets' | 'rope' | 'swingdance' | 'jump' | 'react' | 'shrug' | 'wave' | 'golf' | 'idle'
  type GLTFResult = {
    nodes: {
      stacy: THREE.SkinnedMesh
      mixamorigHips: THREE.Bone
    }
    materials: {}
  }

  const gltf = useGltf<GLTFResult>('/stacy.glb')
  export const { actions, mixer } = useGltfAnimations<ActionName>(gltf, ref)
</script>

{#if $gltf}
  <T is={ref} {...$$restProps}>
    <T.Group name="Scene">
      <T.Group name="Stacy" rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
        <T is={$gltf.nodes.mixamorigHips} />
        <T.SkinnedMesh
          name="stacy"
          geometry={$gltf.nodes.stacy.geometry}
          material={$gltf.nodes.stacy.material}
          skeleton={$gltf.nodes.stacy.skeleton}
          rotation={[-Math.PI / 2, 0, 0]}
          scale={100}
        />
      </T.Group>
    </T.Group>

    <slot {ref} />
  </T>
{/if}

⚡️ Easier access to animations

If your GLTF contains animations it will add @threlte/extras's useGltfAnimations hook, which extracts all clips and prepares them as actions:

const gltf = useGltf('/stacy.glb')
export const { actions, mixer } = useGltfAnimations(gltf, ref)

If you want to play an animation you can do so at any time:

const onEvent = () => {
  $actions.jump.play();
};

Using the parser stand-alone

import { parse } from "@threlte/gltf";
import { GLTFLoader, DRACOLoader } from "three-stdlib";

const gltfLoader = new GLTFLoader();
const dracoloader = new DRACOLoader();
dracoloader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");
gltfLoader.setDRACOLoader(dracoloader);

gltfLoader.load(url, (gltf) => {
  const component = parse(filename, gltf, config);
});

License

The MIT License (MIT). Please see the License File for more information.