Three.js 渲染glb，gltf模型（保姆级教程）

1.准备工作

将下列文件在three.js的包中找到，注意的是我这里使用的是模块化版本的，这里不知道模块化的，可以先去看一下es6的模块化。

控制器： OrbitControls.js

加载器：GLTFLoader.js

材质： RoomEnvironment.js 和 MeshoptDecoder.js

模型文件：我这里用的是glb（最后面有源码链接）

将上面的文件准备好后就可以开始进行下一步了

2.开始开发

1.在body中新建一个div用来承载three.js创建canvas标签

2.把准备好的文件引入，注意script标签加上type=module

部分代码在这，完成源码在下面，这里方便理解

<body>
    <div id="WebGL-output"></div>
</body>

<script type="module">
    import *as THREE from "./js/three.module.js";
    import { OrbitControls } from './js/OrbitControls.js';
    import { GLTFLoader } from './js/GLTFLoader.js'
    import { RoomEnvironment } from './js/RoomEnvironment.js';
    import { MeshoptDecoder } from './js/meshopt_decoder.module.js'
</script>

到这里准备工作才正式完成

注意：引用文件中有些事依赖于three.module.js这个文件夹的，需要去源码当中把路径修改，这里举例一个

2.初始化场景，相机，控制器

 let scene, camera, renderer, control

    function init() {
        // 场景，相机
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xbbbbbb);
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
        camera.position.set(20, 100, 170);

        // 渲染器
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 地表格
        const grid = new THREE.GridHelper(500, 100, 0xffffff, 0xffffff);
        grid.material.opacity = 0.5;
        grid.material.depthWrite = false;
        grid.material.transparent = true;
        scene.add(grid);

        // 材质
        const environment = new RoomEnvironment();
        const pmremGenerator = new THREE.PMREMGenerator(renderer);
        scene.environment = pmremGenerator.fromScene(environment).texture;


        // 控制器
        let control = new OrbitControls(camera, renderer.domElement);

        const axesHelper = new THREE.AxesHelper(14);
        scene.add(axesHelper);

        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        };

        animate();
    }
    init()

完成这一步时，你可以看到下面的内容，证明你的场景渲染出来了

接下来就是渲染glb模型了

 function loader() {
        const loader = new GLTFLoader().setPath('./model/');
        loader.load('renWu.glb', function (gltf) {
            gltf.scene.position.set(0,0,2)
            scene.add(gltf.scene);
            renderer.render(scene, camera);
        });
    }

load() // 调用函数渲染

此时就可以把glb文件简单的渲染出来了，我的glb文件有问题，所以渲染出来模型比较小