three.js之几何体-三维圆柱CylinderGeometry(vue中使用three.js26)

1.CylinderGeometry几何体介绍

CylinderGeometry可以用来创建三维圆柱，创建时可输入以下参数：

属性	必须	描述
radiusTop	否	该属性定义圆柱顶部圆的半径，默认值是20
radiusBottom	否	该属性定义圆柱底部圆的半径，默认值是20
height	否	该属性定义圆柱的高度，默认是100
segmentsX	否	该属性指定沿X轴分成多少段，段数越多，圆柱越光滑，默认值是8
segmentsY	否	该属性指定沿Y轴分成多少段，段数越多，圆柱竖直方向分的面越多，默认值是1
openEnded	否	该属性用来指定圆柱顶部和底部是否封闭，默认false

创建三维圆柱的方式如下：
const geom = new THREE.CylinderGeometry(radiusTop,radiusBottom,height, segmentX, segmentsY, openEnded)

同样我们创建圆柱时需要的参数全部存储在一个parameters的属性中，如果想获取这些参数值就可以通过这个属性获取

2.demo说明

如上图，该示例支持以下功能

1. 通过radiusTop属性调整圆柱顶部的半径
2. 通过radiusBottom属性调整圆柱底部的半径
3. 通过height属性调整圆柱的高度
4. 通过segmentsX属性调整圆柱顶部和底部圆分段数量
5. 通过segmentsY属性调整圆柱Y轴方向分段数量
6. 通过openEnded属性调整圆柱底部和顶部是否封闭

3.demo代码

<template>
  <div>
    <div id="container"></div>
    <div class="controls-box">
      <section>
        <el-row>
          <div v-for="(item,key) in properties" :key="key">
            <div v-if="item&&item.name!=undefined">
              <el-col :span="8">
                <span class="vertice-span">{
   
   {
   
   item.name}}</span>
              </el-col>
              <el-col :span="13">
                <el-slider v-model="item.value" :min="item.min" :max="item.max" :step="item.step" :format-tooltip="formatTooltip"></el-slider>
              </el-col>
              <el-col :span="3">
                <span class="vertice-span">{
   
   {
   
   item.value}}</span>
              </el-col>
            </div>
          </div>
        </el-row>
        <el-row>
          <el-checkbox v-model="properties.openEnded">openEnded</el-checkbox>