Simple animation support (LittlestTokyo)

demo/index.ts

@@ -1,13 +1,16 @@
 import { load } from '@2gis/mapgl';
 import { GltfPlugin } from '../src/index';
+import * as THREE from 'three';
+import { Map } from '@2gis/mapgl/types';
 
 async function start() {
     const mapglAPI = await load();
 
     const map = new mapglAPI.Map('container', {
-        center: [82.886554, 54.980988],
-        zoom: 18,
+        center: [30.31242152752531, 59.938661736762796],
+        zoom: 19,
         key: 'cb20c5bf-34d3-4f0e-9b2b-33e9b8edb57f',
+        style: 'e05ac437-fcc2-4845-ad74-b1de9ce07555',
         pitch: 45,
         rotation: 330,
         enableTrackResize: true,
@@ -16,7 +19,7 @@ async function start() {
     const plugin = new GltfPlugin(map, {
         modelsLoadStrategy: 'dontWaitAll',
         dracoScriptsUrl: 'libs/draco/',
-        ambientLight: { color: '#ffffff', intencity: 2.5 },
+        ambientLight: { color: '#ffffff', intencity: 0.8 },
     });
 
     map.on('click', (e) => {
@@ -27,28 +30,43 @@ async function start() {
         .addModels([
             {
                 id: 1,
-                coordinates: [82.886554, 54.980988],
-                modelUrl: 'models/cube_draco.glb',
+                coordinates: [30.312371651427508, 59.93925231920281],
+                modelUrl: 'https://threejs.org/examples/models/gltf/LittlestTokyo.glb',
                 rotateX: 90,
-                scale: 1000,
+                rotateY: 38,
+                scale: 15,
                 linkedIds: ['141373143530065', '70030076379181421'],
             },
-            {
-                id: 2,
-                coordinates: [82.886454, 54.980388],
-                modelUrl: 'models/cube_draco.glb',
-                rotateX: 90,
-                rotateY: 31,
-                scale: 700,
-                linkedIds: ['141373143530064', '70030076379180575'],
-            },
         ])
         .then(() => {
             console.log('Models are loaded');
+            startAnimation(plugin, map);
         })
         .catch((e) => {
             console.error(e);
         });
 }
 
+function startAnimation(plugin: GltfPlugin, map: Map) {
+    const model = plugin.getModel(1);
+    const gltf = plugin.getSource(1);
+    if (!model || !gltf) {
+        return;
+    }
+
+    model.translateY(3000);
+    const clock = new THREE.Clock();
+    const mixer = new THREE.AnimationMixer(model);
+    mixer.clipAction(gltf.animations[0]).play();
+
+    animate();
+
+    function animate() {
+        requestAnimationFrame(animate);
+        const delta = clock.getDelta();
+        mixer.update(delta);
+        map.triggerRerender();
+    }
+}
+
 start();

src/plugin.ts

@@ -27,6 +27,7 @@ export class GltfPlugin {
     private onThreeJsInit = () => {}; // resolve of waitForThreeJsInit
     private waitForThreeJsInit = new Promise<void>((resolve) => (this.onThreeJsInit = resolve));
     private models = new Map<string, THREE.Object3D>();
+    private sources = new Map<string, GLTF>();
 
     /**
      * Example:
@@ -121,6 +122,7 @@ export class GltfPlugin {
                             return;
                         }
                         this.models.set(modelId, model);
+                        this.sources.set(modelId, gltf);
 
                         if (this.options.modelsLoadStrategy === 'dontWaitAll') {
                             if (linkedIds) {
@@ -155,6 +157,14 @@ export class GltfPlugin {
         });
     }
 
+    public getModel(id: number) {
+        return this.models.get(String(id));
+    }
+
+    public getSource(id: number) {
+        return this.sources.get(String(id));
+    }
+
     private render() {
         this.camera.projectionMatrix.fromArray(this.map.getProjectionMatrixForGltfPlugin());
         this.camera.projectionMatrixInverse.copy(this.camera.projectionMatrix).invert();