几何体
定义顶点:
点由THREE.Vector(x,y,z)定义
var vertices = [
new THREE.Vector3(1,3,1),
new THREE.Vector3(1,3,-1),
new THREE.Vector3(1,-1,1),
new THREE.Vector3(1,-1,-1),
new THREE.Vector3(-1,3,-1),
new THREE.Vector3(-1,3,1),
new THREE.Vector3(-1,-1,-1),
new THREE.Vector3(-1,-1,1)
];
定义三角面:
三角面由THREE.Face3(p1,p2,p3)定义,其中p1,p2,p3是上一步中点的下标
var faces = [
new THREE.Face3(0,2,1),
new THREE.Face3(2,3,1),
new THREE.Face3(4,6,5),
new THREE.Face3(6,7,5),
new THREE.Face3(4,5,1),
new THREE.Face3(5,0,1),
new THREE.Face3(7,6,2),
new THREE.Face3(6,3,2),
new THREE.Face3(5,7,0),
new THREE.Face3(7,2,0),
new THREE.Face3(1,3,4),
new THREE.Face3(3,6,4),
];
需要注意的是,p1,p2,p3的顺序,若这三个点的创建顺序相对于摄像机是顺时针的,那么这个面是面向摄像机的,反之,若创建的顺序是逆时针的,那么这个面是背向摄像机的
创建几何体
var geom = new THREE.Geometry();
//将刚刚定义的顶点和面赋给几何体
geom.vertices = vertices;
geom.faces = faces;
//计算每个面的法向量,法向量决定了光线照射到面后所呈现出来的颜色
geom.computeFaceNormals();
几何体的种类
PlaneGeometry
矩形平面,用法
new THREE.PlaneGeometry(width,height,widthSegment,heightSegment)
width、height:矩形的长和宽
widthSegment、heightSegment:将长、宽分段
CircleGeometry
圆,用法
new THREE.CircleGeometry(redius,segments,thetaStart,thetaLength)
redius:半径
segments:组成圆的三角形的数量,值越大圆越光滑
thetaStart:从哪里开始画圆,范围0~2*PI
thetaLength:画多大的圆,范围0~2*PI
RingGeometry
扇形,
new THREE.RingGeometry()
innerRadius:扇形的内半径
outerRadius:扇形的外半径
thetaSegments:圆环的对角线数量,值越大圆越光滑
phiSegments:内外半径之间的圆环数目
thetaStart、thetaLength:和上面一样
BoxGeometry
立方体
new THREE.BoxGeometry(width,height,depth,widthSegment,heightSegment,depthSegment)
width,height,depth:立方体的长宽高
widthSegment,heightSegment,depthSegment:将长宽高分段
SphereGeometry
球体
new THREE.SphereGeometry(radius)
radius:半径
widthSegments:竖直方向的分段数,值越大球体越光滑
heightSegments:水平方向的分段数,值越大球体越光滑
phiStart:从x轴的什么地方开始绘制球体
phiLength:从x轴画过的角度
thetaStart:从y轴的什么地方开始绘制球体
thetaLength:从y轴画过的角度
CylinderGeometry
圆柱体
new THREE.CylinderGeometry()
radiusTop:圆柱顶部的半径
radiusButtom圆柱底部的半径
height:圆柱的高度
radialSegments:沿圆柱的半径分成多少段
heightSegments:沿圆柱的高度分成多少段
openEnded:圆柱的顶部和底部是否封闭
TorusGeometry
圆环
new THREE.TorusGeometry()
radius:圆环的半径
tube:管的半径
radiusSegments:沿圆环的长度方向分成的段数
tubularSegments:沿圆环宽度方向分成的段数
arc:弧度,画多大的圆环
TorusKnotGeometry
一个打结的圆环
new THREE.TorusKnotGeometry()
radius:圆环半径
tube:管的半径
radiusSegments:沿圆环的长度方向分成的段数
tubularSegments:沿圆环宽度方向分成的段数
p,q:设置圆环的打结的程度
height:拉伸圆环的程度
PolyhedronGeometry
多面体
new THREE.PolyhedronGeometry(vertices,indices,radius,detail)
vertices:定义每个顶点
indices:定义每个面所用的顶点
radius:多面体的大小
detail:将一个三角形分成四个小三角形,值越大,划分的小三角形越多
IcoshahedronGeometry
正二十面体
TetrahedronGeometry
正四面体
OctahedronGeometry
正八面体
DodecahedronGeometry
正十二面体
ConvexGeometry
根据一组点创造一个凸包,
new THREE.ConvexGeometry(points)
LatheGeometry
由一条曲线创造一个旋转体
new THREE.LatheGeometry(points,segments,phiStart,phiLength)
points:组成曲线的一组点
segment:创建图形的分段数目,值越大越光滑
phistart:从何处开始绘制
phiLength:绘制的图形的大小
ExtrudeGeometry
将一个二维图形拉伸成三维图形
new THREE.ExtrudeGeometry(shapes,options)
shapes:需要拉伸的图形(THREE.shapes对象)
amount:指定图形能拉多高
bevelThickness:斜角的高度,会影响拉伸的高度,斜角就是中间鼓起的部分
bevelSize:斜角的大小
bevelSegments:斜角的分段数,值越大斜角越光滑
bevelEnabled:是否使用斜角
curveSegments:沿拉伸方向的分段
steps:与curveSegments方向垂直的分段,值越大,平行的平面越多
extrudePath:沿着什么路径拉伸(THREE.CurvePath对象),默认为沿着z轴拉伸
material:定义前后面所用的材质
extrudeMaterial:斜角和拉伸体所用的材质


TubeGeometry
沿着一条曲线拉伸出一条管
new THREE.TubeGeometry(new THREE.SplineCurve3(points),segments,radius,radiusSegments,closed)
path:指定管的路径(SplineCurve3对象)
segments:构成管的分段数
radius:管的半径
radiusSegments:管沿圆周方向的分段
closed:管两端是否闭合


ParametricGeometry
根据一组等式创建几何体
new THREE.ParametricGeometry(function,slices,stacks)
function:定义几何体的函数
用法:
f = 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);
};
几何体由u,v两个值定义,取值范围为0~1,下面两个参数将u,v值分为多个组合,每个组合返回一个点,将所有点连接起来得到一个几何体
slices:定义u值分成多少份
stacks:定义v值分成多少份,这两个参数将u,v分成了slices*stacks个组合


TextGeometry
创建三维的文本
new THREE.TextGeometry(text,options)
size:文本大小
heigth:拉伸的高度
weight:字体的粗细,可选normal和bold
font:所用的字体名,默认helvetiker
style:字体的样式,可选normal和italic
bevelThickness:斜角的高度,会影响拉伸的高度
bevelSize:斜角的大小
bevelSegments:斜角的分段数,值越大斜角越光滑
bevelEnabled:是否使用斜角
curveSegments:沿拉伸方向的分段
steps:与curveSegments方向垂直的分段,值越大,平行的平面越多
extrudePath:沿着什么路径拉伸(THREE.CurvePath对象),默认为沿着z轴拉伸
material:定义前后面所用的材质
extrudeMaterial:斜角和拉伸体所用的材质
