材质(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,如果不这么做,那么几何体的内侧或背面将会不可见。