如何使用Blender创建一个不变形球体的纹理呢？

“ 感知技术 · 感触CG · 感受艺术 · 感悟心灵 ”

中国很有影响力影视特效CG动画领域自媒体

嗨！小伙伴们，我是你的好朋友小SOMO！

今天分享干货

通过使用Blender创建一个不变形的球体纹理！

说一个初学者常见的问题：应该使用什么类型的图像来正确地在Three.js中对球体进行纹理处理？这篇文章告诉你答案！

Three.js

Three.js是一款运行在浏览器中的3D引擎，可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象；允许使用JavaScript创建网页中的GPU加速的3D动画元素，而不是使用特定的浏览器插件；Three.js以简单、直观的方式封装了3D图形编程中常用的对象；在开发中使用了很多图形引擎的高级技巧，极大地提高了性能；它是一款WebGL三维引擎，作为WebGL框架中的佼佼者，由于它的易用性和扩展性，使得它能够满足大部分的开发需求。

初学者肯定都尝试过将花朵或人物的正方形图像拼贴到3D球体上，希望它可以“有所作为”、“派上用场”，结果，总是不如意，贴图出来的效果不是被拉伸了就是严重变形，总而言之！就两个字“难看”！

现在有一种为球体创建纹理的方法哦，它看起来还不会变形，那就正式进入今天的小课堂吧！

纹理变形问题重述

从一个简单的场景开始：想要将高尔夫球纹理应用到SphereGeometry. 如果用浏览器搜索“高尔夫球纹理”并选择一个将其“覆盖”到球体上，很可能会得到一个扭曲的高尔夫球：

（左图：用作球体纹理的图片。右图：注意图像在两极的扭曲程度）

那么如何避免失真不均匀的问题，尤其是在球的两极？

使用Equirectangular

如果小伙伴们看过threejs.org上示例场景之一，可能已经掌握了这个问题的关键。

（示例左下方展示了一个完美的高尔夫球）

虽然它没有直接将颜色或 "反照率 "纹理应用到球体上，而是使用了高尔夫球的法线贴图，但在这种情况下基本上是相同的想法。

请注意，这张法线贴图与之前随机选择的“浏览器搜索图片” 有何不同：

孔在中心相对均匀，但在接近顶部和底部时开始水平拉伸。这就是所谓的“Equirectangular Image”。

首先简要介绍一下Three.js如何将纹理映射到SphereGeometry上，

Three.js会为工厂几何体创建默认UV贴图，接下来尝试在原版上应用UV测试纹理SphereGeometry来解决这个问题。最初的UV测试纹理如下所示：

（U值从左到右增大，V值从上到下增大）

左上角的UV坐标为 (0,0)，右下角的UV坐标为 (1,1)。

下面是带有此UV测试纹理的球体的顶部和底部。

（球体的“北极”）

（球体的“南极”）

从图上可以看得到球体顶部的V值为 0，而球体底部的V值为1。U值水平延伸，但由于球体是圆形的，UV贴图的右边缘缝合到其左边缘，这就是为什么可以在上图中看到U值从0.9回到0.0。

所以，不管使用此方法将任何图像应用到球体作为纹理，图像的左上角都将指定为UV(0,0)，而图像的右下角将指定为UV(1,1)。

当图像被包裹到球体上时，像素会在两极挤在一起。这就是为什么高尔夫球的凹凸在两极附近要宽得多；因为经过挤压后，这些凹凸在最终结果中会变得很好，就像在Three.js示例中看到的那样。

所以呢，在寻找可以用的球形纹理的时候，要记住添加关键字“equirectangular”!

Blender烘焙

Equirectangular纹理

来啦！到了本文重头戏了！

如果在网上找不到合适的equirectangular图像怎么办呢？或者实际上需要为的球体制作一个图案，那该怎么办呢？这一点可以在Blender中做到哦~

接下来将在Blender中创建一个带有自定义材质的球体，然后将这个材质与球体的默认UV贴图一起烘焙成equirectangular图像，那就开始吧！

在一个全新的Blender项目中，添加一个UV球体：

（SHIFT-A打开添加菜单）

添加球体后，展开左下角的调整菜单，将Segments调整为：200，将Rings调整为：100，来让球体变得更加清晰！

更高分辨率的球体可以让后期生成更加平滑的纹理。

下面就转到“Shading”选项卡中，并添加一个新的材质。

（可以将材质名称保留为Material.001，无需编辑）

然后在下面的区域中，默认节点正在被添加"Principled BSDF"、"Material Output"。再按一次SHIFT-A，弹出添加菜单，搜索 "Noise Texture"，它是Blender中众多纹理节点之一。

将噪点纹理的 "Color "入口连接到BSDF节点的 "Base color "入口。然后球体上会出现一些彩色的噪点图案！

当然啦！有非常多种方法可以制作球形纹理，也有很多相关的视频~反正调整这些纹理并没有多难！假设这个简单的噪点纹理就是现在要在Three.js球体中应用的纹理。接下来，要将这种纹理 "烘焙 "成可保存的图像。

在现有节点旁边的空白处，再次SHIFT-A添加 "Image Texture"节点：

（此图像纹理节点不需要连接到任何东西）

单击“Image Texture ”节点中的“New Image”并为它命名！

由于要创建2:1的equirectangular图像，因此将宽度增加到2048px，点击确定。

然后在右侧面板的“Camera”中，“Render Properties”中选择“Cycles”作为渲染引擎。

然后向下滚动展开“Bake”，应用以下设置：

• Bake Type：“Diffuse”这意味着只是将颜色烘焙为图像纹理。

• Contributions：只选择“Color”，因为不需要将灯光或其他东西贡献给输出纹理。

• Target：选择“Image Textures”，因为要将烘焙输出存储到之前在image instance节点上创建的图像实例中。

  
  

在单击“Bake”按钮之前，有一个很重要的步骤大家千万不要错过~

要同时选中场景中的球体对象和Image Texture节点，只需点击一次，就可以分别选中它们。

（要注意，球体以黄色突出显示，图像纹理节点以白色突出显示，这意味着它们已被选中）

选中球体和图像纹理节点后，就可以放心地点击侧边面板上的“Bake”按钮了，这一步骤需要一点时间，差不多一分钟左右！

底部进度条完成后，转到顶部的“Rendering”选项卡，然后在下拉列表中选择“ noise texture”图像。瞧！显示的图像是渲染结果：

现在就可以对它进行保存了！

将此纹理应用到Three.js SphereGeometry上~

举一个在“Minkowski”模式下使用“Voronoi Texture”节点的例子：

（来自Blender的渲染图像纹理）

以及应用于Three.js的外观：

上面就是今天的学习的干货内容了哦~希望能给大家提供帮助。

那今天就到这里！散会~~

原文地址 ：

https://medium.com/geekcul ture/how-to-create-textures-for-three-js-spheregeometry-using-blender-d20a907b5b47

我的好朋友小SOMO，高质量CG模型哪里找？

当然是（cgsomo.com）啦！!点击文末“阅读全文”免费CG模型等你带走~

看了这么久设个星标，再走哦~

- End -

【模型分享】运动设备类3D模型，来喽~

斯坦福团队巨作：一张图一段文字就能生成无限连贯的3D场景！

【模型分型】日常生活货架类3D模型

航空航天转行CG艺术家，Jama Jurabae的作品太顶了！每一帧都是大片！

基于UE5的超自然写实五官绑定流程！