Three.js基础入门系列（九）--导入3D模型

最新推荐文章于 2025-09-13 21:42:53 发布
原创 最新推荐文章于 2025-09-13 21:42:53 发布 · 1.8w 阅读 · 140 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #3d

本文介绍了如何使用Three.js导入和导出3D模型，包括常用建模工具如3Dmax和SketchUp，3D模型素材网站，Three.js支持的格式，以及详细的导入导出步骤。此外，还探讨了glTF格式及其在Three.js中的应用。

先来学习今天的知识——Three.js导入3D模型

复杂的3D模型（比如制作一个飞机模型）一般都是用第三方建模工具生成，然后加载到Three.js中。

01

常用建模制作工具

3Dmax

链接地址：https://www.autodesk.com.cn/products/3ds-max/overview?referrer=%2Fproducts%2F3ds-max%2Foverview

最常见的3D建模软件，广泛应用于广告、影视、工业设计、建筑设计、三维动画、多媒体制作、游戏、辅助教学以及工程可视化等领域。

SketchUp

链接地址：https://www.sketchup.com/zh-CN

SketchUp是一个极受欢迎并且易于使用的3D设计软件，官方网站将它比喻作电子设计中的“铅笔”。它的主要卖点就是使用简便，人人都可以快速上手。

02

常用3D模型素材网站

ketchupbar

链接地址：https://www.sketchupbar.com/default.php

ske

最低0.47元/天 解锁文章
Three.js引擎开发：Three.js基础入门_（9）.Three.js中的加载器与模型导入
chenlz2007的博客
06-05 1158
Three.js提供了多种加载器，每种加载器都针对特定类型的资源。例如，OBJLoader用于加载OBJ格式的模型，GLTFLoader用于加载GLTF格式的模型，用于加载纹理图像等。了解这些加载器的使用方法，可以大大提高开发效率和资源利用率。在Three.js中，加载器是处理外部资源的重要工具，可以帮助开发者轻松地将3D模型、纹理、动画等集成到场景中。通过理解不同加载器的原理和使用方法，可以有效提升开发效率和资源利用率。此外，模型优化和导入的最佳实践也是确保虚拟现实游戏性能和效果的重要手段。
three.js —— 引入模型
最新发布
weixin_43799793的博客
09-25 619
/ 默认情况下，当我们调用scene.add()的时候，物体将会被添加到(0,0,0)坐标。// './assets/materials/scene.gltf' ,// 模型路径。// 当模型加载完成后，将其添加到场景中。// 让模型绕X轴和Y轴旋转。// 将模型保存到全局变量。// 获取模型动画数据。// 创建基础场景。// 创建动画混合器。// 播放第一个动画。
three.js 载入 3D 模型的方法
w418856的博客
05-09 4186
三维模型的加载器ColladaLoader模型加载器。GLTFLoader模型加载器。OBJLoader模型加载器。FBXLoader模型加载器。
Three.js 入门：创建 3D 场景、模型与动画
2501_93392889的博客
09-13 284
Three.js 是一个基于 WebGL 的 JavaScript 3D 库，用于在浏览器中创建和渲染 3D 场景。其核心由场景（Scene）、相机（Camera）和渲染器（Renderer）构成。通过以上步骤，可以快速构建一个基础的 Three.js 3D 场景并实现动态效果。Three.js 支持多种几何体和外部模型加载。
0基础，手把手。在three.js中导入3D模型
haofeng___的博客
07-08 2170
vue脚手架，引用three.js调用3D模型
Three.js(1)---＞基础篇-导入3d模型
z1783883121的博客
09-18 3870
Three.js基础篇-导入3d模型本篇实现效果：安装/配置基本概念及说明写代码前我们需要了解一些关于three.js的基本概念（当然如果你已经了解了就不用看这段了????）我们这里只粗略的介绍一下更详细的可以查看[官网](https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene)或者是查看[大佬的详细教学文章](https://threejsfundamentals.org/threejs/lessons/zh_
基于threejs加载大型BIM模型的优化尝试
疯狂的蒲公英
07-22 4517
threejs实现BIM模型轻量化的一些优化尝试。八叉对，遮挡剔除，LOD
threejs加载外部三维模型(gltf)
qq_58956810的博客
05-31 2119
本文介绍了使用Three.js加载和处理GLTF格式3D模型的全流程。主要内容包括：1. 建模软件与程序员协作，推荐使用Blender等工具创建复杂模型；2. GLTF格式作为Web3D的标准格式，支持模型层级、材质、动画等丰富数据；3. 详细讲解模型加载流程，包括相机参数设置、颜色偏差解决方案；4. 模型命名管理、递归遍历修改材质等实用技巧；5. 纹理编码与渲染器输出设置的关系；6. 如何更换模型贴图及解决纹理翻转问题。文章通过代码示例演示了从模型导出到网页渲染的完整开发流程，为Web3D开发提供了实用指
【threejs加载器】加载gltf模型及压缩模型
popstarqq的博客
05-29 6848
加载obj过程请参考如下两篇 【threejs基础:使用OBJLoader】加载obj模型 【threejs基础：使用MTLLoader】加载材质OBj模型 1 加载gltf模型 效果如下： 第一步：引入GLTFLoader import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' 第二步：加载模型 加载模型部分代码很简单；创建加载器、设置gltf文件路径、开始加载文件、添加到scene；代码如下 const
ThreeJS加载3D模型
08-09
NULL 博文链接：https://18211103738.iteye.com/blog/2172799
three.js添加3d模型
xi1213的博客
03-03 9948
three官方的几何体也就那么几个，想要生成各种各样的模型，其难度十分之大，这时引入外部模型也不失为一种选择。具体引入办法如下。 初始化场景 this.scene = new THREE.Scene(); //新建场景 let width = window.innerWidth; //窗口宽度 let height = window.innerHeight; //窗口高度 let k = width / height; //窗口宽高比 this.c
Three.js 快速入门教程 01 - 搭建第一个3D场景
最佳编码阿柚的博客
05-14 1849
Three.js 是一个用于创建和展示 3D 图形的 JavaScript 库。它基于 WebGL 技术，可以在现代的 Web 浏览器中实时渲染 3D 图形。它提供了丰富的功能和工具，使开发者能够轻松地创建各种类型的 3D 效果，包括模型加载、纹理映射、光照效果、动画效果等。它还支持用户交互，可以通过鼠标、键盘和触摸等方式进行操作。目前 3D 可视化被广泛应用于多个领域，包括科学研究、医学、工程设计、游戏开发等。
three.js前端使用3D模型引入
08-31
前端使用3D模型引入 import './three.js-master/build/three.js' import './three.js-master/examples/js/loaders/OBJLoader.js' import './three.js-master/examples/js/loaders/MTLLoader.js' import './three.js-master/examples/js/loaders/DDSLoader.js' import './three.js-master/examples/js/controls/OrbitControls.js'
Three.js模型包
06-23
Three.js模型包,包含各种示例使用模型
uniapp微信开发+three.js加载3d模型
07-02
在本文中，我们将深入探讨如何使用uniapp进行微信小程序开发，并结合three.js库来实现3D模型的加载与可视化。uniapp是一个跨平台的应用开发框架，它允许开发者使用一套代码来构建iOS、Android、Web以及各种小程序。...
Three.js 基础入门--第03课：基础功能之 Scene 场景
liuhao9999的博客
04-11 520
场景是我们每个 Three.js 项目里面放置内容的容器，我们也可以拥有多个场景进行切换展示，你可以在场景内放置你的模型、灯光和照相机。还可以通过调整场景的位置，让场景内的所有内容都一起跟着调整位置。
Threejs之加载3D模型（上）
你华还是你华
09-13 3342
Three.js是一个基于WebGL的库，它提供了丰富的API来在网页上创建和显示 3D 图形。加载 3D 模型到Three.js场景中是一个常见的需求，Three.js支持多种格式的 3D 模型，如.obj.fbx等。下面将简要介绍如何使用Three.js加载 3D 模型。
vue3使用three.js引入3D模型文件
m0_56023096的博客
01-16 9804
模糊原因：原因是设备的物理像素分辨率与CSS像素分辨率的比值的问题，我们的canvas绘制出来后图片因为高清屏设备的影响，导致图片变大，然而我们在浏览器的渲染窗口并没有变大，因此图片会挤压缩放使得canvas画布会变得模糊。该值也可以被解释为像素大小的比例：即一个CSS像素的大小相对于一个物理像素的大小的比值。PerspectiveCamera(透视摄像机): 模拟人眼所看到的景象，物体的大小会受远近距离的影响，它是3D场景的渲染中使用得最普遍的投影模式。下载好后，解压，放进项目文件的public目录。
Three.js引入和加载3D 模型
Jimyking的博客
08-13 1596
在Three.js开发中，我们通常会导入各种不同格式的3D模型（GLTF、FBX、OBJ…）本文以vue3项目为例 引入和加载。
three.js three.js入门指南-中文基础教程
01-23
three.js是一款用于创建3D图形的JavaScript库。它提供了丰富的功能和工具，可以在Web上轻松创建复杂的3D场景和动画效果。如果你想学习three.js，可以按照下面的入门指南来开始。 首先，你需要了解一些基本的Web开发知识，比如HTML、CSS和JavaScript。然后，你需要在你的项目中引入three.js库，你可以通过下载源代码或者使用CDN来获取这个库。一旦你引入了库，你就可以开始使用three.js创建3D场景了。 在使用three.js之前，你需要了解一些基本概念，比如场景（Scene）、相机（Camera）、渲染器（Renderer）和几何体（Geometry）。你可以通过在文档和教程中学习这些概念。 一旦你理解了基本概念，你就可以尝试创建一些简单的3D图形和动画效果。你可以尝试创建立方体、球体或者其他基本形状，也可以尝试给它们添加材质和光照效果。通过不断的尝试和实践，你会逐渐掌握three.js的使用方法和技巧。 除了基本形状和物体，你还可以学习如何导入模型和纹理，以及如何添加交互和动画效果。通过持续学习和实践，你可以创建出更加复杂和精美的3D场景和动画效果。 总的来说，学习three.js需要持续的学习和实践。希望这个入门指南可以帮助你快速入门three.js，并在Web上创建出令人惊叹的3D图形和动画效果。
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值