three.js学习二
物体：
物体由两部分组成，材质和形状
形状：
物体的形状，球体，正方体，线条，粒子等
直线线条：
var material = new THREE.LineBasicMaterial({//这是线段材质
color: 0x0000ff
});
var points = [];//折线端点
points.push( new THREE.Vector3( - 10, 0, 0 ) );
points.push( new THREE.Vector3( 0, 10, 0 ) );
points.push( new THREE.Vector3( 10, 0, 0 ) );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
//折线段
var line = new THREE.Line( geometry, material );
scene.add( line );
曲线：
曲线就是把将线条拆分成许多个直线段连接，达到曲线的效果
var curve = new THREE.EllipseCurve(//椭圆
0, 0, // ax, aY 圆心
10, 20, // xRadius, yRadius椭圆长宽，设置相等即为一个圆
0, 2 * Math.PI, // aStartAngle, aEndAngle开始弧度，结束弧度
false, // aClockwise是否顺时针绘制
0 // aRotation 旋转角度
);
var points = curve.getPoints( 50 );//拆分
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
// Create the final object to add to the scene
var ellipse = new THREE.Line( geometry, material );
还有其他的曲线如贝塞尔曲线，具体信息请查阅官网three.js
2D：
2D和3D的图形基本都有BufferGeometry和Geometry两种类型，Geometry是BufferGeometry的一种用户友好的替代方法。更易于阅读和编辑，但效率不如BufferGeometry。BufferGeometry适用于大型或严格的项目。二者使用方法都差不多。
| 类型 | 用法 |
|---|---|
| 平面几何 | THREE.PlaneGeometry( 5, 20, 10 ,10); |
| 圆几何 | THREE.CircleGeometry( 5, 32 ,0,2*PI) |
| 环形几何 | THREE.RingGeometry( 1, 5, 32, 8 , 0 , 2*PI ) |
| 多边形几何 | THREE.ShapeGeometry( shape )shape为多边形 |
平面几何：
var geometry = new THREE.PlaneGeometry(10, 20, 32, 32);
//x轴长度（宽），y轴长度（高）
//x轴切片数，y切片数 默认值都为1 ，可不写
var material = new THREE.MeshBasicMaterial({
color: 0xffff00,
});
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);
圆几何：
var geometry = new THREE.CircleGeometry( 5, 32,0,2*Math.PI );
//半径，
//切片数，最小值为3，默认值为8，一般设置为32比较像一个圆，太小了看起来像多边形
//画圆开始的地方 ，可不写
//总弧度，0-2*PI,2*PI表示一个完整的圆 ，可不写
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var circle = new THREE.Mesh( geometry, material );
scene.add( circle );
环形几何：
var geometry = new THREE.RingGeometry(1, 5, 32, 8, 0, 2 * Math.PI);
//内圈半径，默认值为0.5
//外圈半径，默认值为1
//切片数，最小值为3，默认值为8，一般设置为32比较像一个圆，太小了看起来像多边形
//纵方向的切片数，就是外圈到内圈方向，最小值为1.默认值为8，可不写
//开始的位置，默认为0 ，可不写
//总弧度，0-2*PI,2*PI表示一个完整的圆，默认为完整的圆 ，可不写
var material = new THREE.MeshBasicMaterial({
color: 0xffff00,
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
多边形几何：
即自定义几何形状
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 );
var heartShape = new THREE.Shape();
Shape()共有以下几种绘画方式：
.moveTo ( x : Float, y : Float ) :
创建一个新路径，并把画笔位置移到固定位置
.lineTo ( x : Float, y : Float ) : this
画一个直线
.quadraticCurveTo ( cpX : Float, cpY : Float, x : Float, y : Float ) : this
二次贝塞尔曲线
.bezierCurveTo ( cp1X : Float, cp1Y : Float, cp2X : Float, cp2Y : Float, x : Float, y : Float ) : this
贝塞尔曲线
.splineThru ( points : Array ) : this
将曲线数组连接到当前路径
3D：
| 类型 | 用法 |
|---|---|
| 长方体 | THREE.BoxGeometry( 1, 1, 1 ) |
| 四面体 | THREE.TetrahedronGeometry( 10，0) |
| 八面体 | THREE.OctahedronGeometry( 10，0 ) |
| 十二面体 | THREE.DodecahedronGeometry(10，0 ) |
| 二十面体 | THREE.DodecahedronGeometry(10，0 ) |
| 球体 | THREE.SphereGeometry( 5, 32, 32 ) |
| 圆柱体 | THREE.CylinderGeometry(5,5,20) |
| 圆锥体 | THREE.ConeGeometry(5,5,20) |
| 圆环几何 | THREE.TorusGeometry( 10, 3, 16, 100 ); |
| 管道体 | THREE.TubeGeometry( path, 20, 2, 8, false ) |
| 圆环结 | THREE.TorusKnotGeometry( 10, 3, 100, 16 ) |
| 车床几何 | THREE.LatheGeometry( points ) |
| 挤压几何 | THREE.ExtrudeGeometry( shape, extrudeSettings ) |
| 参数几何 | THREE.ParametricGeometry(function, slices, stacks) |
| 文字 | THREE.TextGeometry(‘Hello three.js!’,option) |
长方体：
var geometry = new THREE.BoxGeometry( 10, 10, 10, 1, 1, 1 );
//width —宽度；即，平行于X轴的边的长度。可选的; 默认值为1
//height —高度；即，平行于Y轴的边缘的长度。可选的; 默认值为1
//depth —深度；默认为1 。即，平行于Z轴的边的长度。可选的; 默认为1
//widthSegments —沿边的宽度分割的矩形面的数量。可选的; 默认为1
//heightSegments —沿边的高度分割的矩形面的数量。可选的; 默认值为1
//depthSegments —沿边的深度分割的矩形面的数量。可选的; 默认为1。
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
四面体：
var geometry = new THREE.TetrahedronGeometry( 10,0);
//直径
//默认值为0，int 当值不为0时是其他的多面体，取值为5以上接近于一个球体
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
八面体：
var geometry = new THREE.OctahedronGeometry( 10,0);
//使用方法和参数与四面体一样，接近于球体的指数不一样而已
十二面体和二十面体同理：
var geometry = new THREE.DodecahedronGeometry( 10,0);
//十二面体
var geometry = new THREE.IcosahedronGeometry( 10,0);
//二十面体
球体：
var geometry = new THREE.SphereGeometry( 15, 32, 32 );
//radius —球体半径。默认值为1 所有值都为可选
//widthSegments —水平线段数。最小值为3，默认值为8，不同半径取不同值趋近于圆，一般取值32即可趋近于圆
//heightSegments —垂直线段数。最小值为2，默认值为6，取值32趋近于圆
//phiStart-指定水平起始角度。默认值为0
//phiLength-指定水平扫角大小。默认值为Math.PI *2
//thetaStart-指定垂直起始角度。默认值为0
//thetaLength-指定垂直扫角大小。默认值为Math.PI*2。
//通过绕Y轴（水平扫描）和Z轴（垂直扫描）扫掠并计算顶点来创建几何。因此，可以通过使用phiStart，phiLength，thetaStart和thetaLength的不同值来创建不完整的球体（类似于“球体切片”），以便定义我们开始（或结束）计算这些顶点的点。
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
圆柱体：
var geometry = new THREE.CylinderGeometry(5,5,20,32,1,false,0,2*MATH.PI);
//radiusTop —圆柱顶部的半径。默认值为1，取0则为圆锥
//radiusBottom —底部圆柱的半径。默认值为1
//height —圆柱体的高度。默认值为1
//radiusSegments—圆柱周围的分段面数。默认值为8，取值大小决定是否接近圆
//heightSegments —沿着圆柱体高度的面的行数。默认值为1
//openEnded —布尔值，指示圆柱体的端部是开放的还是封闭的。默认值为false，表示封闭
//thetaStart —第一段的起始角度，默认为0（三点钟位置）。
//thetaLength —圆形扇区的中心角，通常称为theta。默认值为2 * Pi，完整的圆柱体。
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );
圆锥体：
var geometry = new THREE.ConeGeometry( 5,20,32,1,false,0,2*MATH.PI);
//取值和圆柱一样，没有上半径
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cone = new THREE.Mesh( geometry, material );
scene.add( cone );
圆环几何：
var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
//radius-圆环的半径，从圆环的中心到管的中心。默认值为1
//tube —管的半径。默认值为0.4。
//radiusSegments —默认值为8，设置为2则为平面环形
//tubularSegments —默认值为6，趋近于圆
//arc—中心角。默认值为Math.PI * 2。
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var torus = new THREE.Mesh( geometry, material );
scene.add( torus );
管道体：
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 );
};
//声明了一个CustomSinCurve类，这个类继承自THREE.Curve类，然后重写了类的getPoint方法。
//在THREE.Curve类中getPoint方法的描述：返回在曲线中给定位置 t 的向量
var path = new CustomSinCurve( 10 );
var geometry = new THREE.TubeGeometry( path, 20, 2, 8, false );
//path — Curve - （曲线，路径，即管道的形状）
//tubularSegments — Integer - default is 64（管道分成多少段）
//radius — Float - default is 1（管道的半径）
//radialSegments — default is 8 （管道口分成多少段，即管道口是几边形）
//closed — default is false （是否闭合管道，首尾相接的意思）
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
圆环结：
var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 ,5,7);
//radius-圆环的半径。默认值为1。
//tube —管的半径。默认值为0.4。
//LinearSegments —默认值为64。
//radiusSegments —默认为8。
//p —该值确定几何体绕其旋转对称轴缠绕多少次。默认值为2。
//q-该值确定几何体在圆环内部绕一圈缠绕多少次。默认值为3。
//如果p和q不互质，则结果将为环面链接。
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var torusKnot = new THREE.Mesh( geometry, material );
scene.add( torusKnot );
车床几何：
创建具有轴向对称性的网格（如花瓶）。车床绕Y轴旋转
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 );
挤压几何：
将2D形状拉伸为3D几何形状
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 = {
curveSegments : 16,//曲线上的点数。默认值为12。
steps: 2,//用于沿拉伸样条深度切片。默认值为1。
depth: 16,//深度以挤压形状。默认值为100
bevelEnabled: true,//将斜角应用于形状。默认为true。
bevelThickness: 6,//斜角进入原始形状的深度。默认值为6。
bevelSize: 1,//与斜角延伸的形状轮廓的距离。默认值为bevelThickness-2。
bevelOffset: 0,//距斜角起始形状轮廓的距离。默认值为0。
bevelSegments: 1,//斜角层数。默认值为3。趋近圆润
//extrudePath: 1,//THREE.Curve。3D样条线路径，应沿着该路径拉伸形状。路径拉伸不支持斜角。
//UVGenerator —对象。提供UV generator functions
};
var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );
参数几何：
可以根据传入的公式，计算出相应的几何体
var radialWave = function (u, v) {
var r = 50;
var x = Math.sin(u) * r;
var z = Math.sin(v / 2) * 2 * r;
var y = (Math.sin(u * 4 * Math.PI) + Math.cos(v * 2 * Math.PI)) * 2.8;
return new THREE.Vector3(x, y, z);
};
var geometry = new THREE.ParametricGeometry( radialWave, 25, 25 );
//slices 该属性定义u值应该分成多少份
//stacks 该属性定义v值应该分成多少份
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var radialWave= new THREE.Mesh( geometry, material );
scene.add( radialWave);
可以参考更多
文字：
THREE.js通过把文字设成Geometry类来创建三维文字
需要用到THREE.FontLoader()函数来加载字体文件，字体文件需要下载同一项目文件夹下
var loader = new THREE.FontLoader();
var geometry;
loader.load('helvetiker_regular.typeface.json',//下载好的字体文件
//加载好字体后创建三维文字
function(font) {
geometry = new THREE.TextGeometry('Hello three.js!', {//文字
font: font,
size: 50,//字体大小
height: 5,//挤出文字的厚度。默认值为50
curveSegments: 12,//曲线上的点数。默认值为12。
bevelEnabled: true,//打开斜角。默认值为False
bevelThickness: 10,//文字斜角的深度如何。默认值是10。
bevelSize: 8,//距文字轮廓多远是斜角。默认值为8。
bevelSegments: 5//斜角段的数量。默认值为3。
});
//创建材质
var meshMaterial = new THREE.MeshNormalMaterial({
flatShading: THREE.FlatShading,
transparent: true,
opacity: 0.9
});
var mesh = new THREE.Mesh(geometry, meshMaterial);
mesh.position.set(-300, 0, 0);
scene.add(mesh);
},
//加载进度
function(xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
},
//出现错误
function(err) {
console.log(err);
}
);
材质：
材质可以理解为皮肤，一个球体，可以是篮球也可以是足球，材质决定他的类别