Three.js--》建模软件如何加载外部3D模型?

这篇具有很好参考价值的文章主要介绍了Three.js--》建模软件如何加载外部3D模型?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

三维建模软件的介绍

Blender官方文档介绍

Blender软件安装

GLTF格式简介

gltf不同文件形式


        看过我之前讲解的three文章的人都知道,我在创建模型的时候都没有使用three.js自带的一些简单模型,而是引入外部的模型并加载到页面上,简言之:对于简单的立方体、球体等类型,你可以通过three.js的几何体相关的API快速实现,不过复杂的模型,比如一辆轿车、一栋房子、一个仓库,一般需要通过3D建模软件来 实现。

三维建模软件的介绍

3D美术常用的三维建模软件,比如Blender(轻量开源)、3damx、C4D、maya等等,特殊行业项目可能涉及到行业软件,比如机械相关(SW、UG)等,建筑相关(草图大师、revit)。

3D建模与程序的分工流程是

3D美术:使用三维建模软件绘制3D模型,导出gltf等常见格式

程序员:加载解析三维软件导出的三维模型

比如使用Blender三维建模软件导出gltf格式模型,然后再通过threejs加载三维模型

程序员学习3D建模的好处:了解3D相关概念,想比较代码,建模软件给人的感觉更加形象容易理解。建模软件与three.js代码的交互,能与美术更好的配合,能够知道建模软件如何导出模型。

初学者该选择什么建模软件?博主推荐大家使用 Blender软件 ,安装简易开源免费,易操作,接下来将简单介绍一下Blender建模软件的安装:

Blender官方文档介绍

首先先进入其下载官网:Blender官网 ,然后点击官网主页的 Download 进行下载,如下:

Three.js--》建模软件如何加载外部3D模型?

进入下载页面后,根据自己电脑的系统进行选择,我个人电脑是window,选择相应系统,这里建议下载 zip 格式,更方便快速安装和不容易出错。

Three.js--》建模软件如何加载外部3D模型?

如果点击没反应,下拉到下图所示位置再次点击下载即可:

Three.js--》建模软件如何加载外部3D模型?

如果想查看每次版本更新之后新增的一些功能,可以查阅 版本最新变化 ,这里可以借助翻译软件进行查看即可:

Three.js--》建模软件如何加载外部3D模型?

点击download下的demo files,就可以白嫖官方历代闪屏文件和资产库文件

Three.js--》建模软件如何加载外部3D模型?

Three.js--》建模软件如何加载外部3D模型?

Blender软件安装

下载 blender 软件 zip 完成之后,接下来就可以进行相应的安装了,这里建议安装到D盘,然后安装路径注意不要有中文路径,避免渲染出错。解压压缩包然后进入到文件当中,然后找到如下图所示的文件发送到桌面快捷方式:

Three.js--》建模软件如何加载外部3D模型?

找到桌面的快捷方式双击进行打开即可,进入软件主页面之后选择对应自己想要的语言,例如中文

Three.js--》建模软件如何加载外部3D模型?

然后点击空白处让当前弹框消失即可,然后点击菜单栏中的编辑选项,选择偏好设置,取消勾选新建数据,避免文件出错。

Three.js--》建模软件如何加载外部3D模型?

然后选择系统,勾选全部显卡和CPU:

Three.js--》建模软件如何加载外部3D模型?

然后撤销设置建议设置成100即可:

Three.js--》建模软件如何加载外部3D模型?

ok,blender的安装与基础设置就基本配置完成了,接下来可以随时进行3D建模啦。

GLTF格式简介

GLTF格式是新2015发布的三维模型格式,随着物联网、WebGL、5G的进一步发展,会有越来越多的互联网项目Web端引入3D元素,你可以把GLTF格式的三维模型理解为jpg、.png格式的图片一样。现在的网站,图片基本是标配,对于以后的网站来说如果需要展示一个场景,使用3D来替换图片表达也是很正常的事情。

图片有很多格式,对于三维模型自然也是如此,Web开发的时候图片会有常用格式,对于Web3D开发也一样,肯定会根据需要选择一个常见的大家都熟悉的格式,随着时间的发展,GLTF必然称为一个极为重要的标准格式。不仅three.,js,其它的WebGL三维引擎cesium、babylonjs都对gltf格式有良好的的支持。

Khronos Group组织2015发布了GLTF1.0版本,在2017年又发布了GLTF2.0版本,关于gltf的更多介绍和信息,可以查看github:https://github.com/KhronosGroup/glTF 。

gltf包含内容:相比较obj、stl等格式而言,.gltf格式可以包含更多的模型信息。.gltf格式文件几乎可以包含所有的三维模型相关信息的数据,比如模型层级关系、PBR材质、纹理贴图、骨骼贴图、变形动画等等。

gltf格式信息:如果你有一定的前端基础,那么你对JSON一定不陌生,GLTF文件就是通过JSON的键值对方式来表示模型信息,比如meshes表示网格模型信息,materials表示材质信息等。

.bin文件:有些gltf文件会关联一个获多个.bin文件,.bin文件以二进制形式存储了模型的顶点数据等信息。.bin文件中的信息其实就是对应gltf文件中的 buffers 属性,buffers.bin中的模型数据,可以存储在 .gltf 文件中,也可以单独一个二进制 .bin 文件。

二进制 .glb:gltf格式文件不一定就是以扩展名 .gltf 结尾, .glb就是gltf格式的二进制文件。比如你可以把 .gltf 模型和贴图信息全部合成到一个 .glb 文件中,.glb文件相对 .gltf 文件体积更小,网络传输自然更快。

gltf不同文件形式

三维建模软件比如Blender,可以根据设置以不同形式导出gltf模型,比如单独导出一个 .gltf 文件,比如单独导出一个 .glb 文件,比如导出形式为:.gltf + .bin + 贴图多个文件。

.gltf格式模型文件,有不同的组织形式。单独 .gltf 文件、单独 .glb文件、.gltf + .bin + 贴图文件。

注意:贴图等数据单独是一个文件的时候,注意不要随意改变子文件相对父文件gltf的目录,以免找不到资源。这一点很重要,切记!!!

这些不同形式的gltf模型,加载代码其实没啥区别,比如说我们通过3D建模软件画好一个模型之后,就可以通过建模软件进行一个导出,如下:

Three.js--》建模软件如何加载外部3D模型?

比如说这里我选择导出gltf模型之后,可以自行选择要导出的格式:

Three.js--》建模软件如何加载外部3D模型?

ok,3d建模软件的下载以及如何导出gltf模型的简单介绍到这里就结束了,后期博主也可能会讲解一点关于3D建模Blender的相关知识,关注博主,让学习之路不再迷茫!文章来源地址https://www.toymoban.com/news/detail-460284.html

到了这里,关于Three.js--》建模软件如何加载外部3D模型?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • three.js加载3D模型,在网页上展示3D模型(.glb.gltf.fbx格式)

    Three.js是一款开源的主流3D绘图JS引擎,简单点,可以将它理解为three+js就可以了,three表示3D,js表示JavaScript的意思。 结构  .glb.gltf文件最好放在服务器上 放在本地容易报找不到的错 .fbx格式文件可以在本地用3d看图(win10自带)打开另存为.glb格式 index.html代码 js代码 项目案例

    2024年02月11日
    浏览(37)
  • Three.js 3D建模必备基础

    在 three.js 中,可见对象由几何体和材质构成。 我们已经了解了如何创建适用于点和线图元的简单几何图形,并且遇到了各种标准网格几何图形,例如 THREE.CylinderGeometry 和 THREE.IcosahedronGeometry。 在本节中,我们将了解如何从头开始创建新的网格几何体。 我们还将了解 three.js

    2023年04月09日
    浏览(26)
  • Three.js程序化3D城市建模【OpenStreetMap】

    对于我在 Howest 的研究项目,我决定构建一个 3D 版本的 Lucas Bebber 的“交互式讲故事的动画地图路径”项目。 我将使用 OSM 中的矢量轮廓来挤出建筑物的形状并将它们添加到 3js 场景中,随后我将对其进行动画处理 推荐:用 NSDT编辑器 快速搭建可编程3D场景 为了使用 Node 和

    2024年02月11日
    浏览(30)
  • Three.js 模型加载及加载简单动画

    时间过的好快啊~再一次感叹,忙忙碌碌一年又过去了,新年第一帖,新的一年也要加油呀! 简单介绍下Three.js吧,Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。因为使用简单,入门比较容易。 Three.js的具体

    2024年02月12日
    浏览(40)
  • three.js添加3d模型

    three官方的几何体也就那么几个,想要生成各种各样的模型,其难度十分之大,这时引入外部模型也不失为一种选择。具体引入办法如下。 虽然名字为GLTFLoader,但实际上glb文件也是能加载的。 其中需要注意的是调节相机参数与相机位置,否则很有可能导致场景中看不见任何东

    2024年02月04日
    浏览(65)
  • Three.js加载FBX模型并解析骨骼动画

    通过Threejs先加载一个.FBX格式的三维模型文件,然后解析该文件中的骨骼动画信息。  FBX 加载器 FBXLoader.js 加载fbx模型文件 加载模型文件,加载完成后,如果模型显示位置不符合要求,可以通过Threejs程序进行平移、缩放等操作。 查看FBX模型帧动画数据 stl、obj都是静态模型,

    2024年02月07日
    浏览(58)
  • Web3D开发经验分享:基于Three.js的Web3D建模案例

    个人主页: 左本Web3D,更多案例预览请点击==》 在线案例 个人简介:专注Web3D使用ThreeJS实现3D效果技巧和学习案例 💕 💕积跬步以至千里,致敬每个爱学习的你。喜欢的话请三连,有问题请私信或者加微信         随着互联网的快速发展,Web3D技术也越来越成熟,越来越

    2024年02月13日
    浏览(35)
  • Three.js--》实现3d字体模型展示

    目录 项目搭建 初始化three.js基础代码 设置环境纹理 加载字体模型 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用vite构建工具搭建vue项

    2024年02月07日
    浏览(49)
  • Three.js--》实现3d踢球模型展示

    目录 项目搭建 初始化three.js基础代码 设置环境纹理加载模型 使用Cannon-es实现物理世界 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用

    2024年02月11日
    浏览(31)
  • Three.js--》实现3d地球模型展示

    目录 项目搭建 实现网页简单布局 初始化three.js基础代码 创建环境背景 加载地球模型 实现光柱效果 添加月球模型 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借

    2024年02月08日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包