Threejs入门之七:Threejs中的几何体
前面的代码中我们一直使用立体缓冲几何体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) 
注意这里的分段数代表这个几何体可以分为几段，如果 widthSegments 设置为2，则代表这个几何体在宽度方向上分为两段，可能这个分段数不好理解，我们可以借助MeshLambertMaterial中的一个属性wireframe进行理解，wireframe属性是一个布尔值，开启wireframe属性可将几何体渲染为线框。默认值为false（即渲染为平面多边形）。我们在材质中添加wireframe属性为true，可以看到三维图形变成了线框组成的立体图形
const material = new THREE.MeshLambertMaterial({
color:0x00ffff,//设置颜色
wireframe:true,//线条模式渲染mesh对应的三角形数据
})
观察图形发现，这个立方体的每一个面都是有两个三角形组成的，如果我们把widthSegments 的值设置为2，
const geometry = new THREE.BoxGeometry(100,100,100,2) 我们发现，在宽度方向上，立方体从宽度的中间被一分为二了，这就是分段数的意思。如果设置为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)
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)运行浏览器， 效果如下
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)
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)刷新浏览器查看效果
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)
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)
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)
总结：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)腾讯云开发者
