Threejs入门之七:Threejs中的几何体_three.boxgeometry

前面的代码中我们一直使用立体缓冲几何体BoxGeometry来构造物体，这样构造出来的是一个长方体或正方体，Threejs提供了很多几何体的API，如圆形缓冲几何体、圆锥缓冲几何体、圆柱缓冲几何体等，下面一一进行介绍
1.立方缓冲几何体（BoxGeometry），立方缓冲几何体我们前面已经使用过了，它是四边形的原始几何类，它通常使用构造函数所提供的“width”、“height”、“depth”参数来创建立方体或者不规则四边形。
BoxGeometry可以接收6个参数，具体如下
BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)
width — X轴上面的宽度，默认值为1。
height — Y轴上面的高度，默认值为1。
depth — Z轴上面的深度，默认值为1。
widthSegments — （可选）宽度的分段数，默认值是1。
heightSegments — （可选）高度的分段数，默认值是1。
depthSegments — （可选）深度的分段数，默认值是1。
添加立方缓冲几何体到场景中，前面也使用过，使用下面的代码可以将立方缓冲几何体添加到场景中

// 创建一个几何体，相当于在画布上想要呈现的物体
const geometry = new THREE.BoxGeometry(100,100,100) 

const material = new THREE.MeshLambertMaterial({
  color:0x0000ff
})  
const mesh = new THREE.Mesh(geometry,material)
 scene.add(mesh)  
1
2
3
4
5
6
7
8

注意这里的分段数代表这个几何体可以分为几段，如果
widthSegments 设置为2，则代表这个几何体在宽度方向上分为两段，可能这个分段数不好理解，我们可以借助MeshLambertMaterial中的一个属性wireframe进行理解，wireframe属性是一个布尔值，开启wireframe属性可将几何体渲染为线框。默认值为false（即渲染为平面多边形）。我们在材质中添加wireframe属性为true，可以看到三维图形变成了线框组成的立体图形

const material = new THREE.MeshLambertMaterial({
  color:0x00ffff,//设置颜色 
  wireframe:true,//线条模式渲染mesh对应的三角形数据
})
1
2
3
4

观察图形发现，这个立方体的每一个面都是有两个三角形组成的，如果我们把widthSegments 的值设置为2，

const geometry = new THREE.BoxGeometry(100,100,100,2) 
1

我们发现，在宽度方向上，立方体从宽度的中间被一分为二了，这就是分段数的意思。如果设置为3，则在宽度方向上被一分为三

2.圆形缓冲几何体（CircleGeometry）:CircleGeometry由围绕着一个中心点的三角分段的数量所构造，由给定的半径来延展。 同时它也可以用于创建规则多边形，其分段数量取决于该规则多边形的边数。
CircleGeometry接收四个参数，各参数定义如下
radius — 圆形的半径，默认值为1
segments — 分段（三角面）的数量，最小值为3，默认值为8。
thetaStart — 第一个分段的起始角度，默认为0。（three o’clock position）
thetaLength — 圆形扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆。
在场景中创建一个圆形缓冲几何体，添加如下代码

const geometry = new THREE.CircleGeometry( 100, 32 ); 
const material = new THREE.MeshLambertMaterial({
  color:0x00ffff,//设置颜色 
  wireframe:true, 
}) 
const mesh = new THREE.Mesh(geometry,material)
1
2
3
4
5
6

3.圆锥缓冲几何体（ConeGeometry）：ConeGeometry是用于生成圆锥几何体的类，它本身接收7个参数，各参数如下
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，这使其成为一个完整的圆锥。
在场景中添加一个圆锥缓冲几何体

// 创建圆锥缓冲几何体
const geometry = new THREE.ConeGeometry( 100, 400, 32 );
const material = new THREE.MeshLambertMaterial({
  color:0x00ffff,//设置颜色 
  // wireframe:true,//线条模式渲染mesh对应的三角形数据
})
const mesh = new THREE.Mesh(geometry,material)
1
2
3
4
5
6
7

运行浏览器， 效果如下

4.圆柱缓冲几何体（CylinderGeometry）：CylinderGeometry是用于生成圆柱几何体的类。构造函数如下
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，这使其成为一个完整的圆柱。
在场景中添加如下代码来添加一个圆柱

const geometry = new THREE.CylinderGeometry( 80, 80, 200, 32 );
const material = new THREE.MeshLambertMaterial({
  color:0x00ffff,//设置颜色  
})
const mesh = new THREE.Mesh(geometry,material)
1
2
3
4
5

5.边缘几何体（EdgesGeometry）：边缘几何体可以作为一个辅助对象来查看geometry的边缘。
边缘几何体需要配合线段LineSegments来使用，LineSegments在若干对的顶点之间绘制的一系列的线。LineSegments构造函数如下
LineSegments( geometry : BufferGeometry, material : Material )
geometry —— 表示每条线段的两个顶点。
material —— 线的材质，默认值是LineBasicMaterial。
在场景中添加边缘几何体

const geometry = new THREE.CylinderGeometry( 80, 80, 200, 32 );
const edges = new THREE.EdgesGeometry( geometry );
const line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
const material = new THREE.MeshLambertMaterial({
  color:0x00ffff,//设置颜色  
})
const mesh = new THREE.Mesh(geometry,material)
scene.add(line)
1
2
3
4
5
6
7
8

刷新浏览器查看效果

6.平面缓冲几何体（PlaneGeometry）：PlaneGeometry是用于生成平面几何体的类，其构造函数如下
PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)
width — 平面沿着X轴的宽度。默认值是1。
height — 平面沿着Y轴的高度。默认值是1。
widthSegments — （可选）平面的宽度分段数，默认值是1。
heightSegments — （可选）平面的高度分段数，默认值是1。
在场景中添加如下代码查看效果

const geometry = new THREE.PlaneGeometry( 100, 100 );
const material = new THREE.MeshLambertMaterial({
  color:0x00ffff,//设置颜色  
})
const mesh = new THREE.Mesh(geometry,material)
1
2
3
4
5

7.球缓冲几何体（SphereGeometry）：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设置不同的值来创建， 以定义我们开始（或结束）计算这些顶点的起点（或终点）。
在场景中添加球体

// 球体
const geometry = new THREE.SphereGeometry( 150, 32, 16 );
const material = new THREE.MeshLambertMaterial({
  color:0x00ffff,//设置颜色  
  wireframe:true,
})
const mesh = new THREE.Mesh(geometry,material)
1
2
3
4
5
6
7

8.圆环缓冲几何体（TorusGeometry）：TorusGeometry是用于生成圆环几何体的类。其构造函数如下
TorusGeometry(radius : Float, tube : Float, radialSegments : Integer, tubularSegments : Integer, arc : Float)
radius - 环面的半径，从环面的中心到管道横截面的中心。默认值是1。
tube — 管道的半径，默认值为0.4。
radialSegments — 管道横截面的分段数，默认值为8。
tubularSegments — 管道的分段数，默认值为6。
arc — 圆环的圆心角（单位是弧度），默认值为Math.PI * 2。
在场景中添加圆环

// 圆环
const geometry = new THREE.TorusGeometry( 100, 30, 16, 100 );
const material = new THREE.MeshLambertMaterial({
  color:0x00ffff,//设置颜色  
  wireframe:true,
})
const mesh = new THREE.Mesh(geometry,material)
1
2
3
4
5
6
7

总结：Threejs中提供了很多几何体的API，这里由于篇幅的原因，就不一一赘述了，具体可以查看Threejs的官方文档。
最后附上核心js代码如下

import * as THREE from 'three'
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js' 
// 创建一个三维场景 
const scene = new THREE.Scene() 
// 创建一个几何体 
// const geometry = new THREE.BoxGeometry(100,100,100,2) 
// 创建圆形缓冲几何体
// const geometry = new THREE.CircleGeometry( 100, 32 );  
// 创建圆锥缓冲几何体
// const geometry = new THREE.ConeGeometry( 100, 400, 32 );
//圆柱
// const geometry = new THREE.CylinderGeometry( 80, 80, 200, 32 );
//边缘几何体
// const edges = new THREE.EdgesGeometry( geometry );
// const line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
// const geometry = new THREE.PlaneGeometry( 100, 100 );
// 球体
// const geometry = new THREE.SphereGeometry( 150, 32, 16 );
// 圆环
const geometry = new THREE.TorusGeometry( 100, 30, 16, 100 );
const material = new THREE.MeshLambertMaterial({
  color:0x00ffff,//设置颜色  
  wireframe:true,
})
const mesh = new THREE.Mesh(geometry,material) 
// 设置物体在场景中的位置
mesh.position.set(0,10,0)
// 将物体添加到场景中 
scene.add(mesh)
// console.log(mesh);
// 创建环境光
const light = new THREE.AmbientLight(0x404040,1)
scene.add(light)  
// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff,1)
// 设置光源的方向 
directionalLight.position.set(80,100,50)
// 光的方向指向对象网格模型mesh，不设置默认为0,0,0
directionalLight.target = mesh
scene.add(directionalLight)
// 创建平行光辅助对象
const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight,10,0x00ff00)
scene.add(directionalLightHelper) 
const width = 600
const height = 400
const camera = new THREE.PerspectiveCamera(70,width/height,1,800)
// 设置相机的位置
camera.position.set(200,200,200) 
// 相机看原点
// camera.lookAt(0,0,0)
// 相机看向物体
camera.lookAt(mesh.position) 
// 创建webgl渲染器
const renderer = new THREE.WebGLRenderer()
// canvas画布宽高
renderer.setSize(width,height)
// 把渲染结果canvas画布，添加到网页上
// document.body.appendChild(renderer.domElement)
document.getElementById('webgl').appendChild(renderer.domElement)
// 定义一个render函数
function render() {
  // requestAnimationFrame  
  mesh.rotateY(0.01)//沿y轴旋转的弧度，单位 弧度
  renderer.render(scene,camera)
  requestAnimationFrame(render)//请求再次执行渲染函数render，渲染下一帧
}
render()
// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera,renderer.domElement)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70