Three.js基础入门系列(九)--导入3D模型
先来学习今天的知识——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
链接地址:https://sketchfab.com/
03
Three.js支持的3D模型格式
Three.js支持的导出格式
Three.js在线编辑器:https://threejs.org/editor/
Three.js支持的全部格式
https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders
04
在Three.js中导出3D模型步骤
1️⃣ 打开 Three.js在线编辑器
https://threejs.org/editor/
2️⃣ 点击添加按钮,选择将要添加的几何体模型
3️⃣ 设置几何体模型的材质类型和材质颜色
4️⃣ 设置几何体模型的属性(比如:位置、旋转、缩放)
5️⃣ 将3D模型导出(选择导出场景,导出的是一个json格式的文件)
json格式,一般用于Three.js官方的editor导出
05
在Three.js中导入3D模型步骤
1️⃣ 把下载好的json文件放入项目目录中(放入的位置随意)
2️⃣ json文件中的JSON格式指的是Three.js可以将其转换为场景的3D对象的JSON格式模型。这种格式内部一般必有的四项为:
◾ metadata 当前模型的相关信息以及生成的工具信息
◾ geometries 存储当前模型所使用的几何体的数组
◾ materials 存储当前模型所使用的材质的数组
◾ object 当前模型的结构以及标示所应用到的材质和几何体标示
所有的模型网格,几何体和材质都有一个固定的uuid标识符,JSON格式中都是通过uuid作为引用。
3️⃣ 使用ObjectLoader加载JSON模型
既然我们能够导出模型,肯定就可以导入。这里我们将使用到Three.js内置的对象THREE.ObjectLoader来加载模型:
案例截图:
完整代码如下:
注意:只要是通过 loader.load()方法导入,必须要使用VSCode编辑器中的 live-server插件的方式打开页面。
不然会有跨域的问题。
06
glTF格式文件的导出和导入
Three.js官方推荐我们使用的3D模型的格式为glTF,由于glTF专注于传输,因此它的传输和解析的速度都很快。
glTF模型功能包括:网格、材质、纹理、灯光、相机等。
先在VSCode编辑器中安装glTF Tools插件,安装这个插件后我们就能在VSCode编辑器中查看 .gltf的文件效果了
glTF格式的3D格式文件我们可以在sketchfab官网下载,这是一个国外比较知名的模型网站。
sketchfab官网模型下载地址:
https://sketchfab.com/3d-models?date=week&features=downloadable&sort_by=-likeCount
下载其中一个模型,选择gltf格式下载
glTF格式加载器(loader)地址:
https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js
1️⃣ 首先,将GLTFLoader加载器插件引入到页面。
2️⃣ 然后创建一个加载器:
3️⃣ 使用加载器去加载模型,并调节一下模型大小在场景内展示:
注意:以上的scene.gltf文件必须跟3D_gltf在同一个目录中,不能单独把scene.gltf移动到3D_gltf目录的外边。
案例截图:
完整代码如下:
Three.js基础入门系列(九)--导入3D模型相关推荐
- Three.js基础入门系列(一)
01 Three.js前提须知 讲到 Three.js,就需要先说一下 OpenGL 和 WebGL. OpenGL 是一个跨平台的3D/2D的绘图标准(规范),WebGL(Web Graphics ...
- Three.js基础入门系列(三)
01 Three.js 基本要素 思考:我们有了场景.相机.渲染器,除了这些还需要什么,才能展示3D图像? 这张照片就基本可以说明我们 Three.js 的 3D 设计模式:我们有了一个场景之后,我们 ...
- 结构化数据丨Python爬虫基础入门系列(7)
提示:文末有福利!最新Python爬虫资料/学习指南>>戳我直达 文章目录 前言 JSON 1. json.loads() 2. json.dumps() 3. json.dump() 4 ...
- 恭喜本人的《Three.js基础入门》上线达人课!
本人学习Three.js也有一年多了,接触这个库也两年左右,起初根本没有仔细的学习,想做一些绚丽的东西都无法实现.没想到学习一个框架能记这么多的笔记,从系统的学习Three.js到现在,大大小小的笔记 ...
- Civil3D,CAD零基础入门系列1.MgdFbg的下载及安装
Civil3D,CAD零基础入门系列1.MgdFbg的下载及安装 本教程讲述如何下载及配置生成MgdFbg插件的dll,并在CAD中进行使用. .MgdFbg可以在GItHub上进行下载,下载地址为: ...
- 【JAVA零基础入门系列】Day2 Java集成开发环境IDEA
[JAVA零基础入门系列](已完结)导航目录 Day1 开发环境搭建 Day2 Java集成开发环境IDEA Day3 Java基本数据类型 Day4 变量与常量 Day5 Java中的运算符 Day ...
- MyBatis基础入门《九》ResultMap自动匹配
MyBatis基础入门<九>ResultMap自动匹配 描述: Mybatis执行select查询后,使用ResultMap接收查询的数据结果. 实体类:TblClient.java 接口 ...
- 【JAVA零基础入门系列】Day14 Java对象的克隆
[JAVA零基础入门系列](已完结)导航目录 Day1 开发环境搭建 Day2 Java集成开发环境IDEA Day3 Java基本数据类型 Day4 变量与常量 Day5 Java中的运算符 Day ...
- saltstack之基础入门系列文章简介
使用saltstack已有一段时间,最近由于各种原因,特来整理了saltstack基础入门系列文章,已备后续不断查阅(俗话说好记性不如烂笔头),也算是使用此工具的一个总结. saltstack的前六篇 ...
最新文章
- 剑指offer 06.逆向打印链表
- android lottie字体json,lottie-android
- pytorch 之 分开安装 torch 和 torchvision
- 支付宝pc支付php,laravel框架下的pc支付宝支付接入
- Puppet安装部署篇(一)
- vuejs解析url地址
- Mit6.S081-实验4-Traps
- SN65HVD888DR应用 TPS61170DRVR中文资料_1.2A 转换器
- MSU转Uniprot转Entrez ID
- Qt 语言家实现中英文切换(解决纯代码添加部件的中英文转换问题)
- 常见编程错误及解决方法,避免踩雷
- 如何正确计算LINUX内存使用率
- Android SnackBar
- 阿里云 mysql 1045_解决阿里云登录mysql出现的1045错误
- Web初学-2022.10.15-21
- 计算机断层CT检查肺部混浊,【 正常肺部ct影像】_正常表现_特点-大众养生网
- 【附源码】计算机毕业设计java中小学家校通系统设计与实现
- IDM 6.25 build 21破解笔记
- 在 Windows 下编译运行 MUMPS
- Linux、Kali系统常用命令
热门文章
- 软件测试/测试开发 | app测试中常用的Android模拟器
- 全国计算机等级考试一级选择题真题,全国计算机等级考试一级历届选择真题以及详细答案二...
- 阿里云服务器2核4G/2核8G/4核8G有什么区别以及如何选择?
- 你越牛逼,感情就越纯粹
- 游戏建模师现状如何?10个3D建模师,有9个吃不上饭,是真的吗?
- 中国云游戏产业,“新基建”先行?
- vue中过滤器filters的this指向问题。
- 单总线LED灯 幻彩LED灯 控制代码,以及相关记录
- 私人助手-典型用户和用户场景分析
- 微信小程序地摊管理平台+后台管理系统