WeChat applet integrates three.js--5. Loading external models

1. Scene demonstration

The applet integrates Three.js, loads external models, and performs model animation

2.Source code

(1) Introduce three.js library

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

Library file download and configuration see here https://blog.csdn.net/weixin_39318421/article/details/128468409

(2) Main source code

 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) Source code analysis

After the model is loaded, the animation in the model is bound to the mixer through the animation mixer THREE.AnimationMixer.

Then you can play the animation of the model through the play() method in the mixer

Something to note here is that your mini program needs to configure a legal domain name and store your model file in the storage space within the legal domain name, so that it can be loaded during real machine preview. If no legal domain name is configured, even if Checked Do not verify the legal domain name, and the model will not be displayed on the mobile phone when previewing on the real device.

The model file in the source code contains more than 10 animation effects, and different animations can be displayed by modifying the serial number in animations[].

3. Example applet

 ThreeJS development guide and model download

---