Three.js 快速入门教程【十二】外部模型加载（ gltf、glb、fbx、obj等格式模型）

已于 2025-03-26 16:51:49 修改
阅读量1.3k 收藏 15
点赞数 30
分类专栏： Three.js 文章标签： javascript 3d 前端
于 2025-02-28 16:59:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sd1sd2/article/details/145929010
版权

请添加图片描述

系列文章目录

Three.js 快速入门教程【一】开启你的 3D Web 开发之旅
Three.js 快速入门教程【二】透视投影相机
Three.js 快速入门教程【三】渲染器
Three.js 快速入门教程【四】三维坐标系
Three.js 快速入门教程【五】动画渲染循环
Three.js 快速入门教程【六】相机控件 OrbitControls
Three.js 快速入门教程【七】常见几何体类型
Three.js 快速入门教程【八】常见材质类型
Three.js 快速入门教程【九】光源类型
Three.js 快速入门教程【十】常见的纹理类型
Three.js 快速入门教程【十一】天空盒的多种实现方式
Three.js 快速入门教程【十二】外部模型加载
Three.js 快速入门教程【十三】外部模型加载后常见的处理操作
Three.js 快速入门教程【十四】使用Stats.js监控渲染帧率和性能优化
Three.js 快速入门教程【十五】交互神器DragControls使用详解，实现对物体或模型拖拽
Three.js 快速入门教程【十六】调试神器 gui.js使用详解，可视化面板控制场景参数提高开发效率

文章目录

一、前言

      在使用 Three.js 进行 3D 场景开发时，加载外部模型是一项非常常见且重要的操作。通过加载外部模型，我们可以快速丰富场景内容，实现更加复杂和逼真的 3D 效果。本教程将详细介绍如何在 Three.js 中加载常见的 3D 模型格式。

二、常见的模型格式

Three.js支持多种3D模型格式，推荐使用以下格式：

  • GlTF（.glb/.gltf）：专为Web设计的开放格式（推荐首选）

  • FBX：Autodesk通用格式

  • OBJ+MTL：简单几何体格式

二、基础加载流程

以glb格式为例，先了解下加载流程核心代码

//导入gltf加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

// 初始化场景基础环境（场景/相机/渲染器）
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });

// 创建加载器实例
const loader = new GLTFLoader();

// 异步加载模型
loader.load(
  'models/demo.glb',//模型路径，脚手架项目可放置public目录
  (gltf) => {
    const model = gltf.scene;
    
    // 调整模型参数
    model.position.set(0, -1, 0);
    model.scale.set(0.5, 0.5, 0.5);
    
    scene.add(model);
  },
  (xhr) => {
    console.log(`已加载 ${(xhr.loaded / xhr.total * 100)}%`);
  },
  (error) => {
    console.error('加载失败:', error);
  }
);

从上述代码可以看出，模型加载需要通过特定的加载器进行加载解析，如gltf格式的模型需要GLTFLoader加载器，加载成功获取到模型对象调整位置、大小等属性添加到场景中即可。

（1）加载器选择

根据模型格式选择对应的加载器：

  • GLTFLoader：处理glTF/glb格式（Web首选格式）

  • FBXLoader：加载Autodesk FBX文件

  • OBJLoader+MTLLoader：配合处理带材质的OBJ模型

（2）异步加载过程

通过loader.load()方法实现异步加载，该方法接收三个核心回调函数：

  • 模型文件URL：建议使用相对路径（例如assets/models/character.glb）

  • 加载完成回调：接收解析后的模型数据（gltf.scene为根对象）

  • 进度监控回调：通过xhr对象获取加载百分比

  • 错误处理回调：捕获网络请求或文件解析异常

（3）模型调整

获取模型后通常需要基础适配操作，可根据实际需要操作：

model.position.set(0, 0, 0);  // 设置初始位置
model.scale.set(0.5, 0.5, 0.5); // 缩放至合适尺寸
model.rotation.y = Math.PI/2; // 绕Y轴旋转90度
scene.add(model); // 将模型加入场景

三、完整示例代码

1、GlTF（.glb/.gltf）格式

import * as THREE from "three";
//引入相机控制器
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

// 创建场景
const scene = new THREE.Scene();
//坐标辅助线
const axesHelper = new THREE.AxesHelper(500);
scene.add(axesHelper);

// 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  3000
);
camera.position.set(0,5,10)

// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLight);

//添加平行光
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(-5, 2, 20);
scene.add(light);

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

// 创建加载器实例
const loader = new GLTFLoader();

// 异步加载模型
loader.load(
  "models/pz.gltf",
  (gltf) => {
    const model = gltf.scene;
    // 调整模型参数
    model.position.set(0, 0, 0);
    //相机看向模型
    camera.lookAt(model);
    scene.add(model);
  },
  (xhr) => {
    console.log(`已加载 ${(xhr.loaded / xhr.total) * 100}%`);
  },
  (error) => {
    console.error("加载失败:", error);
  }
);

// 创建 OrbitControls 控件
const controls = new OrbitControls(camera, renderer.domElement);
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}

animate();

运行效果：
请添加图片描述

2、FBX格式

import * as THREE from "three";
//引入相机控制器
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";

// 创建场景
const scene = new THREE.Scene();
//坐标辅助线
const axesHelper = new THREE.AxesHelper(500);
scene.add(axesHelper);

// 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  3000
);
camera.position.set(0, 5, 10);

// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLight);

//添加平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 5);
directionalLight.position.set(-5, 2, 20);
scene.add(directionalLight);

const directionalLight2 = new THREE.DirectionalLight(0xffffff, 5);
directionalLight.position.set(5, -2, -20);
scene.add(directionalLight2);

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

// 创建加载器
const fbxLoader = new FBXLoader();

// 异步加载模型
fbxLoader.load(
  "su7/Xiaomi_SU7.FBX",
  (fbx) => {
    const model = fbx;
    // 调整模型参数
    model.position.set(0, 0, 0);
    model.scale.set(0.01, 0.01, 0.01);
    //相机看向模型
    camera.lookAt(model);
    scene.add(model);
  },
  (xhr) => {
    console.log(`已加载 ${(xhr.loaded / xhr.total) * 100}%`);
  },
  (error) => {
    console.error("加载失败:", error);
  }
);

// 创建 OrbitControls 控件
const controls = new OrbitControls(camera, renderer.domElement);
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}

animate();

运行效果：

请添加图片描述

3、OBJ+MTL格式

import * as THREE from "three";
//引入相机控制器
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";

// 创建场景
const scene = new THREE.Scene();
//坐标辅助线
const axesHelper = new THREE.AxesHelper(500);
scene.add(axesHelper);

// 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  3000
);
camera.position.set(0, 5, 10);

// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLight);

//添加平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 5);
directionalLight.position.set(-5, 2, 20);
scene.add(directionalLight);

const directionalLight2 = new THREE.DirectionalLight(0xffffff, 5);
directionalLight.position.set(5, -2, -20);
scene.add(directionalLight2);

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

// 创建OBJ加载器
const objLoader = new OBJLoader();
const mtlLoader = new MTLLoader();

mtlLoader.load("obj/ld.mtl", (materials) => {
  materials.preload();
  // 异步加载模型
  objLoader.setMaterials(materials).load(
    "obj/ld.obj",![请添加图片描述](https://i-blog.csdnimg.cn/direct/6c31dc7371c94ed6895300dfa0e0d61d.gif)

    (obj) => {
      const model = obj;
      // 调整模型参数
      model.position.set(0, 0, 0);
      model.scale.set(0.5, 0.5, 0.5);
      //相机看向模型
      camera.lookAt(model);
      scene.add(model);
    },
    (xhr) => {
      console.log(`已加载 ${(xhr.loaded / xhr.total) * 100}%`);
    },
    (error) => {
      console.error("加载失败:", error);
    }
  );
});

// 创建 OrbitControls 控件
const controls = new OrbitControls(camera, renderer.domElement);
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}

animate();

运行效果：
请添加图片描述

四、免费模型资源下载

免费的模型资源下载测试可以访问Poly Haven网站，该网站不仅有免费纹理资源还有3d模型和全景图片提供下载调试

五、总结

       通过本篇教程，我们了解了加载外部模型的基本流程以及学会不同格式模型文件的加载方法。模型加载是3D可视化开发的基础技能，但也仅仅是起点，还有诸如模型动画、物理效果和着色器改造更多开发技能等着你学习，在实践中掌握技巧，让你的3D场景更具生命力。

更多three.js入门知识点请关注该系列教程后续的更新。

Vue集成three.js，并加载glb、gltf、FBX、json模型
m0_51431448的博客
05-25 1万+
最近刚开始做的一个项目，后面有个模块要通过three.js实现3D的场景，因为之前也没接触过3D这块，就提前学了一下，做个记录。当然这是一个开始 先上几个网址 ThreeJS官方：http://www.thingjs.com/guide/city2/ ThreeJS在线开发：https://www.thingjs.com/guide/?m=sample&source=baidu&plan=ThingJSjishuci&unit=threejs&keyword=thre.
深入理解 Three.js 加载器：如何导入外部模型（GLTF、OBJ、FBX）
mmc123125的博客
01-16 3915
Three.js 支持多种模型格式，常用的有： GLTF/GLB：现代化、高效的 3D 模型格式，支持材质、动画和压缩。推荐优先使用。 OBJ：老牌的 3D 模型格式，只包含几何信息，需搭配 MTL 文件加载材质。 FBX：常用于动画和复杂模型，但文件体积通常较大。 加载这些模型需要使用对应的加载器，如 GLTFLoader、OBJLoader 和 FBXLoader。
threejs 加载 FBX 模型
w710537643的博客
06-25 2561
加载FBX格式的模型无法自动加载模型自带的贴图（贴图和模型是一个文件，又分开的形式）使用LoadingManager TGALoader 加载贴图。原因 Mesh children中。js 版本 148.0。第一次加载出来没有模型。
在 Vue 中使用 Three.js 引入模型格式（.fbx、.glb ）小白必看
最新发布
前端开发探索之旅
03-12 1376
通过以上步骤，我们成功在 Vue 项目中使用 Three.js 引入了不同格式的 3D 模型。在实际开发中，你可以根据需要调整模型的位置、大小和姿态，还可以添加更多的交互效果和动画，以实现更加丰富的 3D 场景展示。希望本文能对你在 Vue 项目中使用 Three.js 加载 3D 模型有所帮助。
threejs加载.Fbx .OBJ 3D模型文件
大角牛的博客
02-09 9845
threejs加载.Fbx .OBJ 3D模型文件 文件下载与启动 在threejs官网下载threejs的文件,可以选择直接下载，也可以跳转到GitHub拉取 拉取下来的完整文件就是这个样子 拉取成功后我们在本地安装启动服务，这样就能很快速的查看threejs的各种例子了 npm i -g http-server http-server 可以先看看官网里的例子，你想要的东西官方里面都有 开始开发 后期在开发的时候需要用到build和jsm文件，我们可以单独放进demo里这样比较方便我们使用 下面我
three.js在Vue项目中加载fbx模型文件
tjpjwy2012的博客
08-26 1222
/引入Threejs。// 添加坐标系到场景中。// 设置输出canvas画面的大小。// 定位相机，并且指向场景中心。// 给地面物体上色。//3d文件路径要放在public文件夹下。// 设置渲染器的初始颜色。/// 显示三维坐标系。// 创建地面的几何体。
three.js 加载fbx文件并解析
yinge0508的博客
03-08 8344
效果： stl、obj都是静态模型，不可以包含动画，fbx除了包含几何、材质信息，可以存储骨骼动画等数据。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid.
THREEJS实战6_加载fbx模型
热门推荐
编程知识分享，主打前端
04-19 4万+
加载fbx模型原理 3D模型 模型由面构成，面包括三角形、四边形与多边形，轻量级的优秀模型面数一般都是三角形，面又由多条边构成，边由多个顶点构成。 这里我做了一个简单模型 烘培导出fbx模式 ok，没问题！ threejs加载fbx原理 顶点数据 顶点位置 顶点颜色 顶点法向量数据 geometry.attributes position color normal 顶点法向量与...
Vue使用Three.js加载glTF模型的方法详解
10-15
Vue结合Three.js加载glTF模型的方法详解主要介绍的是如何在Vue项目中使用Three.js这个三维图形库加载glTF格式的模型。Three.js是一个JavaScript库，它简化了WebGL的使用，使得开发者可以更容易地在网页中创建和展示...
基于高德地图 JS API2.0 加载GLTF3D模型的demo（配合three.js）.zip
05-18
在本项目中，我们主要探讨如何使用高德地图JavaScript API 2.0版本与three.js库结合，来加载和展示3D GLTF模型。高德地图API提供了丰富的地图交互功能，而three.js是一个广泛使用的JavaScript 3D库，用于在Web浏览器...
ThreeJS加载glb模型实用案例
01-26
本篇文章将深入探讨如何使用Three.js加载glTF（GL Transmission Format）格式的3D模型，特别是一个名为"gltfForRock2022.1.24"的glTF模型文件。 首先，理解glTF是什么至关重要。glTF是一种开放标准的3D模型格式，...
three.js教程
11-23
three.js的官方入门教程，全套教程及很多实例，对学习three.js有很大帮助
threejs加载obj文件
09-25
threejs加载obj文件，附件主要实现了threejs对obj文件的加载，及使用相机及光的一些调节，希望能给大家带来帮助，下载后直接运行即可看到效果。
three.js学习教程
11-21
three.js的入门初级教程 帮助零基础学习three.js 适合新人
Three.js fbx文件导入 源码
04-26
Three.js fbx文件导入源码实例。 博客查看，https://blog.csdn.net/qq_34206863/article/details/79486518
Three.js初级教程，JavaScript 3D页面
09-28
什么是threejs，很简单，你将它理解成three + js就可以了。three表示3D的意思，js表示javascript的意思。那么合起来，three.js就是使用javascript 来写3D程序的意思。
Three.js加载FBX并解析骨骼动画
u014291990的博客
12-03 1万+
加载FBX并解析骨骼动画 本文是Three.js电子书的14.4节 通过Threejs先加载一个.FBX格式的三维模型文件，然后解析该文件中的骨骼动画信息。 加载器FBXLoader.js 引入FBX加载器相关文件 <!-- 引入fbx模型加载库FBXLoader --> <script src="http://www.yanhuangxueyuan.com/versions/...
threeJS导入FBX模型
大白兔奶糖的博客
10-31 1700
three
Three.js 教程
qq_46610638的博客
03-21 3115
了解Three.js Threejs是一款WebGL三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。 如何学习Three.js 当你开始思考你应该如何学习WebGL和Three.js的时候，相信你至少对相关的关键词了解过了，希望通过WebGL或Three.js实现你想要的Web3D功能。 也许你也会去思考通过WebGL或Three.js能不能实现你想要的功能，也许你是因为领导临时分配任务，还不太清楚WebGL和Three.js是什么，个人建议是不要做过多思考，先看看
vue three.js加载3d模型glb/gltf
03-13
Vue.js是一个流行的JavaScript框架，用于构建用户界面。而Three.js是一个用于创建和显示3D图形的JavaScript库。在Vue.js中使用Three.js加载3D模型（glb/gltf）可以通过以下步骤实现： 1. 首先，确保你已经在Vue.js项目中安装了Three.js库。你可以通过npm或者直接引入CDN来安装。 2. 在Vue组件中，你可以使用`mounted`生命周期钩子函数来初始化Three.js场景和渲染器。在这个函数中，你可以创建一个场景、相机和渲染器，并将渲染器的输出添加到DOM元素中。 3. 接下来，你需要加载3D模型文件（glb/gltf）。你可以使用Three.js提供的`GLTFLoader`来加载模型文件。首先，你需要在Vue组件中引入`GLTFLoader`： ```javascript import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; ``` 4. 然后，在`mounted`函数中，创建一个`GLTFLoader`实例，并使用`load`方法加载模型文件。加载完成后，你可以在回调函数中获取到模型对象。 ```javascript const loader = new GLTFLoader(); loader.load('path/to/model.glb', (gltf) => { const model = gltf.scene; // 在这里对模型进行操作或者添加到场景中 }); ``` 5. 最后，你可以在回调函数中对加载的模型进行操作，比如设置位置、旋转等，或者将模型添加到场景中进行显示。 这就是使用Vue.js和Three.js加载3D模型（glb/gltf）的基本步骤。希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pixle0

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值