Three调用外部导入模型动画实例

基础环境搭建：

新建model/gltf文件夹，导入外部模型（THREE官网模型）：

创建灯光：

function initLight() {
    const hemLight = new THREE.HemisphereLight(0xffffff, 0x4444444)
    scene.add(hemLight)
    dirLight = new THREE.DirectionalLight(0xffffff, 1)
    dirLight.position.set(-3, 10, -10)
    scene.add(dirLight)
}

调用外部导入模型动画：

1. 导入加载器

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

2. 导入并打印gltf文件：

glTF格式本质上是一个JSON文件。这一文件描述了整个3D场景的内容。它包含了对场景结构进行描述的场景图。场景中的3D对象通过场景结点引用网格进行定义。材质定义了3D对象的外观，动画定义了3D对象的变换操作(比如旋转、平移操作)。蒙皮定义了3D对象如何进行骨骼变换，相机定义了渲染程序的视锥体设置。

.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined
url — 包含有.gltf/.glb文件路径/URL的字符串。
onLoad — 加载成功完成后将会被调用的函数。该函数接收parse所返回的已加载的JSON响应。
onProgress — （可选）加载正在进行过程中会被调用的函数。其参数将会是XMLHttpRequest实例，包含有总字节数.total与已加载的字节数.loaded。
onError — （可选）若在加载过程发生错误，将被调用的函数。该函数接收error来作为参数。
开始从url加载，并使用解析过的响应内容调用回调函数。

    loader = new GLTFLoader()
    loader.load(
        'models/gltf/Soldier.glb',
        function (SoldierModel) {
            mesh = SoldierModel.scene
            console.log(SoldierModel)
            scene.add(mesh)
        }
    )

3. 使用模型动画，参照上一篇

    ...
    const clip = SoldierModel.animations[1]
    mixer = new THREE.AnimationMixer(mesh)
    const clipAction = mixer.clipAction(clip)
    clipAction.play()
    render()
    ...
function render(){
	renderer.render(scene,camera)
	requestAnimationFrame(render)
	const delta = clock.getDelta()
	mixer.update(delta)	
}

这里为什么render()渲染函数在onLoad()回调函数中呢，GLTFLoader 依赖 ES6 Promises，.load models是一个异步调用过程，加载需要时间，这段时间内mixer为空，原位置调用则mixer.update不存在。
解决方式：

1. 原位置：if(mixer){.update()}
   

2. render()在异步调用后调用，即上段代码
   

美化背景、添加影子：

       mesh.traverse(function (object) {
            if (object.isMesh) {
                object.castShadow = true
            }
       })