材质(Material)和几何体(Geometry)

1. 材质

　　一个材质结合一个几何体可以组成一个mesh对象。材质就像物体的皮肤，决定了几何体的外表。例如:皮肤定义了一个几何体看起来是否像金属、透明与否，或者显示为线框。

基本的材质如下:

1.属性介绍

1.1基础属性

　　这些属性是所有材质共有的。通过这些属性可以设置材质的透明度、是否可见以及如何被引用(ID或自定义名称)。

1.2.融合属性

　　融合决定了渲染的颜色如何与它们的后面的颜色交互。

1.3高级属性

　　这些属性与WebGL内部工作有关，如下:

2.基本的网格材质

设置材质属性的方法有两种，一种是通过构造函数传入参数的形式，如下

var meshMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff});

第二种是通过修改属性的方法设置:

        var meshMaterial = new THREE.MeshBasicMaterial();
        meshMaterial.color = new THREE.Color(0x7777ff);
        meshMaterial.name="xxx";

2.1 THREE.MeshBasicMaterial

　　一种非常简单的材质，不考虑场景中的光照的影响。使用这种材质的网格会被渲染成简单的平面多边形，而且可以显示几何体的线框。除了上面的公共属性还可以设置下面的属性:

2.2 THREE.MeshDepthMaterial

　　这种材质其外观不是由光照或某个属性决定的，而是由物体到摄像机的距离决定的。可以将这种材质与其他材质结合使用，从而很容易地创建出逐渐消失的效果。其特有属性如下:

3.高级材质 (光亮的和暗淡的材质)

　　THREE.MeshLambertMaterial和THREE.MeshPhongtMaterial材质会对光源做出反应，并且分别用来创建暗淡的材质和光亮的材质。

3.1THREE.MeshLambertMaterial 创建暗淡材质

　　创建暗淡的但是并不光亮的表面。会对光源产生影响。其特有的属性如下:

3..2 THREE.MeshPhongtMaterial创建光亮的材质

　　与上面基本一样，只是用于创建光亮的材质。其基本属性如下:

总结:

　　不是所有的材质都能对场景中的光源产生反应，如果希望一个材质计算光照的影响，应该使用高级材质(THREE.MeshLambertMaterial和THREE.MeshPhongtMaterial) 。

　　材质的大部分属性在运行时可以修改，但是有一些属性(例如side)不能修改。如果需要修改这些属性的值，需要将needsUodate属性设置为true。

2. 几何体 (重要)

　　材质决定物体的外观，几何级决定了物体的形状，Three.js提供的几何体有:

基本的几何体:

高级几何体:

1.THREE.JS提供发基本几何体

　　基本的有二维几何体:THREE.CircleGeometry,THREE.RingGeometry和THREE.PlanGeometry、ShapeGeometry。

1.1二维几何体:

　　二维几何体，看上去是扁平的，只有两个维度。

(1)THREE.PlaneGeometry(10, 14, 4, 4) 创建二维平面几何体

　　其属性如下:

(2)THREE.CircleGeometry(4, 10, 0.3 * Math.PI * 2, 0.3 * Math.PI * 2)　　创建圆形或者扇形

　　其属性如下:

创建一个完整的圆的代码如下:

new THREE.CircleGeometry(3,12)

创建一个半圆的代码如下:

new THREE.CircleGeometry(3,12,0,Math.PI)

(3)THREE.RingGeometry() 创建类似于圆的图形

　　其参数如下:

(4)THREE.ShapeGeometry 自定义二维几何体

1.2 三维几何体

1.THREE.BoxGeometry 立方体几何体 (重要)

　　创建一个长方体只需要指定宽度高度和深度就可以，属性如下:

例如:

new THREE.BoxGeometry(10, 10, 10, 1, 1, 1)

如下:

2. THREE.SphereGeometry(4, 10, 10) 创建球体

　　创建三维球体，属性如下：

3.new THREE.CylinderGeometry(20, 20, 20) 创建类似于圆柱体

　属性如下:

总结:

　　开始创建几何体时，不要直接使用那些复杂的材质，可以从简单的BasicMaterial开始，并将wireframe属性设为true，或者使用NormalMaterial。

　　对于二维图形，重要的是记住它们放置在x-y平面上的。如果想拥有一个水平的二维图形，那么需要将x轴旋转-0.5*Math.PI。如果要旋转一个二维图形或者一个开放的三维图形，记住需要将材质设置成THREE.DoubleSide,如果不这么做，那么几何体的内侧或背面将会不可见。