threejs实现载入模型

加载器

‌Three.js‌提供了多种加载器，这些加载器可以帮助开发者加载不同类型的3D资源。以下是一些常用的Three.js加载器：

‌TextureLoader‌：用于加载图片，可以返回一个纹理对象Texture。通过TextureLoader的.load()方法加载一张图片，可以创建一个纹理对象，该对象可以用于设置材质的颜色贴图属性，从而实现纹理贴图的应用‌。

‌CubeTextureLoader‌：用于加载立方体纹理，即环境贴图。通过加载6张图片（每个面一张），返回一个立方体纹理对象CubeTexture。这种纹理通常用于模拟真实世界中的环境光照射效果‌。

‌GLTFLoader‌：用于加载glTF格式的3D模型。glTF是一种流行的3D场景和模型格式，被广泛用于现代Web和移动应用中。GLTFLoader支持加载.glb和.gltf格式的文件‌。

‌DRACoLoader‌：用于加载压缩的3D模型数据，特别是针对Draco压缩算法的数据。Draco是一种高效的几何压缩算法，用于减少3D模型的数据大小，同时保持高质量的几何信息‌。

‌FBXLoader‌、‌OBJLoader‌、‌TDSLoader‌、‌ThreeMFLoader‌、‌AMFLoader‌、‌GCodeLoader‌、‌KMZLoader‌、‌PCDLoader‌、‌PLYLoader‌等：这些加载器用于加载不同格式的3D模型文件，如FBX、OBJ、TDS、ThreeMF、AMF、GCode、KMZ、PCD和PLY等。这些加载器提供了对各种3D模型格式的支持，使得开发者能够轻松地将不同的3D模型集成到Three.js项目中‌。

获取模型对应的结构

加载器返回的对象树中存在children字段，包含物体各个结构，可以通过getObjectByName获取到对应结构对象。

核心代码

function onProgress(xhr) {
    if (xhr.lengthComputable) {
        const percentComplete = xhr.loaded / xhr.total * 100;
        console.log(Math.round(percentComplete, 2) + '% downloaded');
    }
}

const loader = new MMDLoader();
const modelFile = '/assets/mmd.pmd';

let mmdMesh;
loader.load(modelFile, function (object) {
    mmdMesh = object;
    scene.add(mmdMesh);

    // 获取头部
    const head = mmdMesh.getObjectByName("首");

    // 创建一个Timeline对象，用于管理动画序列
    const tl = gsap.timeline({ repeat: -1, yoyo: true }); // 设置动画无限循环且往返播放

    // 设置动画从0到1
    tl.to(mmdMesh.morphTargetInfluences, { duration: 1, 8: 1, 15: 1, delay: 1 }); // 针对对象修改属性值。

    // 设置动画从1回到0
    tl.to(mmdMesh.morphTargetInfluences, { duration: 1, 8: 0, 15: 0 }); 

    window.addEventListener("mousemove", (e) => {
        let x = (e.clientX / window.innerWidth) * 2 - 1;
        let y = (e.clientY / window.innerHeight) * 2 - 1;
	// x，y保证在-1至1的区间

        let timeline = gsap.timeline()
        timeline.to(head.rotation, 0.5, {
            duration: 0.5,
            x: y,
            y: x,
            duration: 1
        })
    })
}, onProgress, null);