几何体
定义顶点:
点由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
:斜角和拉伸体所用的材质