WebIDE
WebIDE构建3D项目系列教程-2
第2节：认识贴图
上课无聊，填一填前两周挖的坑
上周最终的效果
emmmm虽然说好歹是个3D效果
但是这。。。。。
只能说毫无美感。。。。。
咳咳，本节讲一下材质贴图的概念
（顺便美化一下这个页面（不是））
俗话说得好啊，脚不着地心不踏实（有这句俗话？）
为了看着踏实点，咱给场景加个地面吧
加地面很简单，给场景添加一个平面模型就行了
在立方体下面创建一个宽高都为100的平面，材质颜色为白色，并添加到场景中
然后你就会得到一个很丑的平面（不是）
在threejs中，平面默认是竖直的，平面中心在世界坐标原点(0, 0, 0)
接下来我们把平面沿x轴旋转-90度，再向下移动两格（实际上就是设置y坐标为-2）
OK啊，平面位置正常了
我们已经给场景添加了平行光源，立方体表面已经可以绘制自己的阴影
但是我们的地面上只绘制了自己的阴影（指颜色偏暗），并没有绘制立方体在平面上的投影
接下来就解决平面不接收立方体投影的问题
第一节我们已经知道，渲染器会根据场景和相机的参数来渲染画面
我们也知道，产生阴影的前提有
1：有光源
2：有投影物体
3：有被投影物体
在我们的场景中已经满足了以上条件
产生阴影的平行光源和立方体，以及被投影的平面
threejs中的渲染器，光源，投影物体和被投影物体默认都是不产生阴影的
也就是说产生阴影的开关被关掉了
我们要做如下修改
1.设置渲染器渲染阴影
2.设置光源投射阴影
3.设置立方体产生投影
4.设置地面接收来自立方体的投影
注意：场景里有两个光源，一个是平行光源，而另一个是全局光源。在threejs中全局光源只起到照明作用，并不能投射阴影，因此不需要设置castShadow
呜呼～可以看到地面上已经有立方体的阴影了
好了，扯了这么多无关紧要的
正式步入材质贴图内容了
地面的材质太单一了我们给它加个材质贴图
threejs需要有贴图加载器才可以加载贴图
我们在前面建立贴图加载器
在添加平面模型前加载我们的地面材质贴图，并赋予到平面模型的材质上
注意加载完贴图后修改地面的材质，参数，把贴图放进去
然后我们就得到了非常生🌿的地面
分辨率简直就像上世纪老游戏（）
出现这种情况只有两个原因，要么贴图分辨率低要么模型面太大了
这个草地是2000*2000尺寸的贴图，虽然像素很高，但是作用在宽和高都为100的平面上就显得很模糊
遇到这种情况想要提高材质的精细度有三个方法，第一个是缩小模型（显然这个不行），第二个是改用一个尺寸更大的贴图（显然这个也不行，贴图越大消耗的算力就越多）
第三种方法就是缩小贴图并重复贴满模型，这样就能提高贴图的精细度。
咱这种地面模型，完全可以应用重复的贴图纹理
设置贴图宽高都分成十份再贴到模型上
不出意外的话就出意外了
贴图的细节丢失变成纯色了（悲）
孩子们不要惊慌，我来告诉你们这个情况也是正常的
目前咱用的threejs采用的是webgl渲染上下文
webgl有个特性，就是对贴图进行采样并渲染的时候，如果贴图尺寸不是2＾n（n是整数）的话，设置缩小重复渲染就会出现这个问题
其实也不是完全纯色，宽高重复十份也就是渲染的一百份贴图中，有一份还是正常的（欣慰）
但是这有个🔨用啊！！！
还不如改回去用低质量的材质
不急不急，事情还有挽回的余地
其实这种情况threejs官方早就想到了，只需要在贴图加载后添加下面这行代码
问题就解决了啦～
可以看到现在地面的贴图细节比上一次变高了（虽然看着还是有点模糊，因为现在渲染出来的画面分辨率比较低）
（但是先别急，先解决色调太暗和黑色背景问题再改渲染分辨率）
现在场景里已经有了光照，按理来说画面整体色调的亮度应该是比较高的，但是目前的画面比较暗（纯白色立方体都变成灰色的了）
我的锅我的锅，都怪我上期设置光源的强度太低了我爬www
调整光源的强度
现在画面亮度总算符合有光照的情况了
虽然现在画面亮度变高了，但是因为背景还是纯黑色的原因看着还是比较怪
接下来弄个稍微高级一点的东西，给背景加上天空盒
我们采用立方体天空盒，所以需要创建立方体贴图加载器
加载所有六张天空盒贴图，并赋到场景的背景
一个看着还不错的天空就这么水灵灵地加载出来啦～
但是现在又有个新问题
就是咱的阴影好像和天空盒上的太阳方向弄反了。。。。
没事没事，调整一下平行光源的位置就好了
现在画面整体色调勉强看着还行
但还是让人看着不舒服（主要是分辨率太低了）
现在咱们就来修复这个问题
很简单，让渲染器内置的分辨率与当前设备的分辨率相符合就行了
在graphic函数里渲染器初始化阶段部分设置渲染器的分辨率
终于不是马赛克画质了
（突然回想起来这期是认识贴图，结果一直在讨论怎么美化画面）
咳咳咳，现在来讨论一下怎么给立方体加贴图吧（）
其实只要看懂了给平面加贴图那部分，对于立方体加贴图也知道该怎么做了
依葫芦画瓢
加载立方体贴图并赋到材质中
这是给立方体六个面加一个贴图，有时候我们会遇到给多个面施加不同贴图的需求
很简单，把多个贴图赋到多个材质中
用一个数组存放这些材质，然后与geometry放入mesh函数中合并成模型即可
给立方体六个面添加不同贴图代码示例
（代码很大，你要忍一下）
好嘞，接下来就以添加球体并加载贴图作为收尾吧
（注意这里把立方体上移了三格
代码也是差不多的，就geometry不一样而已
本节帖子所用到的贴图素材
提取码：967p
收工～
2025-03-18
浏览728
教程分享
登录后评论
2
3