KHR_animation_pointer for three.js

This package adds a three.js GLTFLoader plugin for KHR_animation_pointer support allowing you to animate anything in your 3D scene, from material, light or camera properties to custom code.

Animate anything

• all material properties 💎 (including texture transforms)
• cameras 🎥
• lights 💡
• custom code/scripts 📄

Three.js Example

video.mp4

three.js Example

How to use

Install the package:
npm i @needle-tools/three-animation-pointer

Register the plugin on your GLTFLoader:

import { GLTFAnimationPointerExtension } from "@needle-tools/three-animation-pointer"

const loader = new GLTFLoader();
loader.register(p => {
    return new GLTFAnimationPointerExtension(p);
});

Note: To animate custom code you might need to register your own path resolver in the GLTFAnimationPointerExtension plugin

How to create glTF files with KHR_animation_pointer animations

You can use one of the listed tools below to export glTF animations in the right format

• Blender 4.3 and newer - experimental KHR_animation_pointer support, currently only in 'scene animation' mode (#2285)
• Needle Engine for Unity - using KHR_animation_pointer by default in all projects since 2022
• UnityGLTF - enable KHR_animation_pointer in settings to use in Exports

Mini Unity Tutorial

three.khr.animationpointer.unity.demo.mp4

Note: If you use UnityGLTF for exporting the glTF file make sure to enable the KHR_animation_pointer option in the UnityGLTF export settings.

Links

• Khronos KHR_animation_pointer spec
• three.js repository PR #24108
• three.js example - created in Unity

Contact ✒️

🌵 Needle • Github • Twitter • Discord • Forum • Youtube