Skip to content

Commit 912b1f0

Browse files
marwiemarwie
committed
add webgpu animation pointer example
1 parent 0b47db7 commit 912b1f0

File tree

2 files changed

+145
-0
lines changed

2 files changed

+145
-0
lines changed

‎examples/files.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -352,6 +352,7 @@
352352
"webgpu_lines_fat_wireframe",
353353
"webgpu_lines_fat",
354354
"webgpu_loader_gltf",
355+
"webgpu_loader_gltf_animation_pointer",
355356
"webgpu_loader_gltf_anisotropy",
356357
"webgpu_loader_gltf_compressed",
357358
"webgpu_loader_gltf_dispersion",

‎examples/webgpu_loader_gltf_animation_pointer.html‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>three.js webgl - animation - keyframes</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7+
<link type="text/css" rel="stylesheet" href="main.css">
8+
<style>
9+
body {
10+
background-color: #bfe3dd;
11+
color: #000;
12+
}
13+
14+
a {
15+
color: #2983ff;
16+
}
17+
</style>
18+
</head>
19+
20+
<body>
21+
22+
<div id="container"></div>
23+
24+
<div id="info">
25+
<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/>
26+
DragonDispersion from <a href="https://github.com/KhronosGroup/glTF-Sample-Assets/tree/main/Models/DragonDispersion" target="_blank" rel="noopener">glTF-Sample-Assets</a>
27+
</div>
28+
29+
<script type="importmap">
30+
{
31+
"imports": {
32+
"three": "../build/three.module.js",
33+
"three/webgpu": "../build/three.webgpu.js",
34+
"three/addons/": "./jsm/",
35+
"@needle-tools/three-animation-pointer": "https://cdn.jsdelivr.net/npm/@needle-tools/[email protected]"
36+
}
37+
}
38+
</script>
39+
40+
<script type="module">
41+
42+
import * as THREE from 'three/webgpu';
43+
44+
import Stats from 'three/addons/libs/stats.module.js';
45+
46+
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
47+
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
48+
49+
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
50+
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
51+
import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
52+
import { GLTFAnimationPointerExtension } from '@needle-tools/three-animation-pointer';
53+
54+
let mixer;
55+
56+
const clock = new THREE.Clock();
57+
const container = document.getElementById( 'container' );
58+
59+
const stats = new Stats();
60+
container.appendChild( stats.dom );
61+
62+
const renderer = new THREE.WebGPURenderer( { antialias: true/*, compatibilityMode: true*/ } );
63+
renderer.setPixelRatio( window.devicePixelRatio );
64+
renderer.setSize( window.innerWidth, window.innerHeight );
65+
container.appendChild( renderer.domElement );
66+
67+
const pmremGenerator = new THREE.PMREMGenerator( renderer );
68+
69+
const scene = new THREE.Scene();
70+
scene.background = new THREE.Color( 0xbfe3dd );
71+
scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;
72+
73+
const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, .2, 100 );
74+
camera.position.set( -3, 2, 6 );
75+
76+
const controls = new OrbitControls( camera, renderer.domElement );
77+
controls.target.set( 0, 0.5, 0 );
78+
controls.update();
79+
controls.enablePan = false;
80+
controls.enableDamping = true;
81+
82+
const dracoLoader = new DRACOLoader();
83+
dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
84+
85+
86+
const ktx2Loader = new KTX2Loader()
87+
.setTranscoderPath( 'jsm/libs/basis/' )
88+
.detectSupport( renderer );
89+
90+
const loader = new GLTFLoader();
91+
loader.setDRACOLoader( dracoLoader );
92+
loader.setKTX2Loader( ktx2Loader );
93+
94+
loader.register(p => {
95+
return new GLTFAnimationPointerExtension(p);
96+
});
97+
98+
loader.load( 'https://cloud.needle.tools/-/assets/Z23hmXB27L6Db/file', function ( gltf ) {
99+
100+
const model = gltf.scene;
101+
scene.add( model );
102+
103+
mixer = new THREE.AnimationMixer( model );
104+
mixer.clipAction( gltf.animations[ 0 ] ).play();
105+
106+
renderer.setAnimationLoop( animate );
107+
108+
}, undefined, function ( e ) {
109+
110+
console.error( e );
111+
112+
} );
113+
114+
115+
window.onresize = function () {
116+
117+
camera.aspect = window.innerWidth / window.innerHeight;
118+
camera.updateProjectionMatrix();
119+
120+
renderer.setSize( window.innerWidth, window.innerHeight );
121+
122+
};
123+
124+
125+
function animate() {
126+
127+
const delta = clock.getDelta();
128+
129+
mixer.update( delta );
130+
131+
controls.update();
132+
133+
stats.update();
134+
135+
renderer.renderAsync( scene, camera );
136+
137+
}
138+
139+
140+
</script>
141+
142+
</body>
143+
144+
</html>

0 commit comments

Comments
 (0)