【Three.js基础学习】6.Textrue

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

这段时间没有继续学习，因为清明前公司有个项目把我调到别的项目组帮忙，紧急开发静态页面到甲方展示，上周六加到周三，有点烦躁！还是复习一下纹理的内容 ，以及three.js中各种IPA的应用概念。

课程要点：

    1.关于纹理的概念：

    METALNESS：金属性创建反射等

    normal:法线纹理 与光照有关

    AMBIENT OCCLUSION ： 灰度图像，伪阴影

    ROUGHNESS ：粗糙度  与光的消失有关

    纹理遵循原则： PBR原则，  物理的渲染(Physically Based Rendering)的缩写

    PBR:主要与金属性和粗糙度有关

    2.如何加载纹理

    TextureLoader // 纹理加载器

    需要了解纹理加载的进度？

    LoadingManager //    加载管理器 用于管理纹理加载的进度，或状态

    方法：onStart  onLoad  onProgress  onError

    3.uv展开

    概念：纹理放到几何体上不是随机的,坐标什么的都是有人定好的

    uv展开之后 会有uv坐标 2*2

    这里可以用缓冲几何体，展示 BoxBufferGeometry()

    4.当我们生成纹理，放到材质之后

    有很多的方法去设置纹理

    5.过滤和MIP映射

    概念：如果我们放大画面，近距离看我们的立方体，会发现纹理是模糊的，这种发生的现象就是

    MIP会发生空间映射，举个例子：GPU对我们的立方体纹理，生成一般的宽高的图片，然后不断重复下去，直到最小值

    6.两种算法 缩小过滤器，放大过滤器实现MIP （在纹理中）

    minFilter , 默认参数是线性，mipmap,线性滤镜

    magFilter ,

    用法： minFilter =  THREE.NearestFilter

 

    THREE.NearestFilter

    THREE.LinearFilter

    THREE.NearestMipmapNearestFilter

    THREE.NearestMipmapLinearFilter

    THREE.LinearMipmapNearestFilter(default)

    THREE.LinearMipmapLinearFilter

    7.纹理格式和优化

    三件事情：纹理的权重，文件的权重，图像的大小，就是分辨率；以及该纹理的数据

    前提：

    文件的大小:最好更小，更好； 可以通过图片压缩来得到更小的图片 如：TinyPNG

    尺寸：GPU能力有限，需要调整纹理，尽可能的小的纹理

    数据：数据存储在像素中，我们需要精确的方向，jpg：有损的，png:数据无损的

    难点在于找到纹理格式和分辨率的正确组合，不然会有很糟糕的性能，画面等

    8.纹理的网站

    poliigon.com

    3dtexture.me

    arroway-textures.ch

    9.制作纹理

    ps    Subs