跳至主要內容

geometry几何体

Emilia Zhen大约 3 分钟canvasthree.js

一个模型是由几何体Geometry和材质material组成。Three.js内置了很多的几何体种类，如：立方体、三棱锥、球、八面体、十二面体、二十面体等等

当前Three.js内置了这两种几何体类型Geometry和BufferGeometry，这两个几何体类型都是用于存储模型的顶点位置、面的索引、法向量、颜色、uv纹理以及一些自定义的属性

  1. Geometry
  • 使用了 Three.js 提供的 THREE.Vector3 或者 THREE.Color 这样的对象来存储数据
  • 易与阅读和编辑
  • 性能弱一些
  • 适合动画场景
  1. BufferGeometry
  • 存储数据原始
  • 不易阅读和编辑
  • 性能好
  • 适合存储一些放入场景内不需要再额外操作的模型

两种几何体类型可以互转

  • BufferGeometry 转换成 Geometry
var geo = new THREE.Geometry()
geo.fromBufferGeometry(bufferGeometry)
  • Geometry 转换成 BufferGeometry
var bufferGeo = new THREE.BufferGeometry()
bufferGeo.fromGeometry(geometry)

立方体

var geometry = new THREE.BoxGeometry(1, 1, 1)
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
var cube = new THREE.Mesh(geometry, material)
scene.add(cube)

BoxGeometry参数

  • width浮点类型
  • height浮点类型
  • depth浮点类型
  • widthSegments可选，整数类型，沿着边的宽度分割面的数量，默认1
  • heightSegments可选，整数类型，沿着边的高度分割面的数量，默认1
  • depthSegments可选，整数类型，沿着边的深度分割面的数量，默认1

圆形

var geometry = new THREE.CircleGeometry(5, 32)
var material = new THREE.MeshBasicMaterial({ color: 0xffff00 })
var circle = new THREE.Mesh(geometry, material)
scene.add(circle)

CircleGeometry参数

  • radius浮点类型，圆的半径，默认值1
  • segment整数类型，段数（三角形），最小值3，默认值8
  • thetaStart第一段的起始角度，默认值0
  • thetaLength圆形扇形的中心角，通常称为theta，默认值2*PI

圆锥

var geometry = new THREE.ConeGeometry(5, 20, 32)
var material = new THREE.MeshBasicMaterial({ color: 0xffff00 })
var cone = new THREE.Mesh(geometry, material)
scene.add(cone)

ConeGeometry参数

  • radius浮点类型，底部圆锥得半径，默认值1
  • height浮点类型，圆锥体高度，默认值1
  • radialSegments整数类型，圆锥周围得分段面数，默认值8
  • heightSegments整数类型，沿圆锥体高度的面的行数，默认值1
  • openEnded布尔类型，圆锥体底部是否隐藏，默认false
  • thetaStart浮点类型，第一段的起始角度，默认0
  • thetaLength浮点类型，圆形扇形的中心角，默认2*PI

圆柱

var geometry = new THREE.CylinderGeometry(5, 5, 20, 32)
var material = new THREE.MeshBasicMaterial({ color: 0xffff00 })
var cylinder = new THREE.Mesh(geometry, material)
scene.add(cylinder)

CylinderGeomertry参数

  • radiusTop浮点类型，顶部圆柱体半径，默认值1
  • radiusBottom浮点类型，底部圆柱体半径，默认值1
  • height
  • radialSegments
  • heightSegments
  • openEnded
  • thetaStart
  • thetaLength

球

var geometry = new THREE.SphereGeometry(5, 32, 32)
var material = new THREE.MeshBasicMaterial({ color: 0xffff00 })
var sphere = new THREE.Mesh(geometry, material)
scene.add(sphere)

SphereGeometry参数

  • radius浮点类型，球体半径，默认值 1
  • widthSegments整数类型，水平线段的数量，最小值3，默认8
  • heightSegments整数类型，垂直段的数量，最小值2，默认6
  • phiStart浮点类型，指定水平渲染起始角度，默认0
  • phiLength浮点类型，指定水平渲染角度大小，默认2*PI
  • thetaStart
  • thetaLength

平面

var geometry = new THREE.PlaneGeometry(5, 20, 32)
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide })
var plane = new THREE.Mesh(geometry, material)
scene.add(plane)

PlaneGeometry参数

  • width
  • height
  • widthSegments整数类型，宽度分段数，默认1
  • heightSegments整数类型，高度分段数，默认1

圆环

var geometry = new THREE.TorusGeometry(10, 3, 16, 100)
var material = new THREE.MeshBasicMaterial({ color: 0xffff00 })
var torus = new THREE.Mesh(geometry, material)
scene.add(torus)

TorusGeometry参数

  • radius浮点类型，圆环半径，从圆环中心到管中心，默认1
  • tube浮点类型，管的半径，默认0.4
  • radialSegments整数类型，横向分段数，默认8
  • tubularSegments整数类型，纵向分段数，默认6
  • arc浮点类型，绘制的弧度，默认2*PI
EmiliaZhen
Copyright © 2024 Emilia Zhen