学习Three.js——几何体(Geometry)

几何体

定义顶点

点由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)

widthheight:矩形的长和宽

widthSegmentheightSegment:将长、宽分段

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:内外半径之间的圆环数目

thetaStartthetaLength:和上面一样

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:斜角和拉伸体所用的材质

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/a13602955218/article/details/85222878