Hellow Three.js 之 给创建的物体赋予材质
Last updated
Last updated
材质种类：
LineBasicMaterial 基础线条材质 -- 可以用于THREE.Line几何体，从而创建着色的直线
LineDashedMaterial 虚线材质 -- 类似与基础材质，但可以创建虚线效果
MeshBasicMaterial 基础网孔材质 - 为几何体赋予一种简单的颜色，或者显示几何体的线框
MeshDepthMaterial 深度网孔材质 - 根据网格到相机的距离，该材质决定如何给网格染色
MeshLambertMaterial 兰伯特网孔材质 - 考虑光照的影响，可以创建颜色暗淡，不光亮的物体
MeshNormalMaterial 法向量网孔材质 - 根据物体表面的法向量计算颜色
MeshPhongMaterial Phong网孔材质 - 考虑光照的影响，可以创建光亮的物体
MeshPhysicalMaterial 物理材质
MeshStandardMaterial 基础网孔材质
MeshToonMaterial
PointsMaterial 点材料
RawShaderMaterial 原始着色器材料
ShaderMaterial 着色器材料 - 使用自定义的着色器程序，直接控制顶点的放置方式，以及像素的着色方式。
ShadowMaterial
SpriteMaterial 精灵材料
使用基本材质（BasicMaterial）的物体，渲染后物体的颜色始终为该材质的颜色，而不会由于光照产生明暗、阴影效果。如果没有指定材质的颜色，则颜色是随机的。(顶图左1)
MeshBasicMaterial( parameters : Object )
parameters 为对象，默认缺省，包含各属性，常见属性：
visible ：是否可见，默认为true
side ：渲染面片正面或是反面，默认为正面 THREE.FrontSide，可设置为反面 THREE.BackSide，或双面 THREE.DoubleSide
wireframe ：是否渲染线而非面，默认为 false
color ：十六进制RGB颜色，如红色表示为 0xff0000
map ：使用纹理贴图
纹理在threejs就好比皮肤，可以是各种图片贴图。
对于我们来说就是加载纹理图片，然后平铺到物体到某个面或者全部。
Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding )
Image：这是一个图片类型，基本上它有ImageUtils来加载，如下代码 var image = THREE.ImageUtils.loadTexture(url); url 是一个图片地址, 这不地址必须是 http://xxx/imgName.jpg 这样的。
Mapping：是一个THREE.UVMapping()类型，它表示的是纹理坐标。
wrapS：表示x轴的纹理的方式，
wrapT：表示y轴的纹理回环方式。
format：表示加载的图片的格式，这个参数可以取值THREE.RGBAFormat，RGBFormat等。THREE.RGBAFormat表示每个像素点要使用四个分量表示，分别是红、绿、蓝、透明来表示。RGBFormat则不使用透明，也就是说纹理不会有透明的效果。
type：表示存储纹理的内存的每一个字节的格式，是有符号，还是没有符号，是整形，还是浮点型。不过这里默认是无符号型（THREE.UnsignedByteType）。
anisotropy：各向异性过滤。使用各向异性过滤能够使纹理的效果更好，但是会消耗更多的内存、CPU、GPU时间。
本文部分内容参照及引用：
