three.js加载三维GLB文件查看三维模型图文详解

更新时间：2025年12月08日 09:20:08 作者：天一生水water

在三维可视化领域,Three.js是一个非常流行的JavaScript库,它允许开发者在Web浏览器中创建和展示复杂的3D模型,这篇文章主要介绍了three.js加载三维GLB文件查看三维模型,需要的朋友可以参考下

在fast3d生成一个三维模型的GLB文件

使用HTML + Three.js实现，用于加载和显示GLB格式的3D模型文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>加载GLB 3D模型</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
        #info {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            background: rgba(0,0,0,0.5);
            padding: 10px;
            font-family: Arial, sans-serif;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div id="info">正在加载模型... 请等待</div>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
    <!-- 新增环境贴图加载器 -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/TextureLoader.js"></script>
    
    <script>
        // 初始化场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xf0f0f0);
        
        // 创建相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;
        
        // 创建渲染器并启用gamma校正（关键：确保材质颜色正确显示）
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.gammaOutput = true; // 启用gamma输出
        renderer.gammaFactor = 2.2;  // 设置gamma因子
        document.body.appendChild(renderer.domElement);
        
        // 增强光照系统（关键：确保材质细节可见）
        // 环境光 - 提供基础照明，避免完全黑暗区域
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.8); // 提高强度到0.8
        scene.add(ambientLight);
        
        // 主方向光 - 提供主要照明和阴影
        const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1.2); // 提高强度
        directionalLight1.position.set(5, 5, 5); // 调整位置，增加角度
        directionalLight1.castShadow = true; // 启用阴影（如果模型需要）
        scene.add(directionalLight1);
        
        // 辅助方向光 - 减少阴影过暗
        const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
        directionalLight2.position.set(-5, 3, -2); // 从另一侧照明
        scene.add(directionalLight2);
        
        // 添加环境贴图（关键：增强材质反射效果）
        const textureLoader = new THREE.TextureLoader();
        // 使用简单的环境贴图（可替换为更复杂的HDR贴图）
        textureLoader.load('https://threejs.org/examples/textures/equirectangular/skybox.jpg', (texture) => {
            texture.mapping = THREE.EquirectangularReflectionMapping;
            scene.environment = texture; // 设置场景环境贴图
            scene.background = texture;  // 可选：用环境贴图作为背景
        });
        
        // 添加轨道控制
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05; // 增加阻尼感，操作更平滑
        
        // 加载GLB模型
        const loader = new THREE.GLTFLoader();
        const modelPath = 'well.glb'; // 请确保模型路径正确
        
        loader.load(
            modelPath,
            function (gltf) {
                document.getElementById('info').style.display = 'none';
                const model = gltf.scene;
                scene.add(model);
                
                // 模型处理
                const box = new THREE.Box3().setFromObject(model);
                const size = box.getSize(new THREE.Vector3());
                const center = box.getCenter(new THREE.Vector3());
                
                // 自动缩放和居中模型
                const maxDim = Math.max(size.x, size.y, size.z);
                const fov = camera.fov * (Math.PI / 180);
                let cameraZ = Math.abs(maxDim / 2 / Math.tan(fov / 2));
                cameraZ *= 1.5; // 增加一点距离
                camera.position.z = cameraZ;
                
                // 居中模型
                model.position.x = -center.x;
                model.position.y = -center.y;
                model.position.z = -center.z;
                
                // 确保材质正确应用环境贴图
                model.traverse((child) => {
                    if (child.isMesh) {
                        child.material.envMap = scene.environment; // 应用环境贴图
                        child.material.needsUpdate = true; // 强制材质更新
                        child.castShadow = true; // 启用阴影投射
                        child.receiveShadow = true; // 启用阴影接收
                    }
                });
                
                // 更新控制器目标
                controls.target.set(center.x, center.y, center.z);
                controls.update();
            },
            function (xhr) {
                const percentage = (xhr.loaded / xhr.total * 100).toFixed(0);
                document.getElementById('info').textContent = `加载中 ${percentage}%`;
            },
            function (error) {
                console.error('加载模型出错:', error);
                document.getElementById('info').textContent = `加载失败: ${error.message}`;
            }
        );
        
        // 响应窗口大小变化
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
        
        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>

使用说明：

准备GLB文件：
- 将你的GLB模型文件（例如 model.glb）放在HTML文件的同一目录下
- 确保模型文件是有效的GLB格式（glTF的二进制格式）
修改模型路径：
- 在代码中找到 const modelPath = 'model.glb';
- 如果模型在子目录中，修改为 models/model.glb 等路径
关键功能说明：
- 自动缩放模型使其适应视图
- 添加了环境光和方向光使模型可见
- 使用OrbitControls实现鼠标交互（旋转/缩放/平移）
- 显示加载进度和错误提示
- 响应窗口大小变化
常见问题解决：
- 模型不显示：
  - 检查文件路径是否正确
  - 确保文件扩展名是 .glb（不是 .gltf）
  - 检查浏览器控制台是否有加载错误
- 加载缓慢：
  - 大模型可能需要较长时间加载
  - 确保使用压缩的GLB文件（GLB比GLTF小30%）
- 材质问题：
  - 如果模型材质缺失，可能需要使用 GLTFLoader 的 draco 支持（需要额外引入draco解码器）

额外建议：

优化模型：
- 使用 glTF-Sample-Models 中的模型测试
- 用 glTF-Pipeline 优化模型

添加DRACO压缩支持（如果模型很大）：

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/libs/draco/draco_decoder.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/libs/draco/draco_decoder_wasm_wrapper.js"></script>

然后在加载器中添加：

loader.setDRACOLoader(new THREE.DRACOLoader());

测试模型：
- 使用 glTF Viewer 验证模型是否有效

注意：确保在服务器环境下运行（不能直接用file://协议加载，因为浏览器安全限制）。推荐使用本地服务器：

Python: python -m http.server 8000
Node.js: npx serve

这个实现包含完整的错误处理、自动缩放和交互功能，可直接使用。将你的GLB文件放入同一目录后，打开HTML文件即可看到3D模型。

总结

到此这篇关于three.js加载三维GLB文件查看三维模型的文章就介绍到这了,更多相关three.js加载三维GLB文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Select标签下拉列表二级联动级联实例代码
这篇文章主要介绍了Select标签下拉列表二级联动级联实例代码,需要的朋友可以参考下
2014-02-02
JavaScript数组去重由慢到快由繁到简(优化篇)
本文给大家介绍通过indexof去重，hash去重，排序后去重及set去重由慢到快有繁到简的方法给大家介绍了js数组去重的方法，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
2016-08-08
原生js实现键盘控制div移动且解决停顿问题
这篇文章主要给大家介绍了如何利用原生js实现键盘控制div移动，并且解决在移动过程中的停顿问题，文中给出了详细的示例代码，相信对大家的理解和学习很有帮助，下面跟着小编一起来看看吧。
2016-12-12
向fckeditor编辑器插入指定代码的方法
这篇文章主要向大家分享如何在fckeditor编辑器插入代码操作，这里脚本之家小编就为大家分享一下啊
2007-05-05
package.json中homepage属性的作用详解
这篇文章主要介绍了package.json中homepage属性的作用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
悬浮数字的实现案例
本篇文章主要是对悬浮数字的实现案例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
基于JavaScript实现惊艳的打字机效果
这篇文章主要为大家详细介绍了如何使用JavaScript打造惊艳打字机效果,让你的文字生动跃动,感兴趣的小伙伴可以跟随小编一起学习一下
2024-03-03
微信小程序服务器日期格式化问题
一般服务器获取到日期都是中国标准时间，需要对其进行格式化,这篇文章主要介绍了微信小程序服务器日期格式化问题，需要的朋友可以参考下
2020-01-01
JavaScript中的this例题实战总结详析
使用JavaScript开发的时候,很多人多多少少都会被this的指向问题搞蒙圈,下面这篇文章主要给大家介绍了关于JavaScript中this例题实战的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06
JavaScript实现模态框拖拽效果
这篇文章主要介绍了通过JavaScript实现模态框拖拽的效果，以及鼠标松开，可以停止拖动模态框移动等功能，感兴趣的小伙伴可以了解一下
2021-12-12