微信小程序集成three.js--5.加载外部模型

1.场景演示

小程序集成Three.js，加载外部模型，并执行模型动画

2.源码

（1）引入three.js库

import * as THREE from '../../libs/three.weapp.js'
import gLTF from '../../jsm/loaders/GLTFLoader'
import {
    OrbitControls
} from '../../jsm/controls/OrbitControls'
const app = getApp()

库文件下载及配置看这里https://blog.csdn.net/weixin_39318421/article/details/128468409

（2）主要源码

 wx.createSelectorQuery()
            .select('#webgl')
            .node()
            .exec((res) => {
                let canvasId = String(res[0].node.id)
                const canvas = THREE.global.registerCanvas(canvasId, res[0].node)
                this.setData({
                    canvasId: canvasId
                })
                //相机
                const camera = new THREE.PerspectiveCamera(70, canvas.width / canvas.height, 1, 1000);
                //创建场景
                const scene = new THREE.Scene();
                scene.background = new THREE.Color(0xffffff);
                const renderer = new THREE.WebGLRenderer({
                    antialias: true
                });
                camera.position.set(10, 10, 10);

                //创建控制器
                const controls = new OrbitControls(camera, renderer.domElement);
                controls.enableDamping = true;
                controls.update();

                //创建光源
                const color = 0xFFFFFF;
                const intensity = 3;
                const light = new THREE.DirectionalLight(color, intensity);
                light.position.set(0, 0, 10);
                scene.add(light);

                //加载模型
                wx.showLoading({
                    title: '模型加载中',
                })
                const gltfLoader = new GLTFLoader()
            
                gltfLoader.load('https://file.balibali.work/2022/12/12/b22efd2840d3a58b80e17c835a772446.glb', (gltf) => {
                    wx.hideLoading({})
                    const model = gltf.scene
                    model.name = 'robot'
                    scene.add(model)
                    var states = ['Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing'];
                    var emotes = ['Jump', 'Yes', 'No', 'Wave', 'Punch', 'ThumbsUp'];
                    //将模型绑定到动画混合器里面
                    mixer = new THREE.AnimationMixer(model)
                    actions = {}
                    //获取模型中所有的动画数组
                    gltfActions = gltf
                    animations = gltf.animations
                    console.log(animations)
                    dance = animations[0]
                    danceAction = mixer.clipAction(dance)
                    //通过动画混合器播放模型中的动画
                    danceAction.play()
                })

                //平面
                const planeGeometry = new THREE.PlaneGeometry(200, 150, 10, 10);
                const planeMaterial = new THREE.MeshBasicMaterial({
                    color: 0xc7c7c7,
                    wireframe: true
                });
                planeMaterial.side = THREE.DoubleSide;
                const plane = new THREE.Mesh(planeGeometry, planeMaterial)
                plane.rotation.x = Math.PI / 2
                plane.position.y = 0
                scene.add(plane)

                //辅助线
                const axesHelper = new THREE.AxesHelper(500);
                scene.add(axesHelper)

                renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio);
                renderer.setSize(canvas.width, canvas.height);

                function render() {
                    canvas.requestAnimationFrame(render);
                    //更新控制器
                    controls.update();
                    //更新动画
                    var time = clock.getDelta()
                    if (mixer) {
                        mixer.update(time)
                    }
                    renderer.render(scene, camera);
                }
                render()
            })

（3）源码解析

模型加载后，通过动画混合器THREE.AnimationMixer将模型中的动画绑定到混合器内。

然后就可以通过混合器中的play()方法，播放模型的动画

这里有个需要注意的地方，就是你的小程序需要配置合法域名，把你的模型文件存储到合法域名内的存储空间，这样，在真机预览时才能加载出来，如果没有配置合法域名，即使勾选了不校验合法域名，在真机预览时，手机上也是不会显示模型的。

源码中的模型文件包含了10多个动画效果，可以通过修改 animations[] 中的序号，展现不同的动画。

3.实例小程序

 ThreeJS开发指南及模型下载

---