three.js提供的立方体

本文介绍了three.js中用于创建不同几何体的方法,包括PlaneGeometry、CircleGeometry、ShapeGeometry、CubeGeometry等简单几何体,以及ConvexGeometry、LatheGeometry、TubeGeometry等复杂几何体。详细阐述了各个几何体的属性和使用示例,如PlaneGeometry的width、heightSegment参数,以及如何通过THREE.SceneUtils.createMultiMaterialObject显示几何体的面和网状结构。此外,还提到了TextGeometry的创建及自定义字体的添加。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

three.js提供的稍微简单点的几何体包括有:
  PlaneGeometry(平面)
  CircleGeometry(圆形)
  ShapeGeometry(塑性)
  CubeGeometry(立方体)
  CylinderGeometry(圆柱)
  TorusGeometry(圆环)
  TorusKnotGeometry(画面扭结)
  PolyhedronGeometry(多面体)
  IcosahedronGeometry(二十面体)
  OctahedronGeometry(八面体)
  TetraHedronGeometry(四面体)


稍微复杂点的几何体包括有:
  ConvexGeometry(凸面体)
  LatheGeometry(扫描体)
  ExtrudeGeometry(拉伸几何体)
  TubeGeometry(管状体)
  ParameterGeometry(参数几何体)
  TextGeometry(文本几何体)。


二维几何体PlaneGoemetry
new THREE.PlaneGeometry(10, 14, 4, 4)
 4个参数分别是width、height、widthSegment、heightSegment。其中widthSegment指定矩形的宽度应该划成几段,这里是在width和height方向都划分成4段
5af057f7608bc930dee5b0bb19a5d895.png


同时显示几何体的面和网状结构    可通过THREE.SceneUtils.createMultiMaterialObject来为几何体添加多个材质,从而由显示面的颜色也显示网状结构


var meshMaterial = new THREE.MeshNormalMaterial();
                meshMaterial.side = THREE.DoubleSide;
                var wireFrameMat = new THREE.MeshBasicMaterial();
                wireFrameMat.wireframe = true;

                var plane = THREE.SceneUtils.createMultiMaterialObject(new THREE.PlaneGeometry(10, 14, 4, 4), [meshMaterial, wireFrameMat]);

createMultiMaterialObject函数第一个参数是一个几何体对象,第二个参数是材质的数组,可传递多个。其实最终生成的是多个物体,只不过都重叠在一起。


CircleGeometry

很容易理解CircleGeoemtry用来画平面元的。属性包括:    属性/是否必填/描述
    radius/是/定义啊圆的半径
    segments(分段)/否/定义创建圆所有面的数量,最少三个。如果没有指定默认为8
    thetaStart(起始角)/否/定义从哪儿开始画圆。取值从0到2PI
    thetaLength(角度)/否/定义圆要花多大。如果没有指定,默认为2
PI整圆。如果指定为0.5PI则为四分之一个圆


ShapeGeometry

PlaneGeometry和CircleGeometry只有有限的方法来定制他们的外观。如果想创建一个自定义的二维图形,可以使用ShapeGeometry。ShapeGeometry没有比的选项可以定制图形。一般都是先创建一个Shape图形。用Shape图形绘图。Shape对象提供的函数绘制函数包括:
moveTo(x, y)/将绘图点移动到x、y坐标处
lineTo(x, y)/从当前位置绘制一条线到指定的x、y坐标处
quadriCurveTo(aCPx, aCPy, x, z)(二次曲面)/定义曲面,可以使用quadraticCurveTo函数或者bezierCurveTo函数绘制曲面。
bezierCurveTO(aCPx1, aCPy1, aCPx2, aCPy2, x, y)/画一条曲线。该曲线的绘制是基于两个定义曲线的坐标以及重点坐标(x,y)。起始点是当前位置。
splineThru(pts)/该函数沿着提供的坐标集合绘制一条光华曲线。这个参数应该是THREE.Vector2的对象数组
arc(ay, ay, aRadius, aSTartAngle, aEndAngle, aClockwise)/画圆或者一段圆弧。圆弧起始于当前位置。ax和ay用来指定圆心与当前位置之间的偏移量。aRadius设置圆大小,而aSTartAgnle和aEndAngle定义圆弧要画多长。布尔aCockwise决定这段圆弧是顺时针还是逆时针
absArc(ay, ay, aRadius, aSTartAngle, aEndAngle, aClockwise)/参考arc,其位置是绝对的,而不是相对于当前位置
ellipse(aX, aY, xRadius, aStartAngle, aEndAngle, aClockwise))/参考arc。作为补充,通过ellipse函数可以分别制定x轴半径和y轴半径
absEllipse(aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise)/参考ellipse描述。起位置时绝对,而不是相对于当前位置的相对值

Shape对象属性holes,通过往这个属性中国添加THEE.Shape对象,你可以在图形中打几个洞。Shape对象本身也有几个辅助函数,可永安里创建几何体。如下所示:

makeGeometry/该函数从shape对象返回一个ShapeGeometry对象
createPointsGeometry(divisions)/改函数将图形转换成一个点集。属性divisions分段数定义返回点的数目
createSpacedPointsGeoemtry(divisions)/该函数将图形转换为一个点集,但是这一次,分段数是一次性地应用到整个路径上
如果用createPointsGeometry或者createSpacedPointsGeometry函数创建一个点集,你可用这些点创建线段
new THREE.Line(shape.createPointsGeometry(10), new THREE.LineBasicMateial({color: 0xff3333, linewidth: 2})

SphereGeometry

这个几何体非常灵活,可以用来创建所有跟球体相关的几何体。下表中的属性可用来调整结果网格的外观:

属性/是否必填/描述   

radius/否/该属性设置球体的半径

widthSegments/否/指定竖直方向上的分段数。默认为8,最小为2

hieghtSegments/否/指定水平方向的分段数。默认为6,最小为2

phiStart/否/指定从x轴的什么地方开始绘制。取值范围从0到2*PI。默认为0

phiLength/否/指定从phiStart开始画多少。2*PI是整球,0.5*PI是四分之一球

thetaStart/否/指定从y轴的什么地方开始绘制。取值范围从0到PI。默认为0

thetaLength/指定从theata开始画多少。PI是征求,0.5PI只会绘制上半球

CylinderGeometry

创建CylinderGeometry时,没有必须提供的参数。直接调用new THREE.CylinderGeometry()即可创建一个圆柱。属性列表如下:

radiusTop/圆柱顶部尺寸,默认是20

radiusBottom/设置圆柱底部的尺寸,默认是20

height/属性设置圆柱的高度,默认是100

segmentsX/该属性设置沿x轴分成多少段,默认是8.这个数字越大,圆柱越光滑

segmentsY/该属性设置沿y轴分成多少段

openEnded/指定网格的顶部和底部是否封闭。默认为false

TorusGeometry

Torus圆环是一种简单的图形,看上去像甜甜圈。创建TorusGeometry没有必须提供的参数。参数列表为:

radius/设置完整环的尺寸,默认为100

tube/设置是管子的半径。默认为40

radialSegments/这个参数设置的是沿圆环长度方向分成的段数。默认是8

tabularSegments/这个参数设置沿圆环宽度方向分成的段数。默认是6

arc/通过该属性值,可以孔子是否绘制一个完整的圆环。默认是 2*PI

ConvexGeometry

通过ConvexGeometry可以在一组点的外面建立一个凸面。所谓凸面就是包围这组点的最小图形。如下面的代码,创建了一组随机的点,使用new THREE.ConvexGeometry(points)初始化这个包面图形。

function generatePoints(){
   
   
                var points = 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值