Three.js学习之旅--加载3D模型

今天继续学习Three.js，完成一个小案例，目标：学会导入GLTF（3D模型）

废话不多说，几行代码，现在开始！

初始化环境

新建html文件，并添加相机、场景、轨道控制器、渲染器，这个不会添加的，可以看看我前面的文章，很简单的。

往期回顾

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例-小火车</title>
    <script type="importmap">
        {
            "imports":{
                "three":"./node_modules/three/build/three.module.js",
                "three/addons/":"./node_modules/three/examples/jsm/"
            }
        }
    </script>
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

    <script type="module">
        import * as THREE from 'three';
        // 引入轨道控制器
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
        import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';


        // 创建场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xbfe3dd);



        // 相机
        const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100);
        // 相机位置  
        camera.position.set(5, 2, 8);


        // 创建渲染器  
        const renderer = new THREE.WebGLRenderer({ antialias: true });  //抗锯齿
        // 设置渲染画布大小
        renderer.setSize(window.innerWidth, window.innerHeight);
        // 将渲染画布插入到body中
        document.body.appendChild(renderer.domElement); //renderer.domElement为渲染画布元素

        // 创建轨道控制器
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.target.set(0, 0.5, 0);
        controls.update();
        // 添加阻尼效果（惯性）
        controls.enableDamping = true;


        // 渲染
        function animate() {
            renderer.render(scene, camera);
            controls.update();

            requestAnimationFrame(animate)
        }

        animate();

    </script>

</body>

</html>

添加3D模型

const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('./node_modules/three/examples/jsm/libs/draco/')
loader.setDRACOLoader(dracoLoader)
loader.load('./static/img/LittlestTokyo.glb', function (gltf) {
    const model = gltf.scene;
    model.position.set(1, 1, 0);
    model.scale.set(0.01, 0.01, 0.01);
    scene.add(model);
    animate();
});

此时的效果：

为什么会是一坨黑色的呢，因为我们没有给场景加上光源，就像是日常没有太阳，我们加上一个环境光：

//创建光源
// 环境光
const light = new THREE.AmbientLight(0xffffff);
scene.add(light);

此时，这个3D模型已经可以被看见了：

使用 AnimationMixer动画混合器

使用 AnimationMixer动画混合器，让3D模型的小火车动起来，这里小火车运动，是模型上已经有的，所以说three.js很大部分，还是要靠建模的！建模太耗费精力，还是让专业的建模师去做吧。

model是3D模型，gltf.animations[0]是模型的组件（小火车），每个模型都可以由很多的组件。

let mixer;
const clock = new THREE.Clock();


loader.load('./static/img/LittlestTokyo.glb', function (gltf) {
    ...
    mixer = new THREE.AnimationMixer(model);
    mixer.clipAction(gltf.animations[0]).play();
    ...
});


// 渲染
function animate() {
    ... 
    const delta = clock.getDelta();
    mixer.update(delta);
    ...
    
}

效果：

其实除了场景、相机外，也就几行代码。

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例-小火车</title>
    <script type="importmap">
        {
            "imports":{
                "three":"./node_modules/three/build/three.module.js",
                "three/addons/":"./node_modules/three/examples/jsm/"
            }
        }
    </script>
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

    <script type="module">
        import * as THREE from 'three';
        // 引入轨道控制器
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
        import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';


        // 创建场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xbfe3dd);


        //创建光源
        // 环境光
        const light = new THREE.AmbientLight(0xffffff);
        scene.add(light);

        // 相机
        const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100);
        // 相机位置  
        camera.position.set(5, 2, 8);


        // 创建渲染器  
        const renderer = new THREE.WebGLRenderer({ antialias: true });  //抗锯齿
        // 设置渲染画布大小
        renderer.setSize(window.innerWidth, window.innerHeight);
        // 将渲染画布插入到body中
        document.body.appendChild(renderer.domElement); //renderer.domElement为渲染画布元素

        // 创建轨道控制器
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.target.set(0, 0.5, 0);
        controls.update();
        // 添加阻尼效果（惯性）
        controls.enableDamping = true;


        // GLTFLoader 加载GLB模型
        const loader = new GLTFLoader();
        const dracoLoader = new DRACOLoader()
        dracoLoader.setDecoderPath('./node_modules/three/examples/jsm/libs/draco/')
        loader.setDRACOLoader(dracoLoader)
        loader.load('./static/img/LittlestTokyo.glb', function (gltf) {
            const model = gltf.scene;
            model.position.set(1, 1, 0);
            model.scale.set(0.01, 0.01, 0.01);
            scene.add(model);
            mixer = new THREE.AnimationMixer(model);
            mixer.clipAction(gltf.animations[0]).play();
            animate();
        });

        // 让小火车动起来
        let mixer;

        const clock = new THREE.Clock();


        // 渲染
        function animate() {
            renderer.render(scene, camera);
            controls.update();

            const delta = clock.getDelta();
            mixer.update(delta);
            
            requestAnimationFrame(animate)
        }

        // animate();

    </script>

</body>

</html>