【ThreeJS基础教程-初识Threejs】1.6各种各样的几何体

幻梦丶海炎

已于 2022-10-23 14:18:28 修改

阅读量1.3k

点赞数 3

分类专栏： Threejs基础教程文章标签： javascript 前端 ui

于 2022-10-18 11:29:31 首次发布

本文链接：https://blog.csdn.net/qq_42760477/article/details/127380781

版权

Threejs基础教程专栏收录该内容

29 篇文章 2 订阅

订阅专栏

学习ThreeJS的捷径

本段内容会写在0篇以外所有的，本人所编写的Threejs教程中

对，学习ThreeJS有捷径
当你有哪个函数不懂的时候，第一时间去翻一翻文档
当你有哪个效果不会做的时候，第一时间去翻一翻所有的案例，也许就能找到你想要的效果
最重要的一点，就是，绝对不要怕问问题，越怕找找别人问题，你的问题就会被拖的越久

如果你确定要走WebGL/ThreeJS的开发者路线的话，以下行为可以让你更快的学习ThreeJS

没事就把所有的文档翻一遍，哪怕看不懂，也要留个印象，至少要知道Threejs有什么
没事多看看案例效果，当你记忆的案例效果足够多时，下次再遇到相似问题时，你就有可能第一时间来找对应的案例，能更快解决你自己的问题
上述案例不只是官网的案例，郭隆邦技术博客，跃焱邵隼，暮志未晚等站点均有不少优质案例，记得一并收藏
http://www.yanhuangxueyuan.com/ 郭隆邦技术博客
https://www.wellyyss.cn/ 跃焱邵隼
http://www.wjceo.com/ 暮志未晚
这三个站点是我最常逛的站点，推荐各位有事没事逛一下，看看他们的案例和写法思路，绝对没坏处

常用内置几何体介绍

在ThreeJS中，官方提供了大量的内置几何体，比如说我们前面的教程中使用到的，BoxGeometry，PlaneGeometry
今天就着重对这些几何体做一个基本介绍

所有几何体均在官网中有对应的文档，在官网左上角的搜索框内，搜索geometry即可

立方缓冲几何体文档
在这里插入图片描述

接下来，我们就按顺序，来介绍每一个几何体

立方缓冲几何体BoxGeometry

前面都已经都用过很多次了，但是这一次会详细讲解

立方缓冲几何体属于比较常用的案例几何体

    function addMesh(){
        let geometry = new THREE.BoxGeometry(1,1,1,2,2,2);
        let material = new THREE.MeshBasicMaterial({
            color:"#ff0000",
            wireframe:true
        });
        mesh = new THREE.Mesh(geometry,material);
        scene.add(mesh);
    }

在这里插入图片描述
我们这次在材质中添加了一个属性：wireframe:true，这个属性可以让geometry以点线面的形式被渲染出来

这里我们的boxGeometry增加了后三个参数，这三个参数用于决定在 width，height,depth三个面的boxGeometry分段数，分段数越高，构成这个box使用的点线面数量越多

如果和之前一样，不写后面三个参数的话，后面三个参数的默认值均为1的情况下，我们渲染出来的效果是这样的
在这里插入图片描述

分段数的意义（该部分仅建议了解即可，无需深入）

分段数这个概念更多的是用于建模软件，当你拥有更多的点线面时，你就可以通过操作点线面来实现模型的变形操作，早期的threejs中，还使用着geometry的概念，geometry的概念中，就允许用户操作点线面来对图形进行变形操作

	//该操作在最新版已失效
	geometry.vecties[0].set(x,y,z);

新版本对应的操作：

	geometry.attributes.position.array[0] = x;
	geometry.attributes.position.array[1] = y;
	geometry.attributes.position.array[2] = z;

两种操作方式的不同，是因为，在早期，threejs中存在一个类为 geometry，也同时存在一个类为bufferGeomtry，但是因为geometry会存在过多占用内存和算力的问题，这个类最终被废除了

而变形操作，无论是对新人还是老手来说，都是一个比较麻烦的操作，这种问题，一般交给建模师去处理就好，只有极少数情况下，需要你去将通用图形变形的时候，也许你能用到这种概念

分段数的其他用途，暂时笔者在开发中没有发现，所以这里不做太多讨论，如果在看博客的你有相关的想法的话，可以在本文下留言讨论

构造器：new BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

上述构造器只需要知道前三个属性长宽高即可，后面三个为分段数，分段数必须为整数

圆形缓冲几何体CircleGeometry

圆形缓冲几何体官方介绍

	let geometry = new THREE.CircleGeometry( 1, 32 );

在这里插入图片描述
构造器：CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float)
radius — 圆形的半径，默认值为1
segments — 分段（三角面）的数量，最小值为3，默认值为8。
thetaStart — 第一个分段的起始角度，默认为0。（three o’clock position）
thetaLength — 圆形扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆。

官方的这段介绍可能比较专业，以下为个人解释：

属性名	值类型	默认值	属性说明
radius	Float	1	半径，这个属性无需解释
segments	Integer	8	构成圆形的三角面数量，这个与上方的boxGeometry的分段数有一定区别，如下图所示，这里的值越高，我们产生的正多边形就越接近于圆形，所以本质上这个函数创建的不是圆形而是正多边形，由segments来控制最终产生的正多边形的边的数量
thetaStart	float	0	一般来说，我们都会有一个画圆的起始位置
thetaLength	float	2π	这里是指画笔沿着圆心画了多长的距离

在这里插入图片描述
比如说想要创建一个半圆，我们从0开始画，然后让画笔画到180度的位置停下

        let geometry = new THREE.CircleGeometry(1, 24,0,Math.PI);

在这里插入图片描述

比如说想要创建一个倒半圆，我们从180度的位置开始画，然后画到360度（180 + 180）停下，这样就是一个下半圆

	let geometry = new THREE.CircleGeometry(1, 24,Math.PI,Math.PI);

在这里插入图片描述
这种圆形适合做基础的饼状图，但是仅仅适合2D的饼状图，如果想要做3D的饼状图，可以选用下面的圆柱缓冲几何体

圆柱缓冲几何体CylinderGeometry

这里我们和官方的顺序做了调换，第四个再讲ConeGeometry(圆锥缓冲几何体)

	let geometry = new THREE.CylinderGeometry(1, 1, 2, 32);

在这里插入图片描述
圆柱几乎和上面的圆柱一样，仅比圆形多两个参数

构造器：CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
radiusTop — 圆柱的顶部半径，默认值是1。
radiusBottom — 圆柱的底部半径，默认值是1。
height — 圆柱的高度，默认值是1。
radialSegments — 圆柱侧面周围的分段数，默认为8。
heightSegments — 圆柱侧面沿着其高度的分段数，默认值为1。
openEnded — 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。
thetaStart — 第一个分段的起始角度，默认为0。（three o’clock position）
thetaLength — 圆柱底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆柱。

圆柱高度就不解释了
openEnded设置为true时，会创建一个圆型管而不是一个圆柱
在这里插入图片描述
比起圆来说，圆柱更适合用于做饼状图，下面是一种饼状图演示
function addMesh(){

    let geometry1 = new THREE.CylinderGeometry(1, 1, 1, 32,1,false,0,Math.PI * 0.2);
    let material1 = new THREE.MeshStandardMaterial({color:"#ff0000"});
    let mesh1 = new THREE.Mesh(geometry1,material1);
    scene.add(mesh1);

    let geometry2 = new THREE.CylinderGeometry(1, 1, 1, 32,1,false,Math.PI * 0.2,Math.PI * 0.4);
    let material2 = new THREE.MeshStandardMaterial({color:"#8eff63"});
    let mesh2 = new THREE.Mesh(geometry2,material2);
    scene.add(mesh2);

    let geometry3 = new THREE.CylinderGeometry(1, 1, 1, 32,1,false,Math.PI * 0.6,Math.PI * 0.6);
    let material3 = new THREE.MeshStandardMaterial({color:"#1f99ff"});
    let mesh3 = new THREE.Mesh(geometry3,material3);
    scene.add(mesh3);

    let geometry4 = new THREE.CylinderGeometry(1, 1, 1, 32,1,false,Math.PI * 1.2,Math.PI * 0.8);
    let material4 = new THREE.MeshStandardMaterial({color:"#ff00e5"});
    let mesh4 = new THREE.Mesh(geometry4,material4);
    scene.add(mesh4);
}

在这里插入图片描述
这里对代码就不做详细解释了，只要搞明白绘制起点，绘制多少角度的概念后，理解这个饼状图应该不会太难

三角面相关（建议了解即可）

当我们看了3个Wireframe效果下的模型后，我们发现，图形上有很多个三角形，这个就是我们的三角面，在threejs中，所有的几何体，都是由一个个三角面构成，市面上常见的两种构成模型的方式，一种是使用三角面，一种是使用平行四边形

具体的三角面构成模型的原理，将在后续的BufferGeometry中提到

如果已经提前学习了WebGL的话，后续在学习BufferGeometry原理时，学习难度会相应降低很多

圆锥缓冲几何体ConeGeometry

圆锥缓冲几何体几乎和上面圆柱的构造器一致，唯一区别就是这里只需要传入下底面的半径即可

构造器
ConeGeometry(radius : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
radius — 圆锥底部的半径，默认值为1。
height — 圆锥的高度，默认值为1。
radialSegments — 圆锥侧面周围的分段数，默认为8。
heightSegments — 圆锥侧面沿着其高度的分段数，默认值为1。
openEnded — 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。
thetaStart — 第一个分段的起始角度，默认为0。（three o’clock position）
thetaLength — 圆锥底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆锥。

	let geometry = new THREE.ConeGeometry(0.5,2,16,1);

在这里插入图片描述
圆锥可以单独使用做成3D箭头，也可以搭配一个圆柱体做成一个高级3D箭头

    function addMesh(){

        let geometry = new THREE.ConeGeometry(0.5,2,16,1);
        let material = new THREE.MeshStandardMaterial({color:"#ff0000"});
        let mesh = new THREE.Mesh(geometry,material);
        scene.add(mesh);

        let geometry2 = new THREE.CylinderGeometry(0.35,0.35,2,16,1).translate(0,-2,0);
        let material2 = new THREE.MeshStandardMaterial({color:"#ff0000"});
        let mesh2 = new THREE.Mesh(geometry2,material2);
        scene.add(mesh2);
    }

在这里插入图片描述

箭头这里就仅做一个介绍，后续将会单独开一篇博客来讲解如何制作一个可以指向目标的箭头

边缘几何体EdgesGeometry

边缘几何体本质上是一个辅助对象，用于查看geometry的边缘
构造器
EdgesGeometry( geometry : BufferGeometry, thresholdAngle : Integer )
geometry — 任何一个几何体对象。
thresholdAngle — 仅当相邻面的法线之间的角度（单位为角度）超过这个值时，才会渲染边缘。默认值为1。
该几何体在后续加载模型的章节中会提到

形状缓冲几何体ShapeGeometry

讲这个之前，就要先讲Shape
shape的官方文档

在这里插入图片描述
官方的Shape案例

你可以使用Shape绘制出任何你想要的图形，但是，需要你一个坐标点一个坐标点的去输入你的绘制路径

然后使用创建好的Shape，来创建ShapeGeometry

	let x = 0, y = 0;
	let heartShape = new THREE.Shape();
	heartShape.moveTo( x + 5, y + 5 );
	heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y );
	heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7,x - 6, y + 7 );
	heartShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 );
	heartShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 );
	heartShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y );
	heartShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 );
	
	let geometry = new THREE.ShapeGeometry( heartShape );
	let material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
	let mesh = new THREE.Mesh( geometry, material ) ;
	scene.add( mesh );

在这里插入图片描述
使用上面的代码，可以创建出这样的一个2D心形

shape相当于绘制好的图形，shapeGeometry才是能显示出来的几何体

shapeGeometry用于创建一些比较容易创建的简单几何体，比如上面的心形，当你使用其他的geometry无法创建那些图形时，可以考虑使用ShapeGeometry

挤压几何体ExtrudeGeometry

挤压几何体可以理解为3D的ShapeGeometry，也是需要使用Shape来创建

将上面new ShapeGeometry，换成new ExtrudeGeometry，就出现了下面的效果
在这里插入图片描述
挤压几何体常用于使用Shape生成3D的柱状体

文本缓冲几何体TextGeometry

该几何体为extrudeGeometry的子类，后续在讲添加3D文字时会讲到

球缓冲几何体SphereGeometry

构造器：SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)
radius — 球体半径，默认为1。
widthSegments — 水平分段数（沿着经线分段），最小值为3，默认值为32。
heightSegments — 垂直分段数（沿着纬线分段），最小值为2，默认值为16。
phiStart — 指定水平（经线）起始角度，默认值为0。。
phiLength — 指定水平（经线）扫描角度的大小，默认值为 Math.PI * 2。
thetaStart — 指定垂直（纬线）起始角度，默认值为0。
thetaLength — 指定垂直（纬线）扫描角度大小，默认值为 Math.PI。
该几何体是通过扫描并计算围绕着Y轴（水平扫描）和X轴（垂直扫描）的顶点来创建的。因此，不完整的球体（类似球形切片）可以通过为phiStart，phiLength，thetaStart和thetaLength设置不同的值来创建，以定义我们开始（或结束）计算这些顶点的起点（或终点）。

当你能理解上面圆形的构造器时，球的构造器也无需过多的解释，分段数越高，球体圆滑程度越高，想要制作半球的话，可以通过改变经线纬线的初始位置，与绘制角度来制作

在这里插入图片描述
球体能做的东西可就太多了，比如说我们常见的地球，太阳，灯泡等，只要是个球体或者半球体的物体，均可以使用它来做

后续会有专门一篇博客来介绍如何制作一个地球

管道缓冲几何体TubeGeometry

关于这个几何体，将在后续写曲线与路径的时候会做讲解，本篇仅提一下名字

网格几何体WireframeGeometry

构造器：WireframeGeometry( geometry : BufferGeometry )
geometry — 任意几何体对象。

网格几何体其实是制作线框效果的另一种方式

网格几何体实际上是一种线构成的图形，它与材质中的wireframe的区别是，一种是使用geometry的方式，就是演员本身就是线条装，而wireframe则是让演员披上了透明到你只能看到线条的衣服，如果你在之前学习过WebGL底层，对这个理解起来会更容易

不常用几何体简介

以下几何体均在笔者的开发与学习中从未使用过，仅建议去官网了解一下即可，有兴趣的可以写几个案例试试看

多面缓冲几何体PolyhedronGeometry

官方解释为：多面体在三维空间中具有一些平面的立体图形。这个类将一个顶点数组投射到一个球面上，之后将它们细分为所需的细节级别。这个类由DodecahedronGeometry、IcosahedronGeometry、OctahedronGeometry和TetrahedronGeometry 所使用，以生成它们各自的几何结构。

该几何体是下面几个几何体的超类，不建议直接使用