https://mesatask.github.io/animate.js

1import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.js';
2import {OrbitControls} from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js';
3import {GLTFLoader} from 'https://unpkg.com/[email protected]/examples/jsm/loaders/GLTFLoader.js';
4// import { DRACOLoader } from 'https://unpkg.com/[email protected]/examples/jsm/loaders/DRACOLoader';
5import { DRACOLoader } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/DRACOLoader.js';
6
7
8const W_H = 16 / 9;
9const moSel = document.querySelector('#motionSelector')
10moSel.value = 'scene0679_00'
11// let allModelUrl = ['./assets/generated_motions/RaiseTwoArms.glb'];
12// let allModelUrl = new URL(`./assets/grasp_generation_color/RaiseTwoArms.glb`, import.meta.url)
13const allCanvas = document.querySelectorAll('canvas');
14const allRenders = [];
15let model;
16let mixer;
17
18// Process all canvas
19// function load_model() {
20
21const canvas = allCanvas[0];
22const scene = new THREE.Scene();
23// const modelUrl = new URL('./assets/generated_motions/RaiseTwoArms.glb', import.meta.url);
24// load glb model and add to scene
25
26// create camera
27const camera = new THREE.PerspectiveCamera(45, W_H, 0.1, 100);
28camera.position.set(3, 2, -3);
29scene.add(camera);
30
31// create light
32const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
33scene.add(light);
34
35// create grid
36const grid = new THREE.GridHelper(30, 30);
37scene.add(grid);
38
39// create controls
40const controls = new OrbitControls(camera, canvas);
41controls.enableZoom = true;
42controls.enableDamping = true;
43controls.object.position.set(camera.position.x, camera.position.y, camera.position.z);
44controls.target = new THREE.Vector3(0, 0, 0);
45controls.update();
46
47// create renderer
48const renderer = new THREE.WebGLRenderer({
49    canvas: canvas,
50    alpha: true
51});
52renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
53renderer.outputEncoding = THREE.sRGBEncoding;
54
55const clock = new THREE.Clock();
56renderer.setAnimationLoop(() => {
57  if (mixer)
58    mixer.update(clock.getDelta());
59  renderer.render(scene, camera);
60});
61
62allRenders.push(renderer);
63
64
65function load_model(){
66  const draco = new DRACOLoader();
67  draco.setDecoderConfig({ type: 'js' });
68  draco.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');
69
70  const assetLoader = new GLTFLoader();
71  assetLoader.setDRACOLoader(draco)
72
73  if (moSel.value == '') {
74    return
75  }
76  let allModelUrl = './assets/generated_motions/' + moSel.value + '.glb';
77
78  scene.remove(model)
79  document.querySelector('#motion_loading').innerHTML = `<img src="./assets/icons/loading.svg" width="48" height="48">`
80  let modelUrl = new URL(allModelUrl, import.meta.url);
81
82  assetLoader.load(modelUrl.href, function(gltf) {
83    model = gltf.scene;
84    scene.add(model);
85    document.querySelector('#motion_loading').innerHTML = ''
86    mixer = new THREE.AnimationMixer(model);
87
88
89    const clips = gltf.animations;
90
91    camera.position.set(3, 2, -3);
92    scene.add(camera);
93
94    clips.forEach(function(clip) {
95        const action = mixer.clipAction(clip);
96        action.play();
97    });
98
99  }, undefined, function(error) {
100      console.error(error);
101  });
102
103
104}
105
106moSel.addEventListener('change', load_model)
107load_model()
108
109// resize renderers
110function resizeRenderers() {
111  let content_width = document.querySelector('#teaser-demo').offsetWidth * 1.0;
112  for (let i = 0; i < allRenders.length; i++) {
113    allRenders[i].setSize(content_width, content_width / W_H);
114  }
115}
116window.addEventListener('resize', () => {
117  resizeRenderers();
118})
119resizeRenderers();