threejs

1、图形

1.1立方几何体（BoxGeometry）

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
1
2
3
4

BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

width — X轴上面的宽度，默认值为1。
height — Y轴上面的高度，默认值为1。
depth — Z轴上面的深度，默认值为1。
widthSegments — （可选）宽度的分段数，默认值是1。
heightSegments — （可选）宽度的分段数，默认值是1。
depthSegments — （可选）宽度的分段数，默认值是1。

1.2圆形几何体（CircleGeometry）

var geometry = new THREE.CircleGeometry( 5, 32 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var circle = new THREE.Mesh( geometry, material );
scene.add( circle );
1
2
3
4

CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float)

radius — 圆形的半径，默认值为1
segments — 分段（三角面）的数量，最小值为3，默认值为8。
thetaStart — 第一个分段的起始角度，默认为0。（three o’clock position）
thetaLength — 圆形扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆。

1.3圆锥几何体（ConeGeometry）

var geometry = new THREE.ConeGeometry( 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cone = new THREE.Mesh( geometry, material );
scene.add( cone );
1
2
3
4

ConeGeometry(radius : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)

radius — 圆锥底部的半径，默认值为1。
height — 圆锥的高度，默认值为1。
radialSegments — 圆锥侧面周围的分段数，默认为8。
heightSegments — 圆锥侧面沿着其高度的分段数，默认值为1。
openEnded — 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。
thetaStart — 第一个分段的起始角度，默认为0。（three o’clock position）
thetaLength — 圆锥底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆锥。

1.4圆柱几何体（CylinderGeometry）

var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );
1
2
3
4

CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)

radiusTop — 圆柱的顶部半径，默认值是1。
radiusBottom — 圆柱的底部半径，默认值是1。
height — 圆柱的高度，默认值是1。
radialSegments — 圆柱侧面周围的分段数，默认为8。
heightSegments — 圆柱侧面沿着其高度的分段数，默认值为1。
openEnded — 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。
thetaStart — 第一个分段的起始角度，默认为0。（three o’clock position）
thetaLength — 圆柱底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆柱。

1.5十二面几何体（DodecahedronGeometry）

DodecahedronGeometry(radius : Float, detail : Integer)

radius — 十二面体的半径，默认值为1。
detail — 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个十二面体。

1.6边缘几何体（EdgesGeometry）

var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
var edges = new THREE.EdgesGeometry( geometry );
var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
scene.add( line );
1
2
3
4

EdgesGeometry( geometry : Geometry, thresholdAngle : Integer )

geometry — 任何一个几何体对象。
thresholdAngle — 仅当相邻面的法线之间的角度（单位为角度）超过这个值时，才会渲染边缘。默认值为1。

1.7挤压几何体（ExtrudeGeometry）

var length = 12, width = 8;

var shape = new THREE.Shape();
shape.moveTo( 0,0 );
shape.lineTo( 0, width );
shape.lineTo( length, width );
shape.lineTo( length, 0 );
shape.lineTo( 0, 0 );

var extrudeSettings = {
	steps: 2,
	depth: 16,
	bevelEnabled: true,
	bevelThickness: 1,
	bevelSize: 1,
	bevelSegments: 1
};

var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

ExtrudeGeometry(shapes : Array, options : Object)

shapes — 形状或者一个包含形状的数组。
options — 一个包含有下列参数的对象：

• curveSegments — int，曲线上点的数量，默认值是12。
• steps — int，用于沿着挤出样条的深度细分的点的数量，默认值为1。
• depth — float，挤出的形状的深度，默认值为100。
• bevelEnabled — bool，对挤出的形状应用是否斜角，默认值为true。
• bevelThickness — float，设置原始形状上斜角的厚度。默认值为6。
• bevelSize — float。斜角与原始形状轮廓之间的延伸距离，默认值为bevelThickness-2。
• bevelSegments — int。斜角的分段层数，默认值为3。
• extrudePath — THREE.CurvePath对象。一条沿着被挤出形状的三维样条线。
• UVGenerator — Object。提供了UV生成器函数的对象。

该对象将一个二维形状挤出为一个三维几何体。

当使用这个几何体创建Mesh的时候，如果你希望分别对它的表面和它挤出的侧面使用单独的材质，你可以使用一个材质数组。 第一个材质将用于其表面；第二个材质则将用于其挤压出的侧面。

1.8二十面几何体（IcosahedronGeometry）

IcosahedronGeometry(radius : Float, detail : Integer)

radius — 二十面体的半径，默认为1。
detail — 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个二十面体。当这个值大于1的时候，实际上它将变成一个球体。

1.9车削几何体（LatheGeometry）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cqORpUG8-1658299485369)(C:\Users\hp\Desktop\threejs笔记\img\image-20220705103547418.png)]

var points = [];
for ( var i = 0; i < 10; i ++ ) {
	points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
}
var geometry = new THREE.LatheGeometry( points );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var lathe = new THREE.Mesh( geometry, material );
scene.add( lathe );
1
2
3
4
5
6
7
8

LatheGeometry(points : Array, segments : Integer, phiStart : Float, phiLength : Float)

points — 一个Vector2对象数组。每个点的X坐标必须大于0。
segments — 要生成的车削几何体圆周分段的数量，默认值是12。
phiStart — 以弧度表示的起始角度，默认值为0。
phiLength — 车削部分的弧度（0-2PI）范围，2PI将是一个完全闭合的、完整的车削几何体，小于2PI是部分车削。默认值是2PI。

2.0八面几何体（OctahedronGeometry）

OctahedronGeometry(radius : Float, detail : Integer)

radius — 八面体的半径，默认值为1。
detail — 默认值为0，将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个八面体。

2.1参数化几何体（ParametricGeometry）

var geometry = new THREE.ParametricGeometry( THREE.ParametricGeometries.klein, 25, 25 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var klein = new THREE.Mesh( geometry, material );
scene.add( klein );
1
2
3
4

ParametricGeometry(func : Function, slices : Integer, stacks : Integer)

func — A function that takes in a u and v value each between 0 and 1 and modifies a third Vector3 argument
slices — The count of slices to use for the parametric function
stacks — The count of stacks to use for the parametric function

2.2平面几何体（PlaneGeometry）

var geometry = new THREE.PlaneGeometry( 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry, material );
scene.add( plane );
1
2
3
4

PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)

width — 平面沿着X轴的宽度。默认值是1。
height — 平面沿着Y轴的高度。默认值是1。
widthSegments — （可选）平面的宽度分段数，默认值是1。
heightSegments — （可选）平面的高度分段数，默认值是1。

2.3多面几何体（PolyhedronGeometry）

var verticesOfCube = [
    -1,-1,-1,    1,-1,-1,    1, 1,-1,    -1, 1,-1,
    -1,-1, 1,    1,-1, 1,    1, 1, 1,    -1, 1, 1,
];

var indicesOfFaces = [
    2,1,0,    0,3,2,
    0,4,7,    7,3,0,
    0,1,5,    5,4,0,
    1,2,6,    6,5,1,
    2,3,7,    7,6,2,
    4,5,6,    6,7,4
];

var geometry = new THREE.PolyhedronGeometry( verticesOfCube, indicesOfFaces, 6, 2 );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

PolyhedronGeometry(vertices : Array, indices : Array, radius : Float, detail : Integer)

vertices — 一个顶点Array（数组）：[1,1,1, -1,-1,-1, … ]。
indices — 一个构成面的索引Array（数组）， [0,1,2, 2,3,0, … ]。
radius — Float - 最终形状的半径。
detail — Integer - 将对这个几何体细分多少个级别。细节越多，形状就越平滑。

2.4圆环几何体（RingGeometry）

var geometry = new THREE.RingGeometry( 1, 5, 32 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
1
2
3
4

RingGeometry(innerRadius : Float, outerRadius : Float, thetaSegments : Integer, phiSegments : Integer, thetaStart : Float, thetaLength : Float)

innerRadius — 内部半径，默认值为0.5。
outerRadius — 外部半径，默认值为1。
thetaSegments — 圆环的分段数。这个值越大，圆环就越圆。最小值为3，默认值为8。
phiSegments — 最小值为1，默认值为8。
thetaStart — 起始角度，默认值为0。
thetaLength — 圆心角，默认值为Math.PI * 2。

2.5形状几何体（ShapeGeometry）

var x = 0, y = 0;

var heartShape = new THREE.Shape();

heartShape.moveTo( x + 5, y + 5 );
heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y );
heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7,x - 6, y + 7 );
heartShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 );
heartShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 );
heartShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y );
heartShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 );

var geometry = new THREE.ShapeGeometry( heartShape );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

ShapeGeometry(shapes : Array, curveSegments : Integer)

shapes — 一个单独的shape，或者一个包含形状的Array。
curveSegments - Integer - 每一个形状的分段数，默认值为12。

2.6球几何体（SphereGeometry）

var geometry = new THREE.SphereGeometry( 5, 32, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
1
2
3
4

SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)

radius — 球体半径，默认为1。
widthSegments — 水平分段数（沿着经线分段），最小值为3，默认值为8。
heightSegments — 垂直分段数（沿着纬线分段），最小值为2，默认值为6。
phiStart — 指定水平（经线）起始角度，默认值为0。。
phiLength — 指定水平（经线）扫描角度的大小，默认值为 Math.PI * 2。
thetaStart — 指定垂直（纬线）起始角度，默认值为0。
thetaLength — 指定垂直（纬线）扫描角度大小，默认值为 Math.PI。

2.7四面几何体（TetrahedronGeometry）

TetrahedronGeometry(radius : Float, detail : Integer)

radius — 四面体的半径，默认值为1。
detail — 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个四面体。

2.8文本几何体（TextGeometry）

var loader = new THREE.FontLoader();

loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {

	var geometry = new THREE.TextGeometry( 'Hello three.js!', {
		font: font,
		size: 80,
		height: 5,
		curveSegments: 12,
		bevelEnabled: true,
		bevelThickness: 10,
		bevelSize: 8,
		bevelSegments: 5
	} );
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

TextGeometry(text : String, parameters : Object)

text — 将要显示的文本。
parameters — 包含有下列参数的对象：

• font — THREE.Font的实例。
• size — Float。字体大小，默认值为100。
• height — Float。挤出文本的厚度。默认值为50。
• curveSegments — Integer。（表示文本的）曲线上点的数量。默认值为12。
• bevelEnabled — Boolean。是否开启斜角，默认为false。
• bevelThickness — Float。文本上斜角的深度，默认值为20。
• bevelSize — Float。斜角与原始文本轮廓之间的延伸距离。默认值为8。
• bevelSegments — Integer。斜角的分段数。默认值为3。

2.9圆环几何体（TorusGeometry）

var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var torus = new THREE.Mesh( geometry, material );
scene.add( torus );
1
2
3
4

TorusGeometry(radius : Float, tube : Float, radialSegments : Integer, tubularSegments : Integer, arc : Float)

radius - 圆环的半径，从圆环的中心到管道（横截面）的中心。默认值是1。
tube — 管道的半径，默认值为0.4。
radialSegments — 圆环的分段数，默认值为8。
tubularSegments — 管道的分段数，默认值为6。
arc — 圆环的中心角（单位是弧度），默认值为Math.PI * 2。

3.0圆环扭结几何体（TorusKnotGeometry）

var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var torusKnot = new THREE.Mesh( geometry, material );
scene.add( torusKnot );
1
2
3
4

TorusKnotGeometry(radius : Float, tube : Float, tubularSegments : Integer, radialSegments : Integer, p : Integer, q : Integer)

• radius - 圆环的半径，默认值为1。
• tube — 管道的半径，默认值为0.4。
• tubularSegments — 管道的分段数量，默认值为64。
• radialSegments — 横截面分段数量，默认值为8。
• p — 这个值决定了几何体将绕着其旋转对称轴旋转多少次，默认值是2。
• q — 这个值决定了几何体将绕着其内部圆环旋转多少次，默认值是3。

3.1管道几何体（TubeGeometry）

function CustomSinCurve( scale ) {
	THREE.Curve.call( this );
	this.scale = ( scale === undefined ) ? 1 : scale;
}

CustomSinCurve.prototype = Object.create( THREE.Curve.prototype );
CustomSinCurve.prototype.constructor = CustomSinCurve;

CustomSinCurve.prototype.getPoint = function ( t ) {
	var tx = t * 3 - 1.5;
	var ty = Math.sin( 2 * Math.PI * t );
	var tz = 0;
	return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );

};

var path = new CustomSinCurve( 10 );
var geometry = new THREE.TubeGeometry( path, 20, 2, 8, false );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

TubeGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean)

path — Curve - 一个由基类Curve继承而来的路径。
tubularSegments — Integer - 组成这一管道的分段数，默认值为64。
radius — Float - 管道的半径，默认值为1。
radialSegments — Integer - 管道横截面的分段数目，默认值为8。
closed — Boolean 管道的两端是否闭合，默认值为false。

3.2网格几何体（WireframeGeometry）

var geometry = new THREE.SphereBufferGeometry( 100, 100, 100 );
var wireframe = new THREE.WireframeGeometry( geometry );
var line = new THREE.LineSegments( wireframe );
line.material.depthTest = false;
line.material.opacity = 0.25;
line.material.transparent = true;

scene.add( line );
1
2
3
4
5
6
7
8

3.3立方体(CubeGeometry)

Three.CubeGeometry(width,height,depth,widthSegments,heightSegments,depthSegments)

width（宽度）：x方向上的长度；

height（高度）：y方向上的长度；

depth（深度）：z方向上的长度;

widthSegments：沿x轴的方向，将面分成多少份，默认值是1;

heightSegments：沿y轴的方向，将面分成多少份，默认值是1;

depthSegments：沿z轴的方向，将面分成多少份，默认值是1。

2、属性

3、API

4、方法

设置场景背景色

   renderer.setClearColor(new THREE.Color(0x000000));
1

添加坐标轴

 var axes = new THREE.AxesHelper(20);
    scene.add(axes);
1
2

设置物体旋转方向和位置

 plane.rotation.x = -0.5 * Math.PI;
 plane.position.set(15, 0, 0);
1
2

设置材质为线框 wireframe:true

var cubeMaterial = new THREE.MeshBasicMaterial({
        color: 0xFF0000,
        wireframe: true
    });
1
2
3
4

开启灯光阴影

spotLight.castShadow = true;
1

开始物体阴影

sphere.castShadow = true;
1

开启平面接受阴影

plane.receiveShadow = true;
1

开启渲染器阴影

renderer.shadowMap.enabled = true;
1

控制阴影精细程度

spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
spotLight.shadow.camera.far = 130;
spotLight.shadow.camera.near = 40;
spotLight.shadow.camera.fov = 30;
1
2
3
4

窗口自适应

window.addEventListener('resize', onWindowResize, false);
function resize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }    
1
2
3
4
5
6

遍历

 scene.traverse(function (e) {
 	console.log(e) //Scene Mesh AmbientLight SpotLight
 	
 })
 
1
2
3
4
5

强制设置所有材质

见9.1.1

  scene.overrideMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff
    });
1
2
3

雾化效果

两种

//颜色 near近处属性值  far远处属性值
scene.fog = new THREE.Fog(0xffffff, 10, 100);
//颜色 浓度
scene.fog = new THREE.FogExp2(0xffffff, 0.015);
1
2
3
4

材质两面可见

var material = new THREE.MeshBasicMaterial({
  color: 0x0000ff, //颜色
  side: THREE.DoubleSide //两面可见
}); 
1
2
3
4

以顶点颜色为基准色

var material = new THREE.PointsMaterial({
  // 使用顶点颜色数据渲染模型，不需要再定义color属性
  // color: 0xff0000,
  vertexColors: THREE.VertexColors, //以顶点颜色为准
  size: 10.0 //点对象像素尺寸
});
1
2
3
4
5
6

顶点创建面

new THREE.Vector3(0, 0, 0) 表示坐标x:0,y:0,z:0

let p1 = new THREE.Vector3(0, 0, 0);
let p2 = new THREE.Vector3(10, 0, 0);
let p3 = new THREE.Vector3(0, 0, 10);
let p4 = new THREE.Vector3(10, 0, 10);

1
2
3
4
5

创建Geometry, 并将顶点添加到Geometry的顶点数组vertices中

let geometry = new THREE.Geometry();
	// 顶点添加到Geometry的顶点数组vertices中
geometry.vertices.push(p1, p2, p3, p4);
1
2
3

创建点模型对象

// 必须使用对应点的材质，size为点的大小
	let  material = new THREE.PointsMaterial( {color: 'red', size:2} );
	
    let  mesh = new THREE.Points( geometry, material );
    scene.add( mesh );
1
2
3
4
5

new THREE.Face3(0,2,1)

0,2,1:上面geometry.vertices.push(p1, p2, p3, p4)后geometry的下标索引值

let face1 = new THREE.Face3(0, 2, 1, new THREE.Vector3(), new THREE.Color(), 0);
let face2 = new THREE.Face3(1, 2, 3, new THREE.Vector3(), new THREE.Color(), 1);
1
2

var material = new THREE.MeshStandardMaterial( { color : 0x00cc00 } );

//创建仅有一个三角面片的几何体
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( -50, -50, 0 ) );
geometry.vertices.push( new THREE.Vector3(  50, -50, 0 ) );
geometry.vertices.push( new THREE.Vector3(  50,  50, 0 ) );

//利用顶点 0, 1, 2 创建一个面
var normal = new THREE.Vector3( 0, 1, 0 ); //optional
var color = new THREE.Color( 0xffaa00 ); //optional
var materialIndex = 0; //optional
var face = new THREE.Face3( 0, 1, 2, normal, color, materialIndex );

//将创建的面添加到几何体的面的队列
geometry.faces.push( face );

//如果没有特别指明，面和顶点的法向量可以通过如下代码自动计算
geometry.computeFaceNormals();
geometry.computeVertexNormals(); // 通过平均面法线来计算顶点法线，效果更光滑

scene.add( new THREE.Mesh( geometry, material ) );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Face3( a : Integer, b : Integer, c : Integer, normal : Vector3, color : Color, materialIndex : Integer )

a — 顶点 A 的索引。
b — 顶点 B 的索引。
c — 顶点 C 的索引。

normal — (可选) 面的法向量 (Vector3) 或顶点法向量队列。 如果参数传入单一矢量，则用该量设置面的法向量 .normal，如果传入的是包含三个矢量的队列， 则用该量设置 .vertexNormals

color — (可选) 面的颜色值 color 或顶点颜色值的队列。 如果参数传入单一矢量，则用该量设置 .color，如果传入的是包含三个矢量的队列， 则用该量设置 .vertexColors

materialIndex — (可选) 材质队列中与该面对应的材质的索引。

设置颜色

贴图的使用jpg

  var textureGrass = THREE.ImageUtils.loadTexture("../assets/textures/ground/grasslight-big.jpg");
        textureGrass.wrapS = THREE.RepeatWrapping;
        textureGrass.wrapT = THREE.RepeatWrapping;
        textureGrass.repeat.set(4, 4);

  var planeGeometry = new THREE.PlaneGeometry(1000, 200, 20, 20);
        var planeMaterial = new THREE.MeshLambertMaterial({map: textureGrass});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.receiveShadow = true;
1
2
3
4
5
6
7
8
9

高斯帕曲线 Gosper curve

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FmP3oWFb-1658299485371)(C:\Users\hp\Desktop\threejs笔记\img\image-20220705092317833.png)]

var points = gosper(4, 60);
1

计算线段顶点之间的距离

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rj1vzuY7-1658299485372)(C:\Users\hp\Desktop\threejs笔记\img\image-20220705094210485.png)]

//获取gosper曲线的x、y坐标点
var points = gosper(3, 60);
 
//为每个坐标创建一个顶点，并把它们放在lines属性中
var lines = new THREE.Geometry();
//同时每个坐标还会计算一个颜色值，用来设置colors属性
var colors = [];
var i = 0;
points.forEach(function (e) {
    lines.vertices.push(new THREE.Vector3(e.x, e.z, e.y));
    colors[i] = new THREE.Color(0xffffff);
    //这里使用setHSL()方法设置颜色（色调、饱和度、亮度）
    colors[i].setHSL(e.x / 100 + 0.5, (  e.y * 20 ) / 300, 0.8);
    i++;
});
lines.colors = colors;
 
//使用虚线材质的话，必须调用 computeLineDistances()方法
lines.computeLineDistances();
 
//创建线段基础材质
var material = new THREE.LineDashedMaterial({
    vertexColors: true,
    color: 0xffffff,
    dashSize: 2,
    gapSize: 2,
    scale: 2
});
 
//通过创建的材质结合几何体即可创建一个 THREE.Line网格。
var line = new THREE.Line(lines, material);
line.position.set(25, -30, -60);
scene.add(line);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

创建有多个材质的对象

 var meshMaterial = new THREE.MeshNormalMaterial();
 var wireFrameMat = new THREE.MeshBasicMaterial();
 // create a multimaterial
 var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
1
2
3
4

applyMatrix

为每个对象创建一个Matrix4，然后我们将矩阵与该矩阵相乘以应用后续操作。

x轴移 -390，y轴移 -174。

   geom.applyMatrix(new THREE.Matrix4().makeTranslation(-390, -174, 0));
1

绕Z轴旋转-180° * 0.25=45°

sphere_matrix.multiply(new THREE.Matrix4().makeRotationZ(-Math.PI * 0.25));
1

获取name属性

cloud.name = "particles";

scene.getObjectByName("particles")
1
2
3

生成法向量

geometry.computeFaceNormals();
geometry.computeVertexNormals();
1
2

加载obj模型

mtlLoader.load("../models/gltf/QITA.mtl", (mtl) => {
		mtl.preload();
		const objLoader = new THREE.OBJLoader();
		objLoader.setMaterials(mtl);

		// 加载模型
		objLoader.load("../models/gltf/QITA.obj", (root) => {
			root.traverse((child) => {
				if (child instanceof THREE.Mesh) {
					child.material.side = THREE.DoubleSide;
					child.material = new THREE.MeshBasicMaterial({
						color: new THREE.Color("rgb(12,106,201)"),
						transparent: true,
						opacity: 0.2, //设置透明度
					});
				}
			});
			root.name = "fangzi"
			scene.add(root);
		});
	});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

画线轨迹

var lineMaterial = new THREE.LineBasicMaterial({
		color: 0xffffff
	});
	const lineGeometry = new THREE.BufferGeometry()
	const pointsArray = new Array()
	pointsArray.push(new THREE.Vector3(x, y, z))//点坐标
	//用这个api传入顶点数组
	lineGeometry.setFromPoints(pointsArray)
	var line = new THREE.Line(lineGeometry, lineMaterial);
	scene.add(line);
1
2
3
4
5
6
7
8
9
10

移除模型

	scene.remove(scene.getObjectByName("chezi"))
1

经纬度转为坐标

	function getPosition(longitude, latitude, radius) {//经度，纬度，半径
		var lg = THREE.Math.degToRad(longitude);
		var lt = THREE.Math.degToRad(latitude);
		var temp = radius * Math.cos(lt);
		var x = temp * Math.sin(lg);
		var y = radius * Math.sin(lt);
		var z = temp * Math.cos(lg);
		return {
			x: x,
			y: y,
			z: z
		}
	}
1
2
3
4
5
6
7
8
9
10
11
12
13

	function createPosition(lnglat) {
		let spherical = new THREE.Spherical
		spherical.radius = 100;
		const lng = lnglat[0]
		const lat = lnglat[1]
		const theta = (lng + 90) * (Math.PI / 180)
		const phi = (90 - lat) * (Math.PI / 180)
		spherical.phi = phi; // phi是方位面（水平面）内的角度，范围0~360度
		spherical.theta = theta; // theta是俯仰面（竖直面）内的角度，范围0~180度
		let position = new THREE.Vector3()
		position.setFromSpherical(spherical)
		return position
	}
1
2
3
4
5
6
7
8
9
10
11
12
13

点击获取模型

只有基础模型可获取

	window.addEventListener('click', onMouseClick, false);

	var raycaster = new THREE.Raycaster()
	var mouse = new THREE.Vector2()

	function onMouseClick(event) {
		var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) *
			2 + 1, 0.5);
		vector = vector.unproject(camera);
		var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
		var intersects = raycaster.intersectObjects(scene.children);

		if (intersects.length) console.log(intersects[0].object.name);
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

.remove()和·dispose()方法区别

删除场景对象中Scene一个子对象Group，并释放组对象Group中所有网格模型几何体的顶点缓冲区占用内存

// 递归遍历组对象group释放所有后代网格模型绑定几何体占用内存
group.traverse(function(obj) {
  if (obj.type === 'Mesh') {
    obj.geometry.dispose();//废弃模型、材质
    obj.material.dispose();
  }
})
// 删除场景对象scene的子对象group
scene.remove(group);//删除对象
1
2
3
4
5
6
7
8
9

//终极奥义Threejs内存清除，清的渣都不剩
function disposeChild(mesh) {
    if (mesh instanceof THREE.Mesh) {
      if (mesh.geometry?.dispose) {
        mesh.geometry.dispose(); //删除几何体
      }
      if (mesh.material?.dispose) {
        mesh.material.dispose(); //删除材质
      }
      if (mesh.material?.texture?.dispose) {
        mesh.material.texture.dispose();
      }
    }
    if (mesh instanceof THREE.Group) {
      mesh.clear();
    }
    if (mesh instanceof THREE.Object3D) {
      mesh.clear();
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

matrixAutoUpdate、updateMatrix

默认情况下，matrixAutoUpdate属性设置为true，并且将自动重新计算矩阵。
如果对象是静态的，或者您希望在重新计算时手动控制，则可以通过将属性设置为false来获得更好的性能：

object.matrixAutoUpdate = false;
//更改任何属性后，手动更新矩阵：
object.updateMatrix();
1
2
3

控制器阻尼

鼠标滑动模型，有缓冲效果

orbitControl.enableDamping = true
1

双击进入全屏和退出全屏

window.addEventListener("dblclick",()=>{
    const fullScreenElement=document.fullscreenElement;
    if(!fullScreenElement){
        renderer.domElement.requestFullscreen()
    }else{
        domElement.exitFullscreen()
    }
})
1
2
3
4
5
6
7
8

dat.GUI()

const gui=new dat.GUI()
gui.add(cube.position,"x").min(0).max(5).step(0.01).name("移动x轴").onChange((value)=>{}).onFinishChange((value)=>{})

//修改物体颜色
const params={
    color:"#ffffff",
    fn:()=>{
        gsap.to(cube.position,{x:5,duration:2,yoyo:true,repeat:1})
    }
}
gui.addColor(params,"color").onChange((value)=>{
    cube.material.color.set(value)
})
gui.add(cube,"visible").name("是否显示")
gui.add(params,"fn").name("立方体运动")

var folder=gui.addFolder("设置文件夹")
folder.add(cube.material,"wireframe")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

gamma

渲染计算后的模型仍在 linear 空间, 展示到屏幕时需要通过 gamma 校正, 将 linear 转换回 sRGB 空间, 也就是进行 gamma 校正, threejs 中可通过设置 gammaOutput 和 gammaFactor, 进行 gamma 校正, 校正后的 gamma2.2 颜色空间与 sRGB 相似.

// 定义 gammaOutput 和 gammaFactor
renderer.gammaOutput = true;
renderer.gammaFactor = 2.2;   // 电脑显示屏的 gammaFactor 为 2.2
1
2
3

GLTFLoader.parse报错解决办法

GLTFLoader.js:185 SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at GLTFLoader.parse (GLTFLoader.js:315:21)
    at Object.onLoad (GLTFLoader.js:205:11)
    at three.module.js:39584:38
1
2
3
4
5

使用 import Flamingo from ‘./models/Flamingo.glb’ 导入模型

5、相机

1.1摄像机阵列（ArrayCamera）

ArrayCamera 用于更加高效地使用一组已经预定义的摄像机来渲染一个场景。这将能够更好地提升VR场景的渲染性能。
一个 ArrayCamera 的实例中总是包含着一组子摄像机，应当为每一个子摄像机定义viewport(边界)这个属性，这一属性决定了由该子摄像机所渲染的视口区域的大小。

1.2正交相机（OrthographicCamera）

在这种投影模式下，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。

这对于渲染2D场景或者UI元素是非常有用的。

var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
scene.add( camera );
1
2

OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )

left — 摄像机视锥体左侧面。
right — 摄像机视锥体右侧面。
top — 摄像机视锥体上侧面。
bottom — 摄像机视锥体下侧面。
near — 摄像机视锥体近端面。
far — 摄像机视锥体远端面。

属性

.bottom : Float
摄像机视锥体下侧面。

.far : Float
摄像机视锥体远端面，其默认值为2000。

其值的有效范围介于near（摄像机视锥体近端面）和无穷大之间。

.isOrthographicCamera : Boolean
用于测试这个类或者派生类是否为OrthographicCameras，默认为true。

你不应当对这个属性进行改变,因为它在内部由渲染器使用，以用于优化。

.left : Float
摄像机视锥体左侧面。

.near : Float
摄像机视锥体近端面。其默认值为0.1.

其值的有效范围介于0和far（摄像机视锥体远端面）之间。
请注意，和PerspectiveCamera不同，0对于OrthographicCamera的近端面来说是一个有效值。

.right : Float
摄像机视锥体右侧面。

.top : Float
摄像机视锥体上侧面。

.view : Object
这个值是由setViewOffset来设置的，其默认值为null。

.zoom : number
获取或者设置摄像机的缩放倍数，其默认值为1。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

方法

.setViewOffset ( fullWidth : Float, fullHeight : Float, x : Float, y : Float, width : Float, height : Float ) : null
fullWidth — 多视图的全宽设置
fullHeight — 多视图的全高设置
x — 副摄像机的水平偏移
y — 副摄像机的垂直偏移
width — 副摄像机的宽度
height — 副摄像机的高度

在较大的viewing frustum（视锥体）中设置偏移量，对于多窗口或者多显示器的设置是很有用的。 对于如何使用它，请查看PerspectiveCamera中的示例。

.clearViewOffset () : null
清除任何由.setViewOffset设置的偏移量。

.updateProjectionMatrix () : null
更新摄像机投影矩阵。在任何参数被改变以后必须被调用。

.toJSON () : JSON
使用JSON格式来返回摄像机数据。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

1.3透视相机（PerspectiveCamera）

这一摄像机使用perspective projection（透视投影）来进行投影。

这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面

属性

.aspect : Float
摄像机视锥体的长宽比，通常是使用画布的宽/画布的高。默认值是1（正方形画布）。

.far : Float
摄像机的远端面，默认值是2000。

其有效值范围是在当前摄像机near plane（近端面）的值到无穷远之间。

.filmGauge : Float
胶片尺寸，其默认值为35（毫米）。 这个参数不会影响摄像机的投影矩阵，除非.filmOffset被设置为了一个非零的值。

.filmOffset : Float
水平偏离中心偏移量，和.filmGauge单位相同。默认值为0。

.focus : Float
用于立体视觉和景深效果的物体的距离。 这个参数不会影响摄像机的投影矩阵，除非使用了StereoCamera。 默认值是10。

.fov : Float
摄像机视锥体垂直视野角度，从视图的底部到顶部，以角度来表示。默认值是50。

.isPerspectiveCamera : Boolean
用于测试这个类或者派生类是否为PerspectiveCameras，默认为true。

你不应当对这个属性进行改变,因为它在内部由渲染器使用，以用于优化。

.near : Float
摄像机的近端面，默认值是0.1。

其有效值范围是0到当前摄像机far plane（远端面）的值之间。 请注意，和OrthographicCamera不同，0对于PerspectiveCamera的近端面来说不是一个有效值。

.view : Object
Frustum window specification or null. 这个值使用.setViewOffset方法来进行设置，使用.clearViewOffset方法来进行清除。

.zoom : number
获取或者设置摄像机的缩放倍数，其默认值为1。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

方法

.clearViewOffset () : null
清除任何由.setViewOffset设置的偏移量。

.getEffectiveFOV () : Float
结合.zoom（缩放倍数），以角度返回当前垂直视野角度。

.getFilmHeight () : Float
返回当前胶片上图像的高，如果.aspect小于或等于1（肖像格式、纵向构图），则结果等于.filmGauge。

.getFilmWidth () : Float
返回当前胶片上图像的宽，如果.aspect大于或等于1（景观格式、横向构图），则结果等于.filmGauge。

.getFocalLength () : Float
返回当前.fov（视野角度）相对于.filmGauge（胶片尺寸）的焦距。

.setFocalLength ( focalLength : Float ) : null
通过相对于当前.filmGauge的焦距，设置FOV。

默认情况下，焦距是为35mm（全画幅）摄像机而指定的。

.setViewOffset ( fullWidth : Float, fullHeight : Float, x : Float, y : Float, width : Float, height : Float ) : null
fullWidth — 多视图的全宽设置
fullHeight — 多视图的全高设置
x — 副摄像机的水平偏移
y — 副摄像机的垂直偏移
width — 副摄像机的宽度
height — 副摄像机的高度

在较大的viewing frustum（视锥体）中设置偏移量，对于多窗口或者多显示器的设置是很有用的。

例如，如果你有一个3x2的显示器阵列，每个显示器分辨率都是1920x1080，且这些显示器排列成像这样的网格：
+---+---+---+
| A | B | C |
+---+---+---+
| D | E | F |
+---+---+---+
		
那对于每个显示器，你可以这样来设置、调用：
var w = 1920;
var h = 1080;
var fullWidth = w * 3;
var fullHeight = h * 2;

// A
camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 0, w, h );
// B
camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 0, w, h );
// C
camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 0, w, h );
// D
camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 1, w, h );
// E
camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 1, w, h );
// F
camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 1, w, h );请注意，显示器的不必具有相同的大小，或者不必在网格中。
.updateProjectionMatrix () : null
更新摄像机投影矩阵。在任何参数被改变以后必须被调用。

.toJSON () : JSON
使用JSON格式来返回摄像机数据。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

1.4立体相机（StereoCamera）

双透视摄像机（立体相机）常被用于创建3D Anaglyph（3D立体影像）或者Parallax Barrier（视差效果）。

StereoCamera( )

属性

.aspect : Float
默认值是1.

.eyeSep : Float
默认值是0.064.

.cameraL : PerspectiveCamera
左摄像机，它被加入到了layer 1中 —— 需要被左摄像机渲染的物体也应当要加入到这一层中。

.cameraR : PerspectiveCamera
右摄像机，它被加入到了layer 2中 —— 需要被右摄像机渲染的物体也应当要加入到这一层中。
1
2
3
4
5
6
7
8
9
10
11

方法

.update ( camera : PerspectiveCamera ) : null
基于摄像机通过场景，更新立体摄像机。
1
2

6、灯光

1.0光源的基类(Light)

所有其他的光类型都继承了该类描述的属性和方法。

Light( color : Integer, intensity : float )

color - (可选参数) 16进制表示光的颜色。 缺省值 0xffffff (白色)。
intensity - (可选参数) 光照强度。 缺省值 1。

属性

.color : Color
光源的颜色。如果构造的时候没有传递，默认会创建一个新的 Color 并设置为白色。

.intensity : Float
光照的强度，或者说能量。 在 physically correct 模式下, color 和强度 的乘积被解析为以坎德拉（candela）为单位的发光强度。 默认值 - 1.0
.isLight : Boolean
用来校验这个类或者派生类是不是平行光。默认是 true。
1
2
3
4
5
6
7

方法

.copy ( source : Light ) : Light
从source复制 color, intensity 的值到当前光源对象中。

.toJSON ( meta : String ) : JSON
以JSON格式返回光数据。
1
2
3
4
5

1.1环境光(AmbientLight)

环境光会均匀的照亮场景中的所有物体。

环境光不能用来投射阴影，因为它没有方向。

AmbientLight( color : Integer, intensity : Float )

color - (参数可选）颜色的rgb数值。缺省值为 0xffffff。
intensity - (参数可选)光照的强度。缺省值为 1。

var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );
1
2

属性

.castShadow : Boolean
这个参数在对象构造的时候就被设置成了 undefined 。因为环境光不能投射阴影。

.isAmbientLight : Boolean
用来校验这个类或者派生类是不是环境光.默认是 true。

1
2
3
4
5
6

1.2平行光（DirectionalLight）

平行光是沿着特定方向发射的光。这种光的表现像是无限远,从它发出的光线都是平行的。常常用平行光来模拟太阳光 的效果; 太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的。

DirectionalLight( color : Integer, intensity : Float )

color - (可选参数) 16进制表示光的颜色。 缺省值为 0xffffff (白色)。
intensity - (可选参数) 光照的强度。缺省值为1。

var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
scene.add( directionalLight );
1
2

属性

.castShadow : Boolean
如果设置为 true 该平行光会产生动态阴影。 警告: 这样做的代价比较高而且需要一直调整到阴影看起来正确. 查看 DirectionalLightShadow 了解详细信息。该属性默认为 false。

.isDirectionalLight : Boolean
用来校验这个类或者派生类是不是平行光.默认是 true。

不应该去改变这个变量,因为内部使用这个变量做了些优化的工作。

.position : Vector3
假如这个值设置等于 Object3D.DefaultUp (0, 1, 0),那么光线将会从上往下照射。

.shadow : DirectionalLightShadow
这个 DirectionalLightShadow 对象用来计算该平行光产生的阴影。

.target : Object3D
平行光的方向是从它的位置到目标位置。默认的目标位置为原点 (0,0,0)。
注意: 对于目标的位置，要将其更改为除缺省值之外的任何位置,它必须被添加到 scene 场景中去。

scene.add( light.target );
这使得属性target中的 matrixWorld 会每帧自动更新。

它也可以设置target为场景中的其他对象(任意拥有 position 属性的对象), 示例如下:

var targetObject = new THREE.Object3D();
scene.add(targetObject);

light.target = targetObject;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

方法

.copy ( source : DirectionalLight ) : DirectionalLight
复制 source 的值到这个平行光源对象。
1
2

1.3半球光（HemisphereLight）

光源直接放置于场景之上，光照颜色从天空光线颜色颜色渐变到地面光线颜色。

半球光不能投射阴影。

HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float )

skyColor - (可选参数) 天空中发出光线的颜色。 缺省值 0xffffff。
groundColor - (可选参数) 地面发出光线的颜色。 缺省值 0xffffff。
intensity - (可选参数) 光照强度。 缺省值 1。

var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
scene.add( light );
1
2

属性

.castShadow : Boolean
该参数在构造时被设置为 undefined 因为半球光不能投射阴影。

.color : Float
在构造时传递的天空发出光线的颜色。 默认会创建 Color 并设置为白色（0xffffff）。

.groundColor : Float
在构造时传递的地面发出光线的颜色。 默认会创建 Color 并设置为白色（0xffffff）。

.isHemisphereLight : Boolean
用来校验这个类或者派生类是不是半球光。缺省值为 true。

不应该去改变这个变量,因为内部使用这个变量做了些优化的工作。

.position : Vector3
假如这个值设置等于 Object3D.DefaultUp (0, 1, 0),那么光线将会从上往下照射。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

方法

.copy ( source : HemisphereLight ) : HemisphereLight
从source复制 color, intensity 和 groundColor 的值到当前半球光对象中。
1
2

1.4点光源（PointLight）

从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光。

PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )

color - (可选参数)) 十六进制光照颜色。 缺省值 0xffffff (白色)。
intensity - (可选参数) 光照强度。 缺省值 1。

distance - 这个距离表示从光源到光照强度为0的位置。 当设置为0时，光永远不会消失(距离无穷大)。缺省值 0.
decay - 沿着光照距离的衰退量。缺省值 1。 在 physically correct 模式中，decay = 2。

var light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 50, 50, 50 );
scene.add( light );
1
2
3

属性

.decay : Float
沿着光照距离的衰减量
在 physically correct 模式下，decay 设置为等于2将实现现实世界的光衰减。
缺省值为 1。

.distance : Float
如果非零，那么光强度将会从最大值当前灯光位置处按照距离线性衰减到0。 缺省值为 0.0。

.isPointLight : Boolean
用来校验这个类或者派生类是不是点光源。默认是 true。

不应该去改变这个变量，因为内部使用这个变量做了些优化的工作。

.power : Float
光功率
在 physically correct 模式中, 表示以"流明（光通量单位）"为单位的光功率。 缺省值 - 4Math.PI。

该值与 intensity 直接关联
power = intensity * 4π修改该值也会导致光强度的改变。

.shadow : LightShadow
LightShadow用与计算此光照的阴影。

此对象的摄像机被设置为 fov 为90度，aspect为1 ,近裁剪面 near 为0，远裁剪面far 为500的透视摄像机 PerspectiveCamera。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

方法

.copy ( source : PointLight ) : PointLight
将所有属性的值从源 source 复制到此点光源对象。
1
2

1.5平面光光源（RectAreaLight）

平面光光源从一个矩形平面上均匀地发射光线。这种光源可以用来模拟像明亮的窗户或者条状灯光光源。

注意事项:

• 不支持阴影。
• 只支持 MeshStandardMaterial 和 MeshPhysicalMaterial 两种材质。
• 你必须在你的场景中加入 RectAreaLightUniformsLib 。

RectAreaLight( color : Integer, intensity : Float, width : Float, height : Float )

color - (可选参数) 十六进制数字表示的光照颜色。缺省值为 0xffffff (白色)
intensity - (可选参数) 光源强度／亮度 。缺省值为 1。
width - (可选参数) 光源宽度。缺省值为 10。
height - (可选参数) 光源高度。缺省值为 10。

var width = 10;
var height = 10;
var intensity = 1;
var rectLight = new THREE.RectAreaLight( 0xffffff, intensity,  width, height );
rectLight.position.set( 5, 5, 0 );
rectLight.lookAt( 0, 0, 0 );
scene.add( rectLight )

rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
scene.add( rectLightHelper );
1
2
3
4
5
6
7
8
9
10

属性

.isRectAreaLight : Boolean
用来校验这个类或者它的派生类是不是平面光光源。缺省值是 true。
1
2

方法

.copy ( source : RectAreaLight ) : RectAreaLight
将所有属性的值从源 source 复制到此平面光光源对象。
1
2

1.6聚光灯（SpotLight）

聚光灯是从一个方向上的一个点发出，沿着一个圆锥体，它离光越远，它的尺寸就越大。

SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float )

color - (可选参数) 十六进制光照颜色。 缺省值 0xffffff (白色)。
intensity - (可选参数) 光照强度。 缺省值 1。

distance - 从光源发出光的最大距离，其强度根据光源的距离线性衰减。
angle - 光线散射角度，最大为Math.PI/2。
penumbra - 聚光锥的半影衰减百分比。在0和1之间的值。默认为0。
decay - 沿着光照距离的衰减量。

var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 100, 1000, 100 );

spotLight.castShadow = true;

spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;

spotLight.shadow.camera.near = 500;
spotLight.shadow.camera.far = 4000;
spotLight.shadow.camera.fov = 30;

scene.add( spotLight );
1
2
3
4
5
6
7
8
9
10
11
12
13

属性

.angle : Float
从聚光灯的位置以弧度表示聚光灯的最大范围。应该不超过 Math.PI/2。默认值为 Math.PI/3。

.castShadow : Boolean
此属性设置为 true 聚光灯将投射阴影。警告: 这样做的代价比较高而且需要一直调整到阴影看起来正确。 查看 SpotLightShadow 了解详细信息。 默认值为 false

.decay : Float
沿着光照距离的衰减量
在 physically correct 模式下，decay 设置为等于2将实现现实世界的光衰减。
缺省值为 1。

.distance : Float
如果非零，那么光强度将会从最大值当前灯光位置处按照距离线性衰减到0。 缺省值为 0.0。

.isSpotLight : Boolean
用来校验这个类或者它的派生类是不是聚光灯光源。缺省值是 true。

不应该去改变这个变量,因为内部使用这个变量做了些优化的工作。

.penumbra : Float
聚光锥的半影衰减百分比。在0和1之间的值。 默认值 — 0.0。

.position : Vector3
假如这个值设置等于 Object3D.DefaultUp (0, 1, 0)，那么光线将会从上往下照射。

.power : Float
光功率
在 physically correct 模式中， 表示以"流明（光通量单位）"为单位的光功率。 缺省值 - 4Math.PI。

该值与 intensity 直接关联
power = intensity * 4π修改该值也会导致光强度的改变。

.shadow : SpotLightShadow
SpotLightShadow用与计算此光照的阴影。

.target : Object3D
平行光的方向是从它的位置到目标位置.默认的目标位置为原点 (0,0,0)。
注意: 对于目标的位置，要将其更改为除缺省值之外的任何位置，它必须被添加到 scene 场景中去。
scene.add( light.target );这使得属性target中的 matrixWorld 会每帧自动更新。

它也可以设置target为场景中的其他对象(任意拥有 position 属性的对象), 示例如下:
var targetObject = new THREE.Object3D();
scene.add(targetObject);

light.target = targetObject;完成上述操作后，聚光灯现在就可以追踪到目标对像了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

方法

.copy ( source : SpotLight ) : SpotLight
将所有属性的值从源 source 复制到此聚光灯光源对象。
1
2

7、材质

1.0材质(Material)

材质的抽象基类。

所有其他材质类型都继承了以下属性和方法（尽管它们可能具有不同的默认值）。

Material()

属性

.alphaTest : Float
设置运行alphaTest时要使用的alpha值。如果不透明度低于此值，则不会渲染材质。默认值为0。

.blendDst : Integer
混合目标。默认值为OneMinusSrcAlphaFactor。 目标因子所有可能的取值请参阅constants。 必须将材质的blending设置为CustomBlending才能生效。
.blendDstAlpha : Integer
.blendDst的透明度。 默认值为 null.

.blendEquation : Integer
使用混合时所采用的混合方程式。默认值为AddEquation。 混合方程式所有可能的取值请参阅constants。 必须将材质的blending设置为CustomBlending才能生效。
.blendEquationAlpha : Integer
.blendEquation 的透明度. 默认值为 null.

.blending : Blending
在使用此材质显示对象时要使用何种混合。
必须将其设置为CustomBlending才能使用自定义blendSrc, blendDst 或者 [page:Constant blendEquation]。 混合模式所有可能的取值请参阅constants。默认值为NormalBlending。

.blendSrc : Integer
混合源。默认值为SrcAlphaFactor。 源因子所有可能的取值请参阅constants。
必须将材质的blending设置为CustomBlending才能生效。

.blendSrcAlpha : Integer
.blendSrc的透明度。 默认值为 null.

.clipIntersection : Boolean
更改剪裁平面的行为，以便仅剪切其交叉点，而不是它们的并集。默认值为 false。

.clippingPlanes : Array
用户定义的剪裁平面，在世界空间中指定为THREE.Plane对象。这些平面适用于所有使用此材质的对象。空间中与平面的有符号距离为负的点被剪裁（未渲染）。 这需要WebGLRenderer.localClippingEnabled为true。 示例请参阅WebGL / clipping /intersection。默认值为 null。

.clipShadows : Boolean
定义是否根据此材质上指定的剪裁平面剪切阴影。默认值为 false。

.colorWrite : Boolean
是否渲染材质的颜色。 这可以与网格的renderOrder属性结合使用，以创建遮挡其他对象的不可见对象。默认值为true。

.defines : Object
注入shader的自定义对象。 以键值对形式的对象传递，{ MY_CUSTOM_DEFINE: '' , PI2: Math.PI * 2 }。 这些键值对在顶点和片元着色器中定义。默认值为undefined。

.depthFunc : Integer
使用何种深度函数。默认为LessEqualDepth。 深度模式所有可能的取值请查阅constants。

.depthTest : Boolean
是否在渲染此材质时启用深度测试。默认为 true。

.depthWrite : Boolean
渲染此材质是否对深度缓冲区有任何影响。默认为true。

在绘制2D叠加时，将多个事物分层在一起而不创建z-index时，禁用深度写入会很有用。

.flatShading : Boolean
定义材质是否使用平面着色进行渲染。默认值为false。

.fog : Boolean
材质是否受雾影响。默认为true。

.id : Integer
此材质实例的唯一编号。

.isMaterial : Boolean
用于检查此类或派生类是否为材质。默认值为 true。

因为其通常用在内部优化，所以不应该更改该属性值。

.lights : Boolean
材质是否受到光照的影响。默认为true。

.name : String
对象的可选名称（不必是唯一的）。默认值为空字符串。

.needsUpdate : Boolean
指定需要重新编译材质。
实例化新材质时，此属性自动设置为true。

.opacity : Float
在0.0 - 1.0的范围内的浮点数，表明材质的透明度。值0.0表示完全透明，1.0表示完全不透明。
如果材质的transparent属性未设置为true，则材质将保持完全不透明，此值仅影响其颜色。 默认值为1.0。
.polygonOffset : Boolean
是否使用多边形偏移。默认值为false。这对应于WebGL的GL_POLYGON_OFFSET_FILL功能。

.polygonOffsetFactor : Integer
设置多边形偏移系数。默认值为0。

.polygonOffsetUnits : Integer
设置多边形偏移单位。默认值为0。

.precision : String
重写此材质渲染器的默认精度。可以是"highp", "mediump" 或 "lowp"。默认值为null。

.premultipliedAlpha : Boolean
是否预乘alpha（透明度）值。有关差异的示例，请参阅WebGL / Materials / Transparency。 默认值为false。

.dithering : Boolean
是否对颜色应用抖动以消除条带的外观。默认值为 false。

.shadowSide : Integer
定义投影的面。设置时，可以是THREE.FrontSide, THREE.BackSide, 或Materials。默认值为 null。
如果为null， 则面投射阴影确定如下：
Material.side	Side casting shadows
THREE.FrontSide	背面
THREE.BackSide	前面
THREE.DoubleSide	双面
.side : Integer
定义将要渲染哪一面 - 正面，背面或两者。 默认为THREE.FrontSide。其他选项有THREE.BackSide和THREE.DoubleSide。

.transparent : Boolean
定义此材质是否透明。这对渲染有影响，因为透明对象需要特殊处理，并在非透明对象之后渲染。
设置为true时，通过设置材质的opacity属性来控制材质透明的程度。
默认值为false。

.type : String
值是字符串'Material'。不应该被更改，并且可以用于在场景中查找此类型的所有对象。

.uuid : String
此材质实例的UUID，会自动分配，不应该被更改。

.vertexColors : Integer
是否使用顶点着色。默认值为THREE.NoColors。 其他选项有THREE.VertexColors 和 THREE.FaceColors。

.vertexTangents : Boolean
TODO.

.visible : Boolean
此材质是否可见。默认为true。

.userData : object
一个对象，可用于存储有关Material的自定义数据。它不应该包含对函数的引用，因为这些函数不会被克隆。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

方法

.clone ( ) : Material
返回与此材质具有相同参数的新材质。

.copy ( material : material ) : Material
将被传入材质中的参数复制到此材质中。

.dispose () : null
处理材质。材质的纹理不会被处理。需要通过Texture处理。

.onBeforeCompile ( shader : Shader, renderer : WebGLRenderer ) : null
在编译shader程序之前立即执行的可选回调。此函数使用shader源码作为参数。用于修改内置材质。

.setValues ( values : object ) : null
values -- 具有参数的容器。 根据values设置属性。
.toJSON ( meta : object ) : null
meta -- 包含元素，例如材质的纹理或图像。 将材质转换为three.js JSON格式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

1.1基础线条材质（LineBasicMaterial）

一种用于绘制线框样式几何体的材质。

LineBasicMaterial( parameters : Object )

parameters - (可选)用于定义材质外观的对象，具有一个或多个属性。材质的任何属性都可以从此处传入(包括从Material继承的任何属性)。

属性color例外，其可以作为十六进制字符串传递，默认情况下为 0xffffff（白色），内部调用Color.set(color)。

var material = new THREE.LineBasicMaterial( {
	color: 0xffffff,
	linewidth: 1,
	linecap: 'round', //ignored by WebGLRenderer
	linejoin:  'round' //ignored by WebGLRenderer
} );
1
2
3
4
5
6

属性

.color : Color
材质的颜色(Color)，默认值为白色 (0xffffff)。

.isLineBasicMaterial : Boolean
用于检查此类或派生类是否为基础线条材质。默认值为 true。

因为其通常用在内部优化，所以不应该更改该属性值。

.lights : Boolean
材质是否受到光照的影响。默认值为 false。

.linewidth : Float
控制线宽。默认值为 1。

由于OpenGL Core Profile与 大多数平台上WebGL渲染器的限制，无论如何设置该值，线宽始终为1。

.linecap : String
定义线两端的样式。可选值为 'butt', 'round' 和 'square'。默认值为 'round'。

该属性对应2D Canvas lineCap属性， 并且会被WebGL渲染器忽略。

.linejoin : String
定义线连接节点的样式。可选值为 'round', 'bevel' 和 'miter'。默认值为 'round'。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

1.2虚线材质(LineDashedMaterial)

一种用于绘制虚线样式几何体的材质。

LineDashedMaterial( parameters : Object )

parameters - (可选)用于定义材质外观的对象，具有一个或多个属性。材质的任何属性都可以从此处传入(包括从Material继承的任何属性)。

属性color例外，其可以作为十六进制字符串传递，默认情况下为 0xffffff（白色），内部调用Color.set(color)。

var material = new THREE.LineDashedMaterial( {
	color: 0xffffff,
	linewidth: 1,
	scale: 1,
	dashSize: 3,
	gapSize: 1,
} );
1
2
3
4
5
6
7

属性

.color : Color
材质的颜色(Color)，默认值为白色 (0xffffff)。

.dashSize : number
虚线的大小，是指破折号和间隙之和。默认值为 3。

.gapSize : number
间隙的大小，默认值为 1。

.isLineDashedMaterial : Boolean
用于检查此类或派生类是否为虚线材质。默认值为 true。

因为其通常用在内部优化，所以不应该更改该属性值。

.lights : Boolean
材质是否受到光照的影响。默认值为 false。

.linewidth : Float
控制线宽。默认值为 1。

由于OpenGL Core Profile与 大多数平台上WebGL渲染器的限制，无论如何设置该值，线宽始终为1。

.scale : number
线条中虚线部分的占比。默认值为 1。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

1.3基础网格材质(MeshBasicMaterial)

一个以简单着色（平面或线框）方式来绘制几何体的材质。

这种材质不受光照的影响。

MeshBasicMaterial( parameters : Object )

parameters - (可选)用于定义材质外观的对象，具有一个或多个属性。材质的任何属性都可以从此处传入(包括从Material继承的任何属性)。

属性color例外，其可以作为十六进制字符串传递，默认情况下为 0xffffff（白色），内部调用Color.set(color)。

属性

.alphaMap : Texture
alpha贴图是一种灰度纹理，用于控制整个表面的不透明度（黑色：完全透明;白色：完全不透明）。默认值为null。

仅使用纹理的颜色，忽略alpha通道（如果存在）。对于RGB和RGBA纹理，WebGL渲染器在采样此纹理时将使用绿色通道， 因为在DXT压缩和未压缩RGB 565格式中为绿色提供了额外的精度。Luminance-only以及luminance/alpha纹理也仍然有效。

.aoMap : Texture
该纹理的红色通道用作环境遮挡贴图。默认值为null。aoMap需要第二组UVs，因此将忽略repeat和offset属性。

.aoMapIntensity : Float
环境遮挡效果的强度。默认值为1。零是不遮挡效果。

.color : Color
材质的颜色(Color)，默认值为白色 (0xffffff)。

.combine : Integer
如何将表面颜色的结果与环境贴图（如果有）结合起来。

选项为THREE.Multiply（默认值），THREE.MixOperation， THREE.AddOperation。如果选择多个，则使用.reflectivity在两种颜色之间进行混合。

.isMeshBasicMaterial : Boolean
用于检查此类或派生类是否为网格基础材质。默认值为 true。

因为其通常用在内部优化，所以不应该更改该属性值。

.envMap : TextureCube
环境贴图。默认值为null。

.lightMap : Texture
光照贴图。默认值为null。lightMap需要第二组UVs，因此将忽略repeat和offset纹理属性。

.lightMapIntensity : Float
烘焙光的强度。默认值为1。

.lights : Boolean
材质是否受到光照的影响。默认值为 false。

.map : Texture
颜色贴图。默认为null。

.morphTargets : Boolean
材质是否使用morphTargets。默认值为false。

.reflectivity : Float
环境贴图对表面的影响程度; 见.combine。默认值为1，有效范围介于0（无反射）和1（完全反射）之间。

.refractionRatio : Float
空气的折射率（IOR）（约为1）除以材质的折射率。它与环境映射模式THREE.CubeRefractionMapping 和THREE.EquirectangularRefractionMapping一起使用。 折射率不应超过1。默认值为0.98。

.skinning : Boolean
材质是否使用蒙皮。默认值为false。

.specularMap : Texture
材质使用的高光贴图。默认值为null。

.wireframe : Boolean
将几何体渲染为线框。默认值为false（即渲染为平面多边形）。

.wireframeLinecap : String
定义线两端的外观。可选值为 'butt'，'round' 和 'square'。默认为'round'。

该属性对应2D Canvas lineJoin属性， 并且会被WebGL渲染器忽略。

.wireframeLinejoin : String
定义线连接节点的样式。可选值为 'round', 'bevel' 和 'miter'。默认值为 'round'。

该属性对应2D Canvas lineJoin属性， 并且会被WebGL渲染器忽略。

.wireframeLinewidth : Float
控制线框宽度。默认值为1。

由于OpenGL Core Profile与大多数平台上WebGL渲染器的限制， 无论如何设置该值，线宽始终为1。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

1.4深度网格材质(MeshDepthMaterial)

一种按深度绘制几何体的材质。深度基于相机远近平面。白色最近，黑色最远。

MeshDepthMaterial( parameters : Object )

parameters - (可选)用于定义材质外观的对象，具有一个或多个属性。 材质的任何属性都可以从此处传入(包括从Material继承的任何属性)。

属性

.alphaMap : Texture
alpha贴图是一种灰度纹理，用于控制整个表面的不透明度（黑色：完全透明;白色：完全不透明）。默认值为null。

仅使用纹理的颜色，忽略alpha通道（如果存在）。对于RGB和RGBA纹理，WebGL渲染器在采样此纹理时将使用绿色通道， 因为在DXT压缩和未压缩RGB 565格式中为绿色提供了额外的精度。Luminance-only以及luminance/alpha纹理也仍然有效。

.depthPacking : Constant
depth packing的编码。默认为BasicDepthPacking。

.displacementMap : Texture
位移贴图会影响网格顶点的位置，与仅影响材质的光照和阴影的其他贴图不同，移位的顶点可以投射阴影，阻挡其他对象，以及充当真实的几何体。 位移纹理是指：网格的所有顶点被映射为图像中每个像素的值（白色是最高的），并且被重定位。

.displacementScale : Float
位移贴图对网格的影响程度（黑色是无位移，白色是最大位移）。如果没有设置位移贴图，则不会应用此值。默认值为1。

.displacementBias : Float
位移贴图在网格顶点上的偏移量。如果没有设置位移贴图，则不会应用此值。默认值为0。

.fog : Boolean
材质是否受雾影响。默认值为false。

.isMeshDepthMaterial : Boolean
用于检查此类或派生类是否为深度网格材质。默认值为 true。

因为其通常用在内部优化，所以不应该更改该属性值。

.lights : Boolean
材质是否受到光照的影响。默认值为 false。

.map : Texture
颜色贴图。默认为null。

.morphTargets : boolean
材质是否使用morphTargets。默认值为false。

.skinning : Boolean
材质是否使用蒙皮。默认值为false。

.wireframe : boolean
将几何体渲染为线框。默认值为false（即渲染为平滑着色）。

.wireframeLinewidth : Float
控制线框宽度。默认值为1。

由于OpenGL Core Profile 与大多数平台上WebGL渲染器限制，无论如何设置该值，线宽始终为1。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

1.5MeshDistanceMaterial

MeshDistanceMaterial( parameters : Object )

parameters - (可选)用于定义材质外观的对象，具有一个或多个属性。 材质的任何属性都可以从此处传入(包括从Material继承的任何属性)。

属性

.alphaMap : Texture
alpha贴图是一种灰度纹理，用于控制整个表面的不透明度（黑色：完全透明;白色：完全不透明）。默认值为null。

仅使用纹理的颜色，忽略alpha通道（如果存在）。对于RGB和RGBA纹理，WebGL渲染器在采样此纹理时将使用绿色通道， 因为在DXT压缩和未压缩RGB 565格式中为绿色提供了额外的精度。Luminance-only以及luminance/alpha纹理也仍然有效。

.displacementMap : Texture
位移贴图会影响网格顶点的位置，与仅影响材质的光照和阴影的其他贴图不同，移位的顶点可以投射阴影，阻挡其他对象，以及充当真实的几何体。 位移纹理是指：网格的所有顶点被映射为图像中每个像素的值（白色是最高的），并且被重定位。

.displacementScale : Float
位移贴图对网格的影响程度（黑色是无位移，白色是最大位移）。如果没有设置位移贴图，则不会应用此值。默认值为1。

.displacementBias : Float
位移贴图在网格顶点上的偏移量。如果没有设置位移贴图，则不会应用此值。默认值为0。

.farDistance : Float
TODO

.fog : Boolean
材质是否受雾影响。默认值为false。

.isMeshDistanceMaterial : Boolean
用于检查此类或派生类是否为深度网格材质。默认值为 true。

因为其通常用在内部优化，所以不应该更改该属性值。

.lights : Boolean
材质是否受到光照的影响。默认值为 false。

.map : Texture
颜色贴图。默认为null。

.morphTargets : boolean
材质是否使用morphTargets。默认值为false。

.nearDistance : Float
TODO

.referencePosition : Vector3
TODO

.skinning : Boolean
材质是否使用蒙皮。默认值为false。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

1.6网格材质(MeshLambertMaterial)

一种非光泽表面的材质，没有镜面高光。

MeshLambertMaterial( parameters : Object )

parameters - (可选)用于定义材质外观的对象，具有一个或多个属性。 材质的任何属性都可以从此处传入(包括从Material继承的任何属性)。

属性color例外，其可以作为十六进制字符串传递，默认情况下为 0xffffff（白色），内部调用Color.set(color)。

属性

.alphaMap : Texture
alpha贴图是一种灰度纹理，用于控制整个表面的不透明度（黑色：完全透明;白色：完全不透明）。默认值为null。

仅使用纹理的颜色，忽略alpha通道（如果存在）。对于RGB和RGBA纹理，WebGL渲染器在采样此纹理时将使用绿色通道， 因为在DXT压缩和未压缩RGB 565格式中为绿色提供了额外的精度。Luminance-only以及luminance/alpha纹理也仍然有效。

.aoMap : Texture
该纹理的红色通道用作环境遮挡贴图。默认值为null。aoMap需要第二组UVs，因此将忽略repeat和offset纹理属性。

.aoMapIntensity : Float
环境遮挡效果的强度。默认值为1。零是不遮挡效果。

.color : Color
材质的颜色(Color)，默认值为白色 (0xffffff)。

.combine : Integer
如何将表面颜色的结果与环境贴图（如果有）结合起来。

选项为THREE.Multiply（默认值），THREE.MixOperation， THREE.AddOperation。如果选择多个，则使用.reflectivity在两种颜色之间进行混合。

.emissive : Color
材质的放射（光）颜色，基本上是不受其他光照影响的固有颜色。默认为黑色。

.emissiveMap : Texture
设置放射（发光）贴图。默认值为null。放射贴图颜色由放射颜色和强度所调节。 如果你有一个放射贴图，请务必将放射颜色设置为黑色以外的其他颜色。

.emissiveIntensity : Float
放射光强度。调节发光颜色。默认为1。

.envMap : TextureCube
环境贴图。默认值为null。

.isMeshLambertMaterial : Boolean
用于检查此类或派生类是否为Lambert网格材质。默认值为 true。

因为其通常用在内部优化，所以不应该更改该属性值。

.lightMap : Texture
光照贴图。默认值为null。lightMap需要第二组UVs，因此将忽略repeat和offset纹理属性。

.lightMapIntensity : Float
烘焙光的强度。默认值为1。

.map : Texture
颜色贴图。默认为null。

.morphNormals : boolean
定义是否使用morphNormals。设置为true可将morphNormal属性从Geometry传递到shader。默认值为false。

.morphTargets : Boolean
定义材质是否使用morphTargets。默认值为false。

.reflectivity : Float
环境贴图对表面的影响程度; 见.combine。默认值为1，有效范围介于0（无反射）和1（完全反射）之间。

.refractionRatio : Float
空气的折射率（IOR）（约为1）除以材质的折射率。它与环境映射模式THREE.CubeRefractionMapping 和THREE.EquirectangularRefractionMapping一起使用。 折射率不应超过1。默认值为0.98。

.skinning : Boolean
材质是否使用蒙皮。默认值为false。

.specularMap : Texture
材质使用的高光贴图。默认值为null。

.wireframe : Boolean
将几何体渲染为线框。默认值为false（即渲染为平面多边形）。

.wireframeLinecap : String
定义线两端的外观。可选值为 'butt'，'round' 和 'square'。默认为'round'。

该属性对应2D Canvas lineJoin属性， 并且会被WebGL渲染器忽略。

.wireframeLinejoin : String
定义线连接节点的样式。可选值为 'round', 'bevel' 和 'miter'。默认值为 'round'。

该属性对应2D Canvas lineJoin属性， 并且会被WebGL渲染器忽略。

.wireframeLinewidth : Float
控制线框宽度。默认值为1。

由于OpenGL Core Profile与 大多数平台上WebGL渲染器的限制，无论如何设置该值，线宽始终为1。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

1.7MeshMatcapMaterial

MeshMatcapMaterial( parameters : Object )

parameters - (可选)用于定义材质外观的对象，具有一个或多个属性。 材质的任何属性都可以从此处传入(包括从Material继承的任何属性)。

属性color例外，其可以作为十六进制字符串传递，默认情况下为 0xffffff（白色），内部调用Color.set(color)。

属性

.alphaMap : Texture
Talpha贴图是一种灰度纹理，用于控制整个表面的不透明度（黑色：完全透明;白色：完全不透明）。默认值为null。

仅使用纹理的颜色，忽略alpha通道（如果存在）。对于RGB和RGBA纹理，WebGL渲染器在采样此纹理时将使用绿色通道， 因为在DXT压缩和未压缩RGB 565格式中为绿色提供了额外的精度。Luminance-only以及luminance/alpha纹理也仍然有效。

.bumpMap : Texture
用于创建凹凸贴图的纹理。黑色和白色值映射到与光照相关的感知深度。凹凸实际上不会影响对象的几何形状，只影响光照。如果定义了法线贴图，则将忽略该贴图。

.bumpScale : Float
凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1。

.color : Color
材质的颜色(Color)，默认值为白色 (0xffffff)。

.displacementMap : Texture
位移贴图会影响网格顶点的位置，与仅影响材质的光照和阴影的其他贴图不同，移位的顶点可以投射阴影，阻挡其他对象， 以及充当真实的几何体。位移纹理是指：网格的所有顶点被映射为图像中每个像素的值（白色是最高的），并且被重定位。

.displacementScale : Float
位移贴图对网格的影响程度（黑色是无位移，白色是最大位移）。如果没有设置位移贴图，则不会应用此值。默认值为1。

.displacementBias : Float
位移贴图在网格顶点上的偏移量。如果没有设置位移贴图，则不会应用此值。默认值为0。

.isMeshMatcapMaterial : Boolean
TODO

因为其通常用在内部优化，所以不应该更改该属性值。

.map : Texture
颜色贴图。默认为null。纹理贴图颜色由漫反射颜色.color调节。

.matcap : Texture
TODO

.morphNormals : boolean
定义是否使用morphNormals。设置为true可将morphNormal属性从Geometry传递到shader。默认值为false。

.morphTargets : Boolean
定义材质是否使用morphTargets。默认值为false。

.normalMap : Texture
用于创建法线贴图的纹理。RGB值会影响每个像素片段的曲面法线，并更改颜色照亮的方式。法线贴图不会改变曲面的实际形状，只会改变光照。

.normalMapType : Integer
法线贴图的类型。

选项为THREE.TangentSpaceNormalMap（默认）和THREE.ObjectSpaceNormalMap。

.normalScale : Vector2
法线贴图对材质的影响程度。典型范围是0-1。默认值是Vector2设置为（1,1）。

.skinning : Boolean
材质是否使用蒙皮。默认值为false。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

1.8法线网格材质(MeshNormalMaterial)

一种把法向量映射到RGB颜色的材质。

MeshNormalMaterial( parameters : Object )

parameters - (可选)用于定义材质外观的对象，具有一个或多个属性。材质的任何属性都可以从此处传入(包括从Material继承的任何属性)。

属性

.bumpMap : Texture
用于创建凹凸贴图的纹理。黑色和白色值映射到与光照相关的感知深度。凹凸实际上不会影响对象的几何形状，只影响光照。如果定义了法线贴图，则将忽略该贴图。

.bumpScale : Float
凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1。

.displacementMap : Texture
位移贴图会影响网格顶点的位置，与仅影响材质的光照和阴影的其他贴图不同，移位的顶点可以投射阴影，阻挡其他对象， 以及充当真实的几何体。位移纹理是指：网格的所有顶点被映射为图像中每个像素的值（白色是最高的），并且被重定位。

.displacementScale : Float
位移贴图对网格的影响程度（黑色是无位移，白色是最大位移）。如果没有设置位移贴图，则不会应用此值。默认值为1。

.displacementBias : Float
位移贴图在网格顶点上的偏移量。如果没有设置位移贴图，则不会应用此值。默认值为0。

.fog : Boolean
材质是否受雾影响。默认值为false。

.isMeshNormalMaterial : Boolean
用于检查此类或派生类是否为法线网格材质。默认值为 true。

因为其通常用在内部优化，所以不应该更改该属性值。

.lights : Boolean
材质是否受到光照的影响。默认值为 false。

.morphNormals : boolean
定义是否使用morphNormals。设置为true可将morphNormal属性从Geometry传递到shader。默认值为false。

.morphTargets : Boolean
定义材质是否使用morphTargets。默认值为false。

.normalMap : Texture
用于创建法线贴图的纹理。RGB值会影响每个像素片段的曲面法线，并更改颜色照亮的方式。法线贴图不会改变曲面的实际形状，只会改变光照。

.normalMapType : Integer
法线贴图的类型。

选项为THREE.TangentSpaceNormalMap（默认）和THREE.ObjectSpaceNormalMap。

.normalScale : Vector2
法线贴图对材质的影响程度。典型范围是0-1。默认值是Vector2设置为（1,1）。

.skinning : Boolean
材质是否使用蒙皮。默认值为false。

.wireframe : boolean
将几何体渲染为线框。默认值为false（即渲染为平滑着色）。

.wireframeLinewidth : Float
控制线框宽度。默认值为1。

由于OpenGL Core Profile与大多数平台上WebGL渲染器的限制，无论如何设置该值，线宽始终为1。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

1.9网格材质(MeshPhongMaterial)

一种用于具有镜面高光的光泽表面的材质。

MeshPhongMaterial( parameters : Object )

parameters - (可选)用于定义材质外观的对象，具有一个或多个属性。 材质的任何属性都可以从此处传入(包括从Material继承的任何属性)。

属性color例外，其可以作为十六进制字符串传递，默认情况下为 0xffffff（白色），内部调用Color.set(color)。

属性

.alphaMap : Texture
Talpha贴图是一种灰度纹理，用于控制整个表面的不透明度（黑色：完全透明;白色：完全不透明）。默认值为null。

仅使用纹理的颜色，忽略alpha通道（如果存在）。对于RGB和RGBA纹理，WebGL渲染器在采样此纹理时将使用绿色通道， 因为在DXT压缩和未压缩RGB 565格式中为绿色提供了额外的精度。Luminance-only以及luminance/alpha纹理也仍然有效。

.aoMap : Texture
该纹理的红色通道用作环境遮挡贴图。默认值为null。aoMap需要第二组UVs，因此将忽略repeat和offset属性。

.aoMapIntensity : Float
环境遮挡效果的强度。默认值为1。零是不遮挡效果。

.bumpMap : Texture
用于创建凹凸贴图的纹理。黑色和白色值映射到与光照相关的感知深度。凹凸实际上不会影响对象的几何形状，只影响光照。如果定义了法线贴图，则将忽略该贴图。

.bumpScale : Float
凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1。

.color : Color
材质的颜色(Color)，默认值为白色 (0xffffff)。

.combine : Integer
如何将表面颜色的结果与环境贴图（如果有）结合起来。

选项为THREE.Multiply（默认值），THREE.MixOperation， THREE.AddOperation。如果选择多个，则使用.reflectivity在两种颜色之间进行混合。

.displacementMap : Texture
位移贴图会影响网格顶点的位置，与仅影响材质的光照和阴影的其他贴图不同，移位的顶点可以投射阴影，阻挡其他对象， 以及充当真实的几何体。位移纹理是指：网格的所有顶点被映射为图像中每个像素的值（白色是最高的），并且被重定位。

.displacementScale : Float
位移贴图对网格的影响程度（黑色是无位移，白色是最大位移）。如果没有设置位移贴图，则不会应用此值。默认值为1。

.displacementBias : Float
位移贴图在网格顶点上的偏移量。如果没有设置位移贴图，则不会应用此值。默认值为0。

.emissive : Color
材质的放射（光）颜色，基本上是不受其他光照影响的固有颜色。默认为黑色。

.emissiveMap : Texture
设置放射（发光）贴图。默认值为null。放射贴图颜色由放射颜色和强度所调节。 如果你有一个放射贴图，请务必将放射颜色设置为黑色以外的其他颜色。

.emissiveIntensity : Float
放射光强度。调节发光颜色。默认为1。

.envMap : TextureCube
环境贴图。默认值为null。

.isMeshPhongMaterial : Boolean
用于检查此类或派生类是否为Phong网格材质。默认值为 true。

因为其通常用在内部优化，所以不应该更改该属性值。

.lightMap : Texture
光照贴图。默认值为null。lightMap需要第二组UVs，因此将忽略repeat和offset纹理属性。

.lightMapIntensity : Float
烘焙光的强度。默认值为1。

.map : Texture
颜色贴图。默认为null。纹理贴图颜色由漫反射颜色.color调节。

.morphNormals : boolean
定义是否使用morphNormals。设置为true可将morphNormal属性从Geometry传递到shader。默认值为false。

.morphTargets : Boolean
定义材质是否使用morphTargets。默认值为false。

.normalMap : Texture
用于创建法线贴图的纹理。RGB值会影响每个像素片段的曲面法线，并更改颜色照亮的方式。法线贴图不会改变曲面的实际形状，只会改变光照。

.normalMapType : Integer
法线贴图的类型。

选项为THREE.TangentSpaceNormalMap（默认）和THREE.ObjectSpaceNormalMap。

.normalScale : Vector2
法线贴图对材质的影响程度。典型范围是0-1。默认值是Vector2设置为（1,1）。

.reflectivity : Float
环境贴图对表面的影响程度; 见.combine。默认值为1，有效范围介于0（无反射）和1（完全反射）之间。

.refractionRatio : Float
空气的折射率（IOR）（约为1）除以材质的折射率。它与环境映射模式THREE.CubeRefractionMapping 和THREE.EquirectangularRefractionMapping一起使用。 折射率不应超过1。默认值为0.98。

.shininess : Float
.specular高亮的程度，越高的值越闪亮。默认值为 30。

.skinning : Boolean
材质是否使用蒙皮。默认值为false。

.specular : Color
材质的高光颜色。默认值为0x111111（深灰色）的颜色Color。

这定义了材质的光泽度和光泽的颜色。

.specularMap : Texture
镜面反射贴图值会影响镜面高光以及环境贴图对表面的影响程度。默认值为null。

.wireframe : Boolean
将几何体渲染为线框。默认值为false（即渲染为平面多边形）。

.wireframeLinecap : String
定义线两端的外观。可选值为 'butt'，'round' 和 'square'。默认为'round'。

该属性对应2D Canvas lineJoin属性， 并且会被WebGL渲染器忽略。

.wireframeLinejoin : String
定义线连接节点的样式。可选值为 'round', 'bevel' 和 'miter'。默认值为 'round'。

该属性对应2D Canvas lineJoin属性， 并且会被WebGL渲染器忽略。

.wireframeLinewidth : Float
控制线框宽度。默认值为1。

由于OpenGL Core Profile与 大多数平台上WebGL渲染器的限制，无论如何设置该值，线宽始终为1。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

2.0物理网格材质(MeshPhysicalMaterial)

MeshStandardMaterial的扩展，能够更好地控制反射率。

MeshPhysicalMaterial( parameters : Object )

parameters - (可选)用于定义材质外观的对象，具有一个或多个属性。 材质的任何属性都可以从此处传入(包括从Material继承的任何属性)

属性color例外，其可以作为十六进制字符串传递，默认情况下为 0xffffff（白色），内部调用Color.set(color)。

属性

.clearCoat : Float
ClearCoat级别，从0.0到1.0。默认值为0.0。

.clearCoatRoughness : Float
clearCoat看起来的粗糙程度，从0.0到1.0。默认值为0.0。

.isMeshPhysicalMaterial : Boolean
用于检查此类或派生类是否为Lambert网格材质。默认值为 true。

因为其通常用在内部优化，所以不应该更改该属性值。

.defines : Object
如下形式的对象:
{ 'PHYSICAL': '' };WebGLRenderer使用它来选择shaders。

.reflectivity : Float
反射度，从0.0到1.0。默认值为0.5。
这模拟了非金属材质的反射率。当MeshStandardMaterial为1.0时，此属性无效。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.1标准网格材质(MeshStandardMaterial)

一种基于物理的标准材质

MeshStandardMaterial( parameters : Object )

parameters - (可选)用于定义材质外观的对象，具有一个或多个属性。 材质的任何属性都可以从此处传入(包括从Material继承的任何属性)。

属性color例外，其可以作为十六进制字符串传递，默认情况下为 0xffffff（白色），内部调用Color.set(color)。

属性

.alphaMap : Texture
alpha贴图是一种灰度纹理，用于控制整个表面的不透明度（黑色：完全透明;白色：完全不透明）。默认值为null。

仅使用纹理的颜色，忽略alpha通道（如果存在）。对于RGB和RGBA纹理，WebGL渲染器在采样此纹理时将使用绿色通道， 因为在DXT压缩和未压缩RGB 565格式中为绿色提供了额外的精度。Luminance-only以及luminance/alpha纹理也仍然有效。

.aoMap : Texture
该纹理的红色通道用作环境遮挡贴图。默认值为null。aoMap需要第二组UVs，因此将忽略repeat和offset属性。

.aoMapIntensity : Float
环境遮挡效果的强度。默认值为1。零是不遮挡效果。

.bumpMap : Texture
用于创建凹凸贴图的纹理。黑色和白色值映射到与光照相关的感知深度。凹凸实际上不会影响对象的几何形状，只影响光照。如果定义了法线贴图，则将忽略该贴图。

.bumpScale : Float
凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1。

.color : Color
材质的颜色(Color)，默认值为白色 (0xffffff)。

.defines : Object
如下形式的对象:
{ 'STANDARD': '' };WebGLRenderer使用它来选择shaders。

.displacementMap : Texture
位移贴图会影响网格顶点的位置，与仅影响材质的光照和阴影的其他贴图不同，移位的顶点可以投射阴影，阻挡其他对象， 以及充当真实的几何体。位移纹理是指：网格的所有顶点被映射为图像中每个像素的值（白色是最高的），并且被重定位。

.displacementScale : Float
位移贴图对网格的影响程度（黑色是无位移，白色是最大位移）。如果没有设置位移贴图，则不会应用此值。默认值为1。

.displacementBias : Float
位移贴图在网格顶点上的偏移量。如果没有设置位移贴图，则不会应用此值。默认值为0。

.emissive : Color
材质的放射（光）颜色，基本上是不受其他光照影响的固有颜色。默认为黑色。

.emissiveMap : Texture
设置放射（发光）贴图。默认值为null。放射贴图颜色由放射颜色和强度所调节。 如果你有一个放射贴图，请务必将放射颜色设置为黑色以外的其他颜色。

.emissiveIntensity : Float
放射光强度。调节发光颜色。默认为1。

.envMap : TextureCube
环境贴图。默认值为null。 请注意，为了使材质粗糙度属性能够正确地模糊环境贴图，shader必须能够访问环境纹理的mipmaps。 使用默认设置创建的TextureCubes已正确配置; 如果手动调整纹理参数， 请确保将minFilter设置为其中一个MipMap选项，并且未强制禁用mip贴图。

注意：MeshStandardMaterial 仅支持cube environment maps。 如果要使用equirectangular贴图，则需要使用 EquirectangularToCubeGenerator。 详细信息请参阅此示例example。

.envMapIntensity : Float
通过乘以环境贴图的颜色来缩放环境贴图的效果。

.isMeshStandardMaterial : Boolean
用于检查此类或派生类是否为标准网格材质。默认值为 true。

因为其通常用在内部优化，所以不应该更改该属性值。

.lightMap : Texture
光照贴图。默认值为null。lightMap需要第二组UVs，因此将忽略repeat和offset纹理属性。

.lightMapIntensity : Float
烘焙光的强度。默认值为1。

.map : Texture
颜色贴图。默认为null。纹理贴图颜色由漫反射颜色.color调节。

.metalness : Float
材质与金属的相似度。非金属材质，如木材或石材，使用0.0，金属使用1.0，通常没有中间值。 默认值为0.5。0.0到1.0之间的值可用于生锈金属的外观。如果还提供了metalnessMap，则两个值相乘。

.metalnessMap : Texture
该纹理的蓝色通道用于改变材质的金属度。

.morphNormals : boolean
定义是否使用morphNormals。设置为true可将morphNormal属性从Geometry传递到shader。默认值为false。

.morphTargets : Boolean
定义材质是否使用morphTargets。默认值为false。

.normalMap : Texture
用于创建法线贴图的纹理。RGB值会影响每个像素片段的曲面法线，并更改颜色照亮的方式。法线贴图不会改变曲面的实际形状，只会改变光照。

.normalMapType : Integer
法线贴图的类型。

选项为THREE.TangentSpaceNormalMap（默认）和THREE.ObjectSpaceNormalMap。

.normalScale : Vector2
法线贴图对材质的影响程度。典型范围是0-1。默认值是Vector2设置为（1,1）。

.refractionRatio : Float
空气的折射率（IOR）（约为1）除以材质的折射率。它与环境映射模式THREE.CubeRefractionMapping 和THREE.EquirectangularRefractionMapping一起使用。 折射率不应超过1。默认值为0.98。

.roughness : Float
材质的粗糙程度。0.0表示平滑的镜面反射，1.0表示完全漫反射。默认值为0.5。如果还提供roughnessMap，则两个值相乘。

.roughnessMap : Texture
该纹理的绿色通道用于改变材质的粗糙度。

.skinning : Boolean
材质是否使用蒙皮。默认值为false。

.wireframe : Boolean
将几何体渲染为线框。默认值为false（即渲染为平面多边形）。

.wireframeLinecap : String
定义线两端的外观。可选值为 'butt'，'round' 和 'square'。默认为'round'。

该属性对应2D Canvas lineJoin属性， 并且会被WebGL渲染器忽略。

.wireframeLinejoin : String
定义线连接节点的样式。可选值为 'round', 'bevel' 和 'miter'。默认值为 'round'。

该属性对应2D Canvas lineJoin属性， 并且会被WebGL渲染器忽略。

.wireframeLinewidth : Float
控制线框宽度。默认值为1。

由于OpenGL Core Profile与大多数平台上WebGL渲染器的限制，无论如何设置该值，线宽始终为1。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

2.2卡通网格材质(MeshToonMaterial)

MeshToonMaterial( parameters : Object )

parameters - (可选)用于定义材质外观的对象，具有一个或多个属性。 材质的任何属性都可以从此处传入(包括从Material和MeshStandardMaterial继承的任何属性)。

属性color例外，其可以作为十六进制字符串传递，默认情况下为 0xffffff（白色），内部调用Color.set(color)。

属性

.gradientMap : Texture
卡通着色的渐变贴图，默认值为null。

.isMeshToonMaterial : Boolean
用于检查此类或派生类是否为卡通网格材质。默认值为 true。

因为其通常用在内部优化，所以不应该更改该属性值。

.defines : Object
如下形式的对象:
{ 'TOON': '' };WebGLRenderer使用它来选择shaders。
1
2
3
4
5
6
7
8
9
10
11

2.3点材质(PointsMaterial)

Points使用的默认材质。

PointsMaterial( parameters : Object )

parameters - (可选)用于定义材质外观的对象，具有一个或多个属性。 材质的任何属性都可以从此处传入(包括从Material继承的任何属性)。

属性color例外，其可以作为十六进制字符串传递，默认情况下为 0xffffff（白色），内部调用Color.set(color)。

//This will add a starfield to the background of a scene
var starsGeometry = new THREE.Geometry();

for ( var i = 0; i < 10000; i ++ ) {

	var star = new THREE.Vector3();
	star.x = THREE.Math.randFloatSpread( 2000 );
	star.y = THREE.Math.randFloatSpread( 2000 );
	star.z = THREE.Math.randFloatSpread( 2000 );

	starsGeometry.vertices.push( star );

}

var starsMaterial = new THREE.PointsMaterial( { color: 0x888888 } );

var starField = new THREE.Points( starsGeometry, starsMaterial );

scene.add( starField );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

属性

.color : Color
材质的颜色(Color)，默认值为白色 (0xffffff)。

.isPointsMaterial : Boolean
用于检查此类或派生类是否为点材质。默认值为 true。

因为其通常用在内部优化，所以不应该更改该属性值。

.map : Texture
使用Texture中的数据设置点的颜色。

.morphTargets : Boolean
材质是否使用morphTargets。默认值为false。

.size : Number
设置点的大小。默认值为1.0。

.sizeAttenuation : Boolean
指定点的大小是否因相机深度而衰减。（仅限透视摄像头。）默认为true。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2.4原始着色器材质(RawShaderMaterial)

此类的工作方式与ShaderMaterial类似，不同之处在于内置的uniforms和attributes的定义不会自动添加到GLSL shader代码中。

RawShaderMaterial( parameters : Object )

parameters - (可选)用于定义材质外观的对象，具有一个或多个属性。 材质的任何属性都可以从此处传入(包括从Material 和 ShaderMaterial继承的任何属性)。

var material = new THREE.RawShaderMaterial( {
    uniforms: {
        time: { value: 1.0 }
    },
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent,

} );
1
2
3
4
5
6
7
8

属性

.isRawShaderMaterial : Boolean
用于检查此类或派生类是否为点材质。默认值为 true。

因为其通常用在内部优化，所以不应该更改该属性值。
1
2
3
4

2.5着色器材质(ShaderMaterial)

使用自定义shader渲染的材质。

var material = new THREE.ShaderMaterial( {
	uniforms: {
		time: { value: 1.0 },
		resolution: { value: new THREE.Vector2() }
	},
	vertexShader: document.getElementById( 'vertexShader' ).textContent,
	fragmentShader: document.getElementById( 'fragmentShader' ).textContent

} );
1
2
3
4
5
6
7
8
9

2.6阴影材质(ShadowMaterial)

此材质可以接收阴影，但在其他方面完全透明。

ShadowMaterial( parameters : Object )

parameters - (可选)用于定义材质外观的对象，具有一个或多个属性。 材质的任何属性都可以从此处传入(包括从Material 和 ShaderMaterial继承的任何属性)。

var planeGeometry = new THREE.PlaneGeometry( 2000, 2000 );
planeGeometry.rotateX( - Math.PI / 2 );

var planeMaterial = new THREE.ShadowMaterial();
planeMaterial.opacity = 0.2;

var plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.position.y = -200;
plane.receiveShadow = true;
scene.add( plane );
1
2
3
4
5
6
7
8
9
10

属性

.isShadowMaterial : Boolean
用于检查此类或派生类是否为阴影材质。默认值为 true。

因为其通常用在内部优化，所以不应该更改该属性值。

.lights : Boolean
材质是否受到光照的影响。默认值为 true。

.transparent : Boolean
定义此材质是否透明。默认值为 true。
1
2
3
4
5
6
7
8
9
10

2.7点精灵材质(SpriteMaterial)

一种使用Sprite的材质。

SpriteMaterial( parameters : Object )

parameters - (可选)用于定义材质外观的对象，具有一个或多个属性。 材质的任何属性都可以从此处传入(包括从Material 和 ShaderMaterial继承的任何属性)。

属性color例外，其可以作为十六进制字符串传递，默认情况下为 0xffffff（白色）， 内部调用Color.set(color)。 SpriteMaterials不会被Material.clippingPlanes裁剪。

var spriteMap = new THREE.TextureLoader().load( 'textures/sprite.png' );

var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap, color: 0xffffff } );

var sprite = new THREE.Sprite( spriteMaterial );
sprite.scale.set(200, 200, 1)

scene.add( sprite );
1
2
3
4
5
6
7
8

属性

.color : Color
材质的颜色(Color)，默认值为白色 (0xffffff)。 .map会和 color 相乘。

.fog : boolean
材质是否受场景雾的影响。默认值为false。

.lights : Boolean
材质是否受到光照的影响。默认值为 false。

.map : Texture
颜色贴图。默认为null。

.rotation : Radians
sprite的转动，以弧度为单位。默认值为0。

.sizeAttenuation : Boolean
精灵的大小是否会被相机深度衰减。（仅限透视摄像头。）默认为true。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

8、js库

1.1传输帧数库 Stats.js

initStats(type)

type参数：0：fps，1:ms，2:mb，3+:custom

var stats = initStats();
 
function renderScene() {
        stats.update();
        requestAnimationFrame(renderScene);
        renderer.render(scene, camera);
    }
1
2
3
4
5
6
7

1.2操作实验库 dat.GUI

 var gui = new dat.GUI();
 
 var controls = new function () {
        this.rotationSpeed = 0.02;
        this.bouncingSpeed = 0.03;
    };
    
 gui.add(controls, 'rotationSpeed', 0, 0.5);
 gui.add(controls, 'bouncingSpeed', 0, 0.5);
 
var trackballControls = initTrackballControls(camera, renderer);
var clock = new THREE.Clock();
function render() {
        // update the stats and the controls
        trackballControls.update(clock.getDelta());
        stats.update();
        
        // rotate the cube around its axes
        cube.rotation.x += controls.rotationSpeed;
        cube.rotation.y += controls.rotationSpeed;
        cube.rotation.z += controls.rotationSpeed;

        // bounce the sphere up and down
        step += controls.bouncingSpeed;
        sphere.position.x = 20 + (10 * (Math.cos(step)));
        sphere.position.y = 2 + (10 * Math.abs(Math.sin(step)));

        // render using requestAnimationFrame
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

9、场景

1.1场景（Scene）

属性

.fog : Fog
一个fog实例定义了影响场景中的每个物体的雾的类型。默认值为null。

.overrideMaterial : Material
如果不为空，它将强制场景中的每个物体使用这里的材质来渲染。默认值为null。

.autoUpdate : boolean
默认值为true，若设置了这个值，则渲染器会检查每一帧是否需要更新场景及其中物体的矩阵。 当设为false时，你必须亲自手动维护场景中的矩阵。

.background : Object
若不为空，在渲染场景的时候将设置背景，且背景总是首先被渲染的。 可以设置一个用于的“clear”的Color（颜色）、一个覆盖canvas的Texture（纹理），或是一个CubeTexture。默认值为null。

.children 返回场景中所有的对象列表，包括光源，摄像机等
1
2
3
4
5
6
7
8
9
10
11
12
13

方法

add(object) 向场景中添加对象，使用该方法还可以创建一个对象组

getObjectByName(name, recursive) 创建对象是可以指定唯一标识name，通过这个方法可以查询到name所对应的对象。recursive为true时在其子元素查找，为false时在调用者所有后代对象查找。
		scene.getObjectByName(name); 
		scene.getObjectById(id);
 
remove(object) 从场景中清除某个对象
 
traverse(function) 遍历调用者和调用者的所有后代
1
2
3
4
5
6
7
8
9

10、渲染器

1.1WebGLRenderer

let renderer = new THREE.WebGLRenderer({
    antialias: true, // true/false表示是否开启反锯齿
    alpha: true, // true/false 表示是否可以设置背景色透明
    precision: 'highp', // highp/mediump/lowp 表示着色精度选择
    premultipliedAlpha: false, // true/false 表示是否可以设置像素深度（用来度量图像的分辨率）
    preserveDrawingBuffer: true, // true/false 表示是否保存绘图缓冲
    maxLights: 3, // 最大灯光数
    stencil: false // false/true 表示是否使用模板字体或图案
  });
document.getElementById('threeCanvas').appendChild(renderer.domElement);
renderer.name = 'Renderer';
renderer.setClearColor(0xEEEEEE);
renderer.setSize(width, height);

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.map : Texture
颜色贴图。默认为null。

.rotation : Radians
sprite的转动，以弧度为单位。默认值为0。

.sizeAttenuation : Boolean
精灵的大小是否会被相机深度衰减。（仅限透视摄像头。）默认为true。

## 8、js库

### 1.1传输帧数库 Stats.js

initStats(type)

type参数：0：fps，1:ms，2:mb，3+:custom

```js
var stats = initStats();
 
function renderScene() {
        stats.update();
        requestAnimationFrame(renderScene);
        renderer.render(scene, camera);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1.2操作实验库 dat.GUI

 var gui = new dat.GUI();
 
 var controls = new function () {
        this.rotationSpeed = 0.02;
        this.bouncingSpeed = 0.03;
    };
    
 gui.add(controls, 'rotationSpeed', 0, 0.5);
 gui.add(controls, 'bouncingSpeed', 0, 0.5);
 
var trackballControls = initTrackballControls(camera, renderer);
var clock = new THREE.Clock();
function render() {
        // update the stats and the controls
        trackballControls.update(clock.getDelta());
        stats.update();
        
        // rotate the cube around its axes
        cube.rotation.x += controls.rotationSpeed;
        cube.rotation.y += controls.rotationSpeed;
        cube.rotation.z += controls.rotationSpeed;

        // bounce the sphere up and down
        step += controls.bouncingSpeed;
        sphere.position.x = 20 + (10 * (Math.cos(step)));
        sphere.position.y = 2 + (10 * Math.abs(Math.sin(step)));

        // render using requestAnimationFrame
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

9、场景

1.1场景（Scene）

属性

.fog : Fog
一个fog实例定义了影响场景中的每个物体的雾的类型。默认值为null。

.overrideMaterial : Material
如果不为空，它将强制场景中的每个物体使用这里的材质来渲染。默认值为null。

.autoUpdate : boolean
默认值为true，若设置了这个值，则渲染器会检查每一帧是否需要更新场景及其中物体的矩阵。 当设为false时，你必须亲自手动维护场景中的矩阵。

.background : Object
若不为空，在渲染场景的时候将设置背景，且背景总是首先被渲染的。 可以设置一个用于的“clear”的Color（颜色）、一个覆盖canvas的Texture（纹理），或是一个CubeTexture。默认值为null。

.children 返回场景中所有的对象列表，包括光源，摄像机等
1
2
3
4
5
6
7
8
9
10
11
12
13

方法

add(object) 向场景中添加对象，使用该方法还可以创建一个对象组

getObjectByName(name, recursive) 创建对象是可以指定唯一标识name，通过这个方法可以查询到name所对应的对象。recursive为true时在其子元素查找，为false时在调用者所有后代对象查找。
		scene.getObjectByName(name); 
		scene.getObjectById(id);
 
remove(object) 从场景中清除某个对象
 
traverse(function) 遍历调用者和调用者的所有后代
1
2
3
4
5
6
7
8
9

10、渲染器

1.1WebGLRenderer

let renderer = new THREE.WebGLRenderer({
    antialias: true, // true/false表示是否开启反锯齿
    alpha: true, // true/false 表示是否可以设置背景色透明
    precision: 'highp', // highp/mediump/lowp 表示着色精度选择
    premultipliedAlpha: false, // true/false 表示是否可以设置像素深度（用来度量图像的分辨率）
    preserveDrawingBuffer: true, // true/false 表示是否保存绘图缓冲
    maxLights: 3, // 最大灯光数
    stencil: false // false/true 表示是否使用模板字体或图案
  });
document.getElementById('threeCanvas').appendChild(renderer.domElement);
renderer.name = 'Renderer';
renderer.setClearColor(0xEEEEEE);
renderer.setSize(width, height);

1
2
3
4
5
6
7
8
9
10
11
12
13
14