Skip to content

Commit ca44769

Browse files
marwiemarwie
committed
add animation pointer example page
1 parent 105a994 commit ca44769

File tree

3 files changed

+144
-0
lines changed

3 files changed

+144
-0
lines changed

‎examples/files.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"webgl": [
3+
"webgl_animation_animation-pointer",
34
"webgl_animation_keyframes",
45
"webgl_animation_skinning_blending",
56
"webgl_animation_skinning_additive_blending",

‎examples/screenshots/webgl_animation_animation-pointer.jpg‎

54.1 KB
Loading

‎examples/webgl_animation_animation-pointer.html‎

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

0 commit comments

Comments
 (0)