mrdoob · Mugen87 · Aug 29, 2025 · Aug 27, 2025 · Aug 28, 2025
diff --git a/examples/files.json b/examples/files.json
@@ -82,6 +82,7 @@
 		"webgl_loader_fbx_nurbs",
 		"webgl_loader_gcode",
 		"webgl_loader_gltf",
+		"webgl_loader_gltf_animation_pointer",
 		"webgl_loader_gltf_progressive_lod",
 		"webgl_loader_gltf_avif",
 		"webgl_loader_gltf_compressed",

diff --git a/examples/screenshots/webgl_loader_gltf_animation_pointer.jpg b/examples/screenshots/webgl_loader_gltf_animation_pointer.jpg
diff --git a/examples/tags.json b/examples/tags.json
@@ -45,6 +45,7 @@
 	"webgl_lights_pointlights": [ "multiple" ],
 	"webgl_lines_fat": [ "gpu", "stats", "panel" ],
 	"webgl_lines_fat_raycasting": [ "gpu", "stats", "panel", "raycast" ],
+	"webgl_loader_gltf_animation_pointer": [ "external", "animation", "gltf" ],
 	"webgl_loader_3dtiles": [ "external", "3dtiles", "3d-tiles", "maps", "tiles", "globe", "earth", "cesium" ],
 	"webgl_loader_gltf_dispersion": [ "transmission" ],
 	"webgl_loader_gltf_progressive_lod": [ "external", "performance", "plugin", "library", "level", "details" ],

diff --git a/examples/webgl_loader_gltf_animation_pointer.html b/examples/webgl_loader_gltf_animation_pointer.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - animation - keyframes</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
+		<style>
+			body {
+				background-color: #bfe3dd;
+				color: #000;
+			}
+
+			a {
+				color: #2983ff;
+			}
+		</style>
+	</head>
+
+	<body>
+
+		<div id="container"></div>
+
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> + <a href="https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_animation_pointer" target="_blank" rel="noopener">KHR_animation_pointer</a> using <a href="https://www.npmjs.com/package/@needle-tools/three-animation-pointer" target="_blank" rel="noopener">@needle-tools/three-animation-pointer</a><br/>
+			DragonDispersion from <a href="https://github.com/KhronosGroup/glTF-Sample-Assets/tree/main/Models/DragonDispersion" target="_blank" rel="noopener">glTF-Sample-Assets</a>
+		</div>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/",
+          			"@needle-tools/three-animation-pointer": "https://cdn.jsdelivr.net/npm/@needle-tools/[email protected]"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from 'three';
+
+			import Stats from 'three/addons/libs/stats.module.js';
+
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
+
+			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+			import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
+			import { GLTFAnimationPointerExtension } from '@needle-tools/three-animation-pointer';
+
+			let mixer;
+
+			const clock = new THREE.Clock();
+			const container = document.getElementById( 'container' );
+
+			const stats = new Stats();
+			container.appendChild( stats.dom );
+
+			const renderer = new THREE.WebGLRenderer( { antialias: true } );
+			renderer.setPixelRatio( window.devicePixelRatio );
+			renderer.setSize( window.innerWidth, window.innerHeight );
+			container.appendChild( renderer.domElement );
+
+			const pmremGenerator = new THREE.PMREMGenerator( renderer );
+
+			const scene = new THREE.Scene();
+			scene.background = new THREE.Color( 0xbfe3dd );
+			scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;
+
+			const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, .2, 100 );
+			camera.position.set( -3, 2, 6 );
+
+			const controls = new OrbitControls( camera, renderer.domElement );
+			controls.target.set( 0, 0.5, 0 );
+			controls.update();
+			controls.enablePan = false;
+			controls.enableDamping = true;
+
+			const dracoLoader = new DRACOLoader();
+			dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
+
+
+			const ktx2Loader = new KTX2Loader()
+				.setTranscoderPath( 'jsm/libs/basis/' )
+				.detectSupport( renderer );
+
+			const loader = new GLTFLoader();
+			loader.setDRACOLoader( dracoLoader );
+			loader.setKTX2Loader( ktx2Loader );
+
+			loader.register(p => {
+				return new GLTFAnimationPointerExtension(p);
+			});
+
+			loader.load( 'https://cloud.needle.tools/-/assets/Z23hmXB27L6Db-optimized/file', function ( gltf ) {
+
+				const model = gltf.scene;
+				scene.add( model );
+
+				mixer = new THREE.AnimationMixer( model );
+				mixer.clipAction( gltf.animations[ 0 ] ).play();
+
+				renderer.setAnimationLoop( animate );
+
+			}, undefined, function ( e ) {
+
+				console.error( e );
+
+			} );
+
+
+			window.onresize = function () {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			};
+
+
+			function animate() {
+
+				const delta = clock.getDelta();
+
+				mixer.update( delta );
+
+				controls.update();
+
+				stats.update();
+
+				renderer.render( scene, camera );
+
+			}
+
+
+		</script>
+
+	</body>
+
+</html>