three.js高级几何模型（一）

admin

高级几何模型分为：凸面模型、车床模型、塑性模型、管道模型、参量模型以及三维字体。
几何模型的组合指的是将一个或多个几何模型进行组合。
高级几何模型

介绍高级几何模型的前三个：凸面模型、车床模型和塑性模型。

• ConvexGeometry凸面模型
  

特点：在一组点的外面建立凸包（包围这组点的最小图形）。
举例：
var geometry = new THREE.ConvexGeometry(points);convexMesh = createMesh(geometry);Scene.add(convexMesh);
效果：

LatheGeometry车床模型


特点：通过一条光滑的样条曲线绕一个固定点旋转昌盛的模型。
属性：points（构成曲线的点）、segments（分段数目）、phiStart（开始位置）、phiLength（圆形完整程度）
举例：
var geometry = new THREE.LatheGeometry(    points, 12, 0, 2 * Math.PI);convexMesh = createMesh(geometry);Scene.add(convexMesh);
效果：

• ExtrudeGeometry 塑性模型
  

特点：将2D图形拉伸为3D几何模型。
构造：var geometry = new THREE ExtrudeGeometry(shapes, options)
属性：curveSegments （曲线上点的个数）、steps （用于细分拉伸的样条段数量）、amount （拉伸形状的深度）、bevelEnabled （打开斜面）、bevelThickness （在原来的形状里面弄多深的斜面）、bevelSize （斜面离形状轮廓的距离）、bevelSegments （斜面层的数量）、extrudePath （沿3D样条路径拉伸形状）、curveSegments（曲线分段数）、material（前后面的材质索引号）、extrudeMaterial （拉伸或斜化面的材质索引号）。
举例：
var options = {    amount: 2,    bevelThickness: 2,    bevelSize: 0.5,    bevelSegments: 3,    bevelEnabled: true,    curveSegments: 12,};Shape = createMesh(new THREE.ExtrudeGeometry(drawShape(), options));
效果：

• TubeGeometry管道模型
  

属性：path（用THREE.SplineCurve来指定管道应当遵循的路径）、segments（管道分段数）、radius（半径）、radiusSegments（圆周分段数）、closed（头尾是否相连）、debug（调试信息）。
举例：
var geometry = new THREE.TubeGeometry(    new THREE.SplineCurve3(points), 64, 1, 8, false);tubeMesh = createMesh(geometry);scene.add(tubeMesh);
效果：

Notes：
  在创建管道前需要将Vector3中获取的顶点转换成THREE.SplineCurve3，定义成曲线。

• ParametricGeometry参量模型
  

特点：基于等式的几何体。
属性：function（以u,v作为参数，返回vector3对象作为坐标），slices（u值分段），stacks（v值分段），useTris（true：三角面，false：四边形面）。
举例：
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 mesh = createMesh(new THREE.ParametricGeometry(radialWave, 120, 120, false));scene.add(mesh);
效果：

Notes：
u、v属性会传递给由function属性指定的函数，而且这两个属性的取值范围是0到1。通过slices和stacks属性，我们可以指定function函数会被调用多少次。这两个值越大，那么生成的向量就越多，创建出来的图形看上去就越光滑。

• TextGeometry 三维字体
  

构造：var text = new THREE.TextGeometry(text, parameters);
属性：font（字体）、size （大小）、height （文字厚度）、curveSegments （曲线点数）、bevelEnabled （是否打开斜面）、bevelThickness （文本斜面的深度）、bevelSize （斜面离轮廓的距离）。
Notes：
    TextGeometry使用typeface.json生成的字体. 一些已存在的字体可以在 /examples/fonts 下面找到，并需要把它们引入页面。
摘于公众号：砖人专语
小红转社区 - 满足对建筑开发的所有好奇​xhz.bos.xyz