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

最新推荐文章于 2024-05-14 22:29:05 发布
最新推荐文章于 2024-05-14 22:29:05 发布
阅读量1.7w 收藏 141
点赞数 11
分类专栏： 前端 互联网 文章标签： javascript 前端 3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JACK_SUJAVA/article/details/123740075
版权
本文介绍了如何使用Three.js导入和导出3D模型，包括常用建模工具如3Dmax和SketchUp，3D模型素材网站，Three.js支持的格式，以及详细的导入导出步骤。此外，还探讨了glTF格式及其在Three.js中的应用。
摘要由CSDN通过智能技术生成

先来学习今天的知识——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

sketchfab

最低0.47元/天 解锁文章
骨灰级收藏家
关注
  • 11
    点赞
  • 踩
  • 141
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
【three.js】如何加载外部gltf模型
qq_38196449的博客
06-16 182
你在three.js官方文件的**examples/jsm/loaders/**目录下，可以找到一个文件，这个文件就是three.js的一个扩展库，专门用来加载gltf格式模型加载器。
threejs加载obj文件
09-25
threejs加载obj文件，附件主要实现了threejs对obj文件的加载，及使用相机及光的一些调节，希望能给大家带来帮助，下载后直接运行即可看到效果。
Three.JS+原生JS+jQuery实现3D机房
10-09
使用ThreeJS实现的3D机房效果，包含简单的设备增删改查功能、设备告警功能、机柜拖动调整位置功能等
可视化—“颠覆传统设计：用Three.js创造炫酷的3D交互界面！“
2401_82881178的博客
04-24 1099
Three.js是一个开源的JavaScript库，它基于WebGL技术，可以在网页上创建逼真的3D场景和交互式界面。Three.js提供了丰富的API和工具，可以让开发者轻松地创建3D模型、动画、光影、材质等效果，并且可以与其他JavaScript库和框架进行无缝集成，如jQuery、React等。通过使用Three.js，我们可以轻松地创建炫酷的3D可视化交互界面，从而为用户带来更加沉浸式的体验。但是，Three.js也存在一些缺点，例如对于低端设备的兼容性不够好，需要考虑到用户的设备环境和性能要求。
0基础，手把手。在three.js中导入3D模型
haofeng___的博客
07-08 1565
vue脚手架，引用three.js调用3D模型
Three.js 快速入门教程 01 - 搭建第一个3D场景
最新发布
最佳编码阿柚的博客
05-14 1069
Three.js 是一个用于创建和展示 3D 图形的 JavaScript 库。它基于 WebGL 技术，可以在现代的 Web 浏览器中实时渲染 3D 图形。它提供了丰富的功能和工具，使开发者能够轻松地创建各种类型的 3D 效果，包括模型加载、纹理映射、光照效果、动画效果等。它还支持用户交互，可以通过鼠标、键盘和触摸等方式进行操作。目前 3D 可视化被广泛应用于多个领域，包括科学研究、医学、工程设计、游戏开发等。
Three.js基础入门介绍——Three.js学习四【模型导入】
I_loveCong的博客
12-26 2295
加载器（GLTFLoader）为例进行模型导入操作，模型使用的是官方示例中的Soldier模型，文件位置：three.js-master\examples\models\gltf\Soldier.glb。通过建模工具或者模型素材网站获取，学习用的话官网的模型也是可以使用的，在官方示例文件夹中有很多模型文件目录：three.js-master\examples\models。通过Three.js的材质和几何体，我们可以很方便的创建基础3D模型，但涉及到复杂模型时，一般是由专业建模工具。
ThreeJs 学习之旅(十七)—Imported models(导入模型)
Florenza的博客
05-24 1253
初始代码: import './style.css' import * as THREE from 'three' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' import * as dat from 'dat.gui' import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader' import { DRACOLoad...
three.js添加3d模型
xi1213的博客
03-03 9151
three官方的几何体也就那么几个，想要生成各种各样的模型，其难度十分之大，这时引入外部模型也不失为一种选择。具体引入办法如下。 初始化场景 this.scene = new THREE.Scene(); //新建场景 let width = window.innerWidth; //窗口宽度 let height = window.innerHeight; //窗口高度 let k = width / height; //窗口宽高比 this.c
ThreeJS-VUE-3DMax 实现Web3D（简单测试）
m0_53707852的博客
11-30 2398
使用threejs在页面实现一个简单的3D交互效果。
threeJS 载入3D模型(gltf/glb)
weixin_55541470的博客
12-08 762
加载本地3D模型 完成3D模型渲染。引入GLTFLoader。
Three.js 单模型，组合模型加载
qq_45853174的博客
11-24 1779
three.js 基础模型加载可查看 https://threejs.org/ 上面涵盖各种模型的加载器及加载方式，在此不再赘述。本文主要介绍如何使用vue配合three.js 库实现各种格式3d 模型文件的加载，组合式模型文件的加载，以及如何去更新相机的设置，调整模型的大小缩放去达到最适合观察的角度与大小。既然选择了远方，便只顾风雨兼程。
uniapp微信开发+three.js加载3d模型
07-02
在本文中，我们将深入探讨如何使用uniapp进行微信小程序开发，并结合three.js库来实现3D模型的加载与可视化。uniapp是一个跨平台的应用开发框架，它允许开发者使用一套代码来构建iOS、Android、Web以及各种小程序。...
three-js-教程源代码.zip
07-14
Three.js支持加载3D模型（如OBJ、GLTF格式）、纹理图片和音频文件等。Loader类如OBJLoader、GLTFLoader等可以方便地导入外部资源，丰富你的3D场景。 8. **粒子系统** 粒子系统用于创建如烟雾、火花、雨滴等效果。...
three.js基础入门案例代码.zip
04-19
**three.js基础入门案例代码.zip** 是一个包含使用JavaScript编写的three.js库的入门实例的压缩包。three.js是一款强大的WebGL库，用于在浏览器中创建3D图形。本文件包旨在帮助初学者理解并实践如何使用three.js进行...
WebGL 可视化3D绘图框架：Three.js 零基础上手实战.rar
06-13
5. **加载外部模型**：如何导入和展示.obj、.gltf等格式的3D模型。 6. **交互性**：使用Raycaster检测鼠标或触摸事件，实现与3D对象的交互。 7. **性能优化**：了解如何减少渲染开销，提高大型3D场景的性能。 8. **...
three.js的室内地图展示
05-21
2. **three.js入门**：three.js是WebGL的上层封装库，提供了一套完整的3D对象和场景管理机制，简化了3D图形编程。了解其基本结构，如Scene（场景）、Camera（相机）、Light（灯光）、Mesh（网格）和Geometry（几何体...
ThreeJs控制模型的隐藏与显示
Baker的博客
08-15 761
之前有见过在一个场景中绘制一个正方体，这节讲如何对正方体实现隐藏和显示，其实是threejs提供的visible的属性，可以控制模型材质和模型本身的隐藏与现实，这在很多应用场景中都会用到，这里通过添加一个按钮，每次点击按钮实现隐藏与显示的切换，不过要注意的是，加了操作之后就要用requestAnimationFrame方法...
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 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
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值