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

> [Demo查看](http://codeffe.com/demo/hello-threejs/hello-material.html)

![material](/files/qb5w3I8J04wbtQqXG7YM)

## 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](/files/8kQIwNu1N7d3cPLFcg7D)

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

`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入门指南](http://www.ituring.com.cn/book/1272)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tenten.co/awesome/webgl/awesome-threejs-playground/docs/hello-material.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.