携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情 >>
什么是图元
图元，就是就是一些 3D 的形状，在运行时根据大量参数生成，使用图元是种很常见的做法，像使用球体作为地球，或者使用大量盒子来绘制 3D 图形。 尤其是用来试验或者刚开始学习 3D。 对大多数 3D 应用来说，更常见的做法是让UI设计师在 3D 建模软件中创建 3D 模型， 像 Blender，Maya 或者 Cinema 4D。 因为咱们没有建模所需的技能，所以仅仅演示内置的图元
update in 2022年8月22日10:55:13 图元是threeJs里的基础材料，图元+材质+纹理构成一个完整的3D物体
立方缓冲几何体(盒子) BoxGeometry
BoxGeometry是四边形的原始几何类，它通常使用构造函数所提供的“width”、“height”、“depth”参数来创建立方体或者不规则四边形。
const width = 8; // ui: 宽度
const height = 8; // ui: 高度
const depth = 8; // ui: 深度
const widthSegments = 4; // ui: 宽度分段数
const heightSegments = 4; // ui: 高度分段数
const depthSegments = 4; // ui: 深度分段数
const geometry = new THREE.BoxGeometry(
width, height, depth,
widthSegments, heightSegments, depthSegments);
如图所示，长宽高，分段线
圆形缓冲几何体（平面圆） CircleGeometry
CircleGeometry是欧式几何的一个简单形状，它由围绕着一个中心点的三角分段的数量所构造，由给定的半径来延展。 同时它也可以用于创建规则多边形，其分段数量取决于该规则多边形的边数。
CircleGeometry一共接收四个参数，分别是，圆的半径，分成多少份，从多少度开始进行绘制, 绘制多少度，当绘制2π角度时，从多少度开始绘制这个参数无意义
const geometry = new THREE.CircleGeometry( 5, 32, 0, 2*Math.PI );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const circle = new THREE.Mesh( geometry, material );
scene.add( circle );
圆锥缓冲几何体（锥形）ConeGeometry
平平无奇的圆锥体
ConeGeometry 接收6各参数，分别是 底部圆的半径，圆锥体高度，圆锥体侧面分段数(指的是，几面体，最小为三面体，也就是三角锥，数字越大，则越圆，)圆锥体侧面沿高度分段数（指的是，在垂直方向上的分段，数字越大，则形成的圆锥越光滑），从多少角度开始绘制，绘制多少度
const geometry2 = new THREE.ConeGeometry( 5, 20, 32 );
const cone = new THREE.Mesh( geometry2, material );
cone.position.x = 20
