Hellow Three.js 之 给创建的物体赋予材质

Demo查看

material

Materials 材质

材质种类：

• LineBasicMaterial 基础线条材质 -- 可以用于THREE.Line几何体，从而创建着色的直线

• LineDashedMaterial 虚线材质 -- 类似与基础材质，但可以创建虚线效果

• MeshBasicMaterial 基础网孔材质 - 为几何体赋予一种简单的颜色，或者显示几何体的线框

• MeshDepthMaterial 深度网孔材质 - 根据网格到相机的距离，该材质决定如何给网格染色

• MeshLambertMaterial 兰伯特网孔材质 - 考虑光照的影响，可以创建颜色暗淡，不光亮的物体

• MeshNormalMaterial 法向量网孔材质 - 根据物体表面的法向量计算颜色

• MeshPhongMaterial Phong网孔材质 - 考虑光照的影响，可以创建光亮的物体

• MeshPhysicalMaterial 物理材质

• MeshStandardMaterial 基础网孔材质

• MeshToonMaterial

• PointsMaterial 点材料

• RawShaderMaterial 原始着色器材料

• ShaderMaterial 着色器材料 - 使用自定义的着色器程序，直接控制顶点的放置方式，以及像素的着色方式。

• ShadowMaterial

• SpriteMaterial 精灵材料

BasicMaterial 基本材质

使用基本材质（BasicMaterial）的物体，渲染后物体的颜色始终为该材质的颜色，而不会由于光照产生明暗、阴影效果。如果没有指定材质的颜色，则颜色是随机的。(顶图左1)

MeshBasicMaterial( parameters : Object )

parameters 为对象，默认缺省，包含各属性，常见属性：

• visible ：是否可见，默认为true

• side ：渲染面片正面或是反面，默认为正面 THREE.FrontSide，可设置为反面 THREE.BackSide，或双面 THREE.DoubleSide

• wireframe ：是否渲染线而非面，默认为 false

• color ：十六进制RGB颜色，如红色表示为 0xff0000

• map ：使用纹理贴图

材质的纹理贴图

纹理在threejs就好比皮肤，可以是各种图片贴图。

Texture

对于我们来说就是加载纹理图片，然后平铺到物体到某个面或者全部。

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时间。

---

本文部分内容参照及引用：

Three.js入门指南