Three.js加载glTF文件

2,967 阅读1分钟

1.下载glTF文件

可以从sketchfab上下载模型,例如我下载了下面这个模型。

2.three.js加载glTF文件的代码

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

<head>
    <title>three.js加载glTF模型</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <script type="module">
        import * as THREE from './three.js/build/three.module.js';
        import { OrbitControls } from './three.js/examples/jsm/controls/OrbitControls.js';
        import { GLTFLoader } from './three.js/examples/jsm/loaders/GLTFLoader.js';
        let camera, scene, renderer;

        init();
        render();

        function init() {
            const container = document.createElement('div');
            document.body.appendChild(container);
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.2, 500);
            scene = new THREE.Scene();
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            container.appendChild(renderer.domElement);
            render();
            const loader = new GLTFLoader().setPath('models/girl/');
            loader.load('scene.gltf', function (gltf) {
                // 设置模型缩放比例
                gltf.scene.scale.set(0.01, 0.01, 0.01);
                // 相对X轴旋转弧度(为了让模型加载为合适的姿势)
                gltf.scene.rotation.x = -0.5 * Math.PI;
                gltf.scene.position.z = 0.8;
                scene.add(gltf.scene);
                render();
            });
            const controls = new OrbitControls(camera, renderer.domElement);
            controls.addEventListener('change', render);
            controls.minDistance = 2;
            controls.maxDistance = 10;
            controls.target.set(0, 0, 0);
            controls.update();
        }

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

    </script>

</body>

</html>

3.效果