使用 Blender 设计并导出模型,让你轻松掌握 Three.js 的 18 个实践技巧
本系列为 Three.js journey 教程学习笔记。包含以下内容
- Three.js 之 1 Animation 动画
- Three.js 之 2 Camera 相机
- Three.js 之 3 画布与全屏
- Three.js 之 4 Geometry 几何体
- Three.js 之 5 debug UI
- Three.js 之 6 Texture 纹理
- Three.js 之 7 Materials 材质
- Three.js 之 8 炫酷的 3D Text
- Three.js 之 9 Light 光
- Three.js 之 10 Shadow 投影
- Three.js 之 11 Haunted House 恐怖鬼屋
- Three.js 之 12 Particles 粒子效果
- Three.js 之 13 Galaxy 银河效果生成器
- Three.js 之 14 Raycaster 光线投射
- Three.js 之 15 Scroll based animation 基于页面滚动的动画
- Three.js 之 16 Physics 物理引擎
- Three.js 之 17 Import Model 导入模型
- Three.js 之 18 使用 Blender 设计和导出模型
未完待续
使用 Blender 设计和导出模型
有很多 3D 建模的软件,比如 Cinema 4D、Maya、3DS Max、Blender、ZBrush 等。本节课我们将学习 Blender 因为它是免费的,并且性能也还不错。
本节课学习完成后,你并不会成为 Blender 的专家,因为它需要更多完整的课程才能熟练。我们只是学习的软件的入门,以便能够应对更多地简单模型。熟悉一个模型的制作以及它是如何被导出并导入到 WebGL 中去的。
Blender 的界面与基本操作
如下图,就是 Blender 的界面,由多个区域组成。
- 3D viewport
- Timeline
- OutLiner
- Properties
改变区域
可以点击左上角的下拉菜单,修改。如下图
划分与合并区域
可以将鼠标移动至区域的左上角,成为十字的时候,可以划分和合并区域,如下图
快捷键
Blender 的优势之一是它的快捷方式。 它们有很多,一旦你掌握了基础知识,你就会非常有效率
对于 Blender 的操作,这里建议使用鼠标,而非触摸板,因为我们会用到很多鼠标滚轮的点击。
旋转视角
按住滚轮中键,移动鼠标
视角平移
按住 shift
同时按住鼠标中键可以进行视角平移
视角缩放
鼠标滚轮旋转控制视角缩放
需要注意的是,我们使用滚轮的缩放是不会超过物体中心的,如果想要超过中心,可以使用快捷键 shift+ctrl+滚轮中键点击移动鼠标
。如下图
*视角移动
使用*视角移动,我们要进入 Walk mode。进入这个模式的快捷键是 shift + back quote
数字 1 旁边的点,然后可以用 wasd 或方向键控制前后左右平移,用鼠标控制视角,类似 FPS 游戏视角。效果如下:
正交或景深视角切换
小键盘数字键 5 可以快速切换。
坐标轴视角
小键盘数字键 1、3、7 分别为 x、y、z 轴视角,效果如下
相机视角
小键盘数字 0 可以快速切换场景中的相机视角
reset
有时可能视角移动找不到场景了,这一使用快捷键 shift + c
回到主场景。如下图
聚焦
我们如果想聚焦到一个对象上,可以使用小键盘数字键 .
。
如果想聚焦到一个对象上,同时又隐藏其他对象,可以使用小键盘 /
选择
- 使用
shift + 鼠标左键
可以多选对象。 - 使用
cmd + z
可以撤销选择 - 使用
A
可以全选 - 使用
双击 A
可以全不选 - 使用
B
可以划区域选择 - 使用
C
可以类似笔刷选择,同时可以使用鼠标滚轮控制笔刷区域大小
这里举例快捷键 B
+ 双击 A
,先选中2个对象,再取消所有选择
创建物体与相关操作
我们来创建物体,实际操作一下。其中也有非常多的快捷键。
创建物体之前我们先学会删除物体
删除物体
快捷键 X
,选中物体,然后使用快捷键 X 进行删除操作,如下图
创建物体
快捷键 shift + A
出现菜单,通过菜单创建物体
创建好物体后,有个菜单可以控制物体的面数等信息。如果它消失了可以按快捷键 F9
重新打开。
隐藏物体
- 选中一个物体,按
H
进行隐藏 - 重新展示隐藏的物体可以按
Alt + H
- 隐藏非选中的物体,按
shift + H
物体变换
- 使用快捷键
G
进行位置变换,变换后鼠标右击取消,左击确认。 - 使用快捷键
R
进行旋转 - 使用快捷键
S
进行缩放
如果使用了变换快捷键,然后再按 X、Y、Z 就可以进行轴向上的变换操作
如下图,位置变换展示,先按 G 再按 x
改变模式与编辑模式
目前我们使用的是物体模式(Object Mode)我们可以改变模式方便其他操作
快捷键 shift + tab
可以看到有以下多种模式,我们接下来会用到编辑模式,我们先来讲一下
进入 Edit Mode 后,我们可以修改顶点、线和面,同时也可以使用 G、R、S
这些快捷键进行编辑。
下图的操作是,按 shift + tab
进入 edit mode,默认选中了点操作,我们选一个顶点,按 G
再按 X
,将其按照 X 轴进行移动操作。
Shading 渲染着色
我们可以使用快捷键 Z 选择不同的渲染着色方式
- Solid: The default with the same material for every objects.
- Material: Like the Solid shading, but with a preview of the materials and their textures.
- Wireframe: All the geometries are in wireframe.
- Renderer: Low quality render —it's the most realistic but the least performant.
例如在 renderer shading 模式下的效果,可以看到光和影
Properties 属性区域
右下角的区域就是 Properties 区域。
可以看到左侧的图标中间是有比较大的间距的,上面的那些是与场景相关的。
上面的几个图标中第2个icon,是可以选择渲染引擎的。
默认是 Eevee
3个引擎的区别和特点分别是:
- Eevee: A real-time render engine. It uses the GPU just like Three.js, it's very performant, but it has limitations like realism, light bounce, reflection, and refraction.
- Workbench: A legacy render engine that we don't use a lot anymore. Its performance is pretty good, but the result isn't very realistic.
- Cycles: A raytracing engine. It's very realistic. It handles light bounce, deep reflection, deep refraction, and many other features, but it's very sluggish, and you might end up waiting hours or even days to render your scene.
默认的 Eevee 是一个实时渲染引擎。如果想渲染场景,可以按 F12 通过场景中的相机进行渲染。
下图为用 Cycles 这个光追引擎进行渲染的几个物体,非常漂亮,可以看到红色的反光效果,这就是光追效果的魅力。
下面的这些是与选中的对象物体相关
对象相关的我们暂时需要关注第1、2个,以及倒数第2个。分别是物体属性、Modifier 属性,和材质。
材质中的 Principled BSDF
就是使用了 PBR 原则的属性,和 Three.js 中的 MeshStandardMaterial 相同。
搜索
快捷键 F3
,可以打开搜索框,可以输入关键字进行提示。
保存预设状态
我们将场景清空,保留一个立方体和点光源。将下面的两个视图分别改为Z和Y轴视角。并且渲染为 wireframe。然后保存预设 File > Defaults > Save Startup File
。再次打开时就是这个界面模式了。
汉堡模型制作
接下来我们将开始汉堡模型的制作,并且最终我们会将其导入到 Three.js 中。
单位统一
默认单位是 m,对于制作一个汉堡来说就太奇怪了,所以我们索性就将单位设置为 none。
汉堡的直径大概是 10 cm,我们就制作一个直径大概在 10 个单位的汉堡吧。
汉堡底部的面包
首先我们创建一个尺寸大约为10的立方体。
使用 Subdivision Surface 将立方体细分面,如下图
我们可以在物体上右击,再点击 Shade Smooth 将物体的面变得光滑。
然后再进入编辑模式,将立方体上表面进行移动。
再按 Ctrl + R
来增加循环边(loop cut 环切)
我们可以再次使用增加循环边,是面包底部更平坦
保存后,我们会发现,会有2个文件同时存在,一个是后缀名为 blend 另一个是 blend1,这是因为1结尾是的备份,如果有问题,你可以将 blend1 文件改名为 blend 继续使用。
肉饼制作
我们可以复制一个汉堡底部面包,然后再经过调整,得到一个肉饼!
芝士片
我们使用 plane 几何*作芝士片
现在看起来还太假,我们需要为它增加曲线弧度和厚度。
编辑模式,选择芝士片的面,右击,选择 Subdivide
Number of Cut 可以设置为 12
在编辑模式下,选择 Proportional Editing(成比例编辑),可以移动一组点,让芝士看起来更真实
回到 Object 模式,我们可以在芝士上右击,选择 Smooth
接下来需要增加一些厚度,选择 solidify
可以看到芝士的已经有了厚度,我们想让边缘更锋利一些,可以选择 Object Data Properties 里的 Normals 的 auto smooth 角度修改
我们可以复制2层肉饼和芝士,并稍微旋转一下,效果如下
上层面包
我们将下层面包复制一个,并旋转。
材质
可以再撒点芝麻增加一些材质。我们给汉堡增加颜色,并将面包和肉饼的粗糙度调整到最大,芝士的粗糙度相对低一些。
Blender 自带的渲染效果如下:
导出模型
File > Export > glTF 2.0 (.glb/.gltf)
导出配置如下设置
Three.js 中渲染
使用上一节学习的导入模型渲染,效果如下:
在线 demo 链接
demo 源码
看起来颜色和 Blender 里渲染的不太一样,我们下一节会详细讲讲如何做到真实渲染。
小结
本节学习了 Blender 的快捷键和基本操作,并制作了一个汉堡模型,导出模型,导入到 Three.js 中渲染。下一节将学习什么是真实渲染。
推荐阅读
-
41 个下载免费 3D 模型的最佳网站-使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 17. Clara.io Clara.io 是一个创建 3D 内容的全球平台,也是一个培养新 3D 艺术家的社区。Clara.io 提供+100,000个免费的3D模型,包括OBJ,Blend,STL,FBX,DAE,Babylon.JS,Three.JS格式,用于 Clara.io,Unity 3D,Blender,Sketchup,Cinema 4D,3DS Max和Maya。 使用说明:免费,标准和专业帐户仅供个人使用,如果您需要将 clara.io 用于商业用途,请与销售团队联系。 18. 3DExport 3DExport是一个市场,您可以在其中购买和销售用于CG项目的3D模型,3D打印模型和纹理。它提供15 +不同的3D格式供下载,如3DS MAX(.max),Cinema4D(.c4d),Maya(.mb,.ma),Lightwave(.lwo),Softimage(.xsi),Wavefront OBJ(.obj),Autodesk FBX(.fbx)等。它还提供15种不同的语言! 使用说明:免费下载仅供个人和非商业用途。 19. 3D Warehouse 3D Warehouse是一个开放的库,允许用户共享和下载SketchUp 3D模型,用于建筑,设计,施工和娱乐!任何人都可以免费制作,修改和重新上传内容到3D仓库,您可以找到任何您能想到的东西,如家具,电子产品,室内产品等。 使用说明:3D Warehouse中的所有模型都是免费的,因此任何人都可以下载文件以用于SketchUp甚至其他软件,如AutoCAD,Revit和ArchiCAD。 20. CadNav.com CadNav是CGI平面设计师和CAD / CAM / CAE工程师的在线3D模型库,我们提供超过50000 +免费3D模型和CAD模型下载。在CadNav网站上,您可以下载高质量的多边形网格3D模型,3D CAD实体对象,纹理,Vray材料,3D作品,CAD图纸等。 使用说明:免费下载仅供个人和非商业用途。 21. All3dfree.net 就像网站名称一样,它提供免费的3D模型,还包括Vray材料,CAD块,2d和3d纹理集合,无需注册即可免费下载。它是不断更新的,因此您可以查找或请求3DS,MAX,C4D,skp,OBJ,FBX,MTL等格式的模型。 使用说明:所有资源均不允许用于商业用途,否则您将承担责任。 22. Hum3D 自2005年以来,Hum3D帮助来自3多个国家的80D艺术家节省3D建模时间,并制作逼真的3D模型,用于电影,视频游戏,AR应用程序和可视化。所有模型均由首席3D艺术家进行验证,他们检查其是否符合专业要求和最新的3D建模标准。 使用说明:免费下载仅供个人和非商业用途。 23. Artist-3D.com 艺术家-3D 库存的免费 3D 模型下载按通用类别排序。它为人体解剖学、汽车、家具、火箭、卫星等模型提供 AutoDesk 3DS Max 格式。您还可以在浏览他们的网站时找到教程和类似类型的建模。 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 24. Free the models 就像本网站的标题一样,它为3d应用程序和3d游戏引擎提供免费的内容模型。您可以为您的任何项目找到许多有趣且有用的模型!它提供3ds,wavefront,bryce,poser,lightwave,md2和unity3d格式的模型。还有一个很棒的纹理集合,可以在您最喜欢的建模和渲染程序中使用。 使用说明:您从这里下载的所有内容都可以免费使用,除非它不能包含在另一个免费的网络或CD收藏中,也不能单独出售。否则,您可以在商业游戏,3D应用程序或渲染作品中使用它。您不必提供信用,但如果您这样做,那就太好了。 25. Resources.blogscopia 本网站由一家名为Scopia的公司创建。他们制作3D图像和视频,您可以找到许多为CGI工作的信息架构设计的模型,所有这些都可以在现实生活中使用。您可以免费下载它们,但是,如果您想一次下载它们,您可以支付 3 到 9 欧元。 使用说明:您可以免费下载模型部分的所有文件。每个压缩文件都包含您也可以在此处找到的许可证。基本上,您可以对文件执行任何操作。唯一的限制是不归属于Scopia的重新分发。 26.ambientCG 1000+公共领域PBR材料适合所有人!环境CG是使用许多不同的方法和资产类型创建的,例如照片纹理(PBR),贴花(PBR),图集(PBR),照片纹理(普通),物质存档(SBSAR),雕刻画笔,3D模型和地形。您可以在所有项目中*使用它们! 使用说明:在 ambientCG 上提供下载的所有 PBR 材料、画笔、照片和 3D 模型均根据知识共享 CC0 1.0 通用许可提供。您可以复制、修改、分发和执行作品,即使是出于商业目的,也无需征得许可。信用将不胜感激。 不要满足于平庸的大理石纹理 - 立即使用我们的免费PBR大理石纹理升级您的3D设计。 27.Pixar One Twenty Eight 这是一个提供官方动画行业经典纹理的网站:皮克斯,创建于 1993 年,该纹理库包括 128 个重复纹理,现在免费提供。 它包含您来到的纹理,包括砖块和动物毛皮。肯定会有一些你可以使用的东西。 使用说明:皮克斯动画工作室的《Pixar One Twenty Eight》根据知识共享署名4.0国际许可协议进行许可。即使出于商业目的,您也可以重新混合、调整和构建您的作品,只要您以相同的条款对新创作进行信用和许可。 访问数以千计的免费纹理并提升您的设计游戏 - 立即开始下载! 28. 3DXO 即使有近 620 个免费贴纸可供下载,3DXO 也不是最大的资源,但它的内容非常有用,不需要注册。无论是简单的墙壁或地板,还是一些奇怪的小东西,您都需要的纹理都可以在此网站上看到。 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 29. 3DModelsCC0 3DModelsCC0 与其他产品的不同之处在于它包含超过 250+ 个高质量 3D 模型,并且本网站上的所有内容都是免费的,完全是公共领域!使用我们的模型时无需信用或归属! 使用说明:为每个人提供完全免费的公共领域内容。 30.Sketch up texture club Sketchup Texture Club是一个非营利性的教育和信息门户网站,由3D社区的图像促进协会管理,特别强调面向学生和建筑和室内设计专业人士的可视化和渲染技术,以及所有正在学习3D可视化的人。 使用说明:您无需支付版税或使用费。纹理可以免费下载和使用。不允许将纹理作为竞争产品出售或重新分发,即使图像被修改也是如此。 31. FlippedNormals FlippedNormal 是一个提供计算机图形和 3D 资产的市场,您可以找到许多用于雕刻、建模、纹理、概念艺术、3D 模型、游戏资产或课程的高级资产! 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 32. NASA 3D NASA 3D网站是一个在线门户,提供与太空和各种NASA任务相关的大量三维模型和模拟。该网站是用户友好的,并提供有关每个型号的详细信息。该网站允许用户探索和下载几种不同格式的模型,包括 OBJ、STL 和 FBX,只需单击下载按钮即可。 使用说明: 要下载模型,只需单击模型页面上的下载按钮并选择所需的格式。 33. 3DAGOGO (Astroprint) 3DAGOGO 是一个提供广泛 3D 模型的网站,包括角色、车辆和建筑物。3DAGOGO 的独特功能之一是它专注于适合 3D 打印的模型,使其成为希望创建物理原型或模型的设计师的绝佳资源。要使用 3DAGOGO,设计师只需在网站上搜索他们正在寻找的模型类型,然后下载 STL 格式的文件。 使用说明: 要使用 3DAGOGO,只需搜索所需的 3D 模型类型并下载 STL 格式的文件。根据需要自定义模型,并确保在将其用于商业目的之前检查使用权限。 34. FreeCAD FreeCAD是一款了不起的3D建模软件,可让您在计算机上创建令人难以置信的3D设计。该软件可免费下载和使用,它提供了广泛的工具和功能,可用于创建用于各种目的的3D模型。 该网站易于浏览,您可以找到开始使用FreeCAD的所有必要信息。此外,该网站还提供一系列教程和指南,可帮助您了解 3D 建模的来龙去脉。 使用说明: 要下载模型,请访问网站并从库中选择所需的模型。该网站还提供了一系列使用该软件的教程和指南。 35. Pinshape Pinshape是一个提供一系列3D打印模型的网站。网站上提供的型号质量很高,因此您可以确保您的最终印刷产品看起来很棒。该网站提供了广泛的模型,包括从家居用品到小雕像和珠宝的所有物品。 但这还不是Pinshape所能提供的全部!该网站还允许用户上传和共享自己的3D模型。这意味着您不仅可以下载出色的模型,还可以通过分享自己的设计为社区做出贡献。此外,Pinshape 提供了一系列自定义选项,因此您可以调整和调整模型以满足您的特定需求。 使用说明: 要下载模型,请在网站上创建一个帐户,搜索所需的模型,然后单击下载按钮。该网站还为每种型号提供了一系列定制选项。 36.Yeggi Yeggi 提供了大量免费的 3D 模型,您可以下载各种格式的模型,例如 STL、OBJ 和 FBX。该网站易于使用,您可以按关键字、类别或特定网站搜索模型。 Yeggi 对于任何寻找 3D 模型的人来说都是一个很好的资源。它提供了大量的模型集合,从日常物品到复杂的机械,以及介于两者之间的一切。该网站的收藏量在不断增长,每天都有新的型号增加。 使用说明: 要下载模型,请在网站上搜索所需的模型,然后单击下载按钮。该网站还提供指向托管模型的原始网站的链接。 37. Open3DModel 来自开放3D模型的图像 Open3DModel具有各种类别的模型,包括建筑,车辆和角色。无论您需要建筑物,汽车还是人的3D模型,都可以在此网站上找到。 该网站易于浏览,您可以按类别或关键字搜索模型。每个模型都附带预览图像和详细信息,例如文件格式、大小和多边形数量。此信息可以帮助您选择适合您需求的模型。 使用说明: 要下载模型,请访问网站,从库中选择所需的模型,然后单击下载按钮。 使用最好的 3D 资产管理工具简化您的 3D 制作流程。立即试用它们,将您的 3D 项目提升到一个新的水平! 38. 3DExport 对于那些为其 3D 设计项目寻找 3D 模型、纹理和其他资源的人来说,该平台是一个很好的资源。该网站有大量模型可供选择,包括 3D 打印对象、游戏资产等。用户可以按类别、文件格式或价格范围浏览,以找到适合其项目的完美资源。此外,3DExport 还提供一系列教程和其他 3D 资源,以帮助用户提高技能并创建更令人印象深刻的设计。 使用说明: 要使用 3DExport,只需创建一个帐户并浏览可用型号。您可以按类别、格式和价格进行搜索,以找到所需的型号。找到喜欢的模型后,只需下载它并开始在您的项目中使用它。 39.Blend Swap Blend Swap是一个社区驱动的市场,提供与Blender软件兼容的各种免费3D模型。该平台允许用户共享和下载模型、纹理和其他资产,以便在他们的项目中使用。 使用说明: 创建免费帐户后,您可以浏览社区上传的大量3D模型。当您找到要使用的一个时,只需下载它并将其导入您选择的 3D 软件即可。 40. 3DShook 3DShook 是一个高级 3D 模型市场,提供一系列用于建筑、游戏等各个行业的高质量模型。该平台提供基于订阅的模型,具有不同的定价计划,允许用户访问一系列模型。 使用说明: 注册免费帐户后,只需浏览3D模型库,选择您喜欢的模型,然后以您需要的格式下载它们。 41. Smithsonian X 3D 史密森尼 X 3D 对于正在寻找历史文物和文物的高质量 3D 模型的设计师来说,这是一个独特的资源。该平台提供了大量3D模型,这些模型是根据史密森尼博物馆和研究中心中的真实物体扫描创建的。 使用说明:
-
使用 Blender 设计并导出模型,让你轻松掌握 Three.js 的 18 个实践技巧