maptalks 开发GIS地图（9）maptalks.three.02 animation

1. 说明： 本demo主要是加载了一个具有动画效果的三维机器人，然后通过鼠标选择菜单控制机器人的动作和表情。

　　其实这个机器人，本身就已经具有动画和动作表情效果了，只不过是使用threejs的接口，把它加载到地图上，

　　然后再调用API操控机器人。

 

2. 先来看一下  ../threelayer/demo/data/RobotExpressive.glb 这个文件。通过Windows10下面自带的 3D查看器软件打开。

    这是一个glb文件，通过3dmax软件导出后，已经具有了动画效果。而且还包括了多种动画效果。

 

3. 新建一个 maptalks 地图

关于maptalks 地图的功能，这里就不多讲了，可以参考前面的文章。

        var map = new maptalks.Map("map", {
            center: [19.06325670775459, 42.16842479475318],
            zoom: 9,
            pitch: 60,
            // bearing: 180,

            centerCross: true,
            doubleClickZoom: false,
            baseLayer: new maptalks.TileLayer('tile', {
                urlTemplate: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
                subdomains: ['a', 'b', 'c', 'd'],
                attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
            })
        });

 

4. 新建一个 ThreeLayer 图层，并设置三维三要素，光源、场景、镜头。

 // the ThreeLayer to draw buildings
        var threeLayer = new maptalks.ThreeLayer('t', {
            forceRenderOnMoving: true,
            forceRenderOnRotating: true
            // animation: true
        });
        threeLayer.prepareToDraw = function (gl, scene, camera) {
            var light = new THREE.DirectionalLight(0xffffff);
            light.position.set(0, -10, 10).normalize();
            scene.add(light);
            camera.add(new THREE.PointLight('#fff', 4));

            addGltf();

        };
        threeLayer.addTo(map);

 

5. 添加三维模型对象

这里使用了 THREE.GLTFLoader 对象，此函数包含在 GLTFLoader.js 中，需要调用前添加引用。

其中 model 对象是获取了三维模型中的场景，然后将三维模型进行旋转45°  model.rotation , 模型比例设为 1:1 ， scale.set , 模型的位置设在地图中心点。

使用 addMesh 添加三维模型到对应的threeLayer 图层，完成了三维模型对象在地图上的添加。

  function addGltf() {
            clock = new THREE.Clock();
            stats = new Stats();
            map.getContainer().appendChild(stats.dom);
            var loader = new THREE.GLTFLoader();
            loader.load('./data/RobotExpressive.glb', function (gltf) {

                model = gltf.scene;
                model.rotation.x = Math.PI / 2;
                model.scale.set(100, 100, 100);
                model.position.copy(threeLayer.coordinateToVector3(map.getCenter()));
                threeLayer.addMesh(model);

                createGUI(model, gltf.animations);
                animate();

            }, undefined, function (e) {

                console.error(e);

            });
        }

 

6. 创建GUI用以控制机器人

这就是前面那篇文章说的使用了 dat.gui.min.js 中相关的内容。

function createGUI(model, animations) {

            var states = ['Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing'];
            var emotes = ['Jump', 'Yes', 'No', 'Wave', 'Punch', 'ThumbsUp'];

            gui = new dat.GUI();

            mixer = new THREE.AnimationMixer(model);

            actions = {};

            for (var i = 0; i < animations.length; i++) {

                var clip = animations[i];
                var action = mixer.clipAction(clip);
                actions[clip.name] = action;

                if (emotes.indexOf(clip.name) >= 0 || states.indexOf(clip.name) >= 4) {

                    action.clampWhenFinished = true;
                    action.loop = THREE.LoopOnce;

                }

            }

            // states

            var statesFolder = gui.addFolder('States');

            var clipCtrl = statesFolder.add(api, 'state').options(states);

            clipCtrl.onChange(function () {

                fadeToAction(api.state, 0.5);

            });

            statesFolder.open();

            // emotes

            var emoteFolder = gui.addFolder('Emotes');

            function createEmoteCallback(name) {

                api[name] = function () {

                    fadeToAction(name, 0.2);

                    mixer.addEventListener('finished', restoreState);

                };

                emoteFolder.add(api, name);

            }

            function restoreState() {

                mixer.removeEventListener('finished', restoreState);

                fadeToAction(api.state, 0.2);

            }

            for (var i = 0; i < emotes.length; i++) {

                createEmoteCallback(emotes[i]);

            }

            emoteFolder.open();

            // expressions

            face = model.getObjectByName('Head_2');

            var expressions = Object.keys(face.morphTargetDictionary);
            var expressionFolder = gui.addFolder('Expressions');

            for (var i = 0; i < expressions.length; i++) {

                expressionFolder.add(face.morphTargetInfluences, i, 0, 1, 0.01).name(expressions[i]);

            }

            activeAction = actions['Walking'];
            activeAction.play();

            expressionFolder.open();

        }

 

7. 重新绘制webgl的状态，满足动画更新需要。

        function animate() {
            var dt = clock.getDelta();
            if (mixer) mixer.update(dt);
            requestAnimationFrame(animate);
            stats.update();
            // threeLayer._needsUpdate = !threeLayer._needsUpdate;
            if (threeLayer._needsUpdate) {
                threeLayer.renderScene();
            }

        }

 

8. 在 maptalks 地图中的效果。

 

9.  源码地址

https://github.com/WhatGIS/maptalkMap/tree/main/threelayer/demo