上一章节实现了圆锥体的绘制，这节来绘制圆柱体，圆柱体就是矩形旋转获得，如上文一样，先要创建出基础的组件，包括场景，相机，灯光，渲染器。代码如下：
initScene() {
this.scene = new THREE.Scene();//创建一个Scene场景
},
initLight(){
const light = new THREE.DirectionalLight(0xffffff, 1);//创建一个灯光
this.scene.add(light)
},
initCamera(){
//创建一个透视相机，视角为45度，宽高比为window窗口的宽高比，0.1为近面，10000为远面
this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
this.camera.position.set(50,50,50);//设置相机位置
this.camera.lookAt(0,0,0);//设置相机位置
},
initRenderer(){//初始化渲染器
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.container = document.getElementById("container");//获取容器
this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);//设置渲染器的大小
this.container.appendChild(this.renderer.domElement);//将渲染器添加到容器中
this.renderer.setClearColor('#FFFFFF', 1.0);//设置背景颜色
},
initOrbitControls(){ //创建鼠标控制工具
this.orbitControls = new OrbitControls(this.camera, this.renderer.domElement);//创建控制器
},
initAnimate() { //循环渲染
requestAnimationFrame(this.initAnimate);
this.renderer.render(this.scene, this.camera);
},在 Three.js 中，CylinderGeometry是用于创建圆柱体几何形状的类。圆柱体在三维图形中是一种常见的基本形状。使用CylinderGeometry可以方便地创建各种不同尺寸和外观的圆柱体，可应用于构建机械模型、建筑结构、柱状物体等场景。
radiusTop：圆柱体顶部的半径，默认为 1。决定了圆柱体顶部圆面的大小。radiusBottom：圆柱体底部的半径，默认为 1。如果与radiusTop不同，可以创建圆锥台形状。height：圆柱体的高度，默认为 1。决定了圆柱体在垂直方向上的长度。radialSegments：圆柱体侧面的分段数，默认为 8。增加这个值可以使圆柱体侧面更加光滑。heightSegments：圆柱体高度方向上的分段数，默认为 1。增加这个值可以使圆柱体在高度方向上更加平滑。openEnded：一个布尔值，默认为 false。如果设置为 true，圆柱体的顶部和底部将不会被封闭，可以创建空心的圆柱体或部分圆柱体。thetaStart：起始角度，以弧度表示，默认为 0。用于控制圆柱体侧面的起始位置。thetaLength：侧面的弧度长度，默认为 2π。决定了圆柱体侧面展开的角度范围。
这里只选用部分参数来实现，代码如下：
initCylinderGeometry(){ //创建圆柱体
const geometry = new THREE.CylinderGeometry( 1, 1, 1, 32);
const material = new THREE.MeshBasicMaterial( {color: '#CCCCCC'} ); //创建材质，颜色为白色#CCCCCC
const cylinder = new THREE.Mesh( geometry, material ); //通过geometry和材质创建网格模型
this.scene.add( cylinder );//将网格模型添加到场景中
},效果：
但是因为颜色会纯色，看不出立体效果，我们将材质修改为只显示框架，只需要将材质修改为：
const material = new THREE.MeshBasicMaterial( {color: '#CCCCCC',wireframe:true} ); //创建材质，颜色为白色#CCCCCC
另外此方式也可以做成圆台体，只需要将上下的半径调整为不一致，
const geometry = new THREE.CylinderGeometry( 1, 2, 1, 32);
