threejs的CylinderGeometry解析

Three.js 中的CylinderGeometry类用于创建圆柱形或圆锥形状的几何体。它可以用来表示管道、柱子、杯子等圆柱形物体，也能通过调整参数创建圆锥体。

基本参数

CylinderGeometry构造函数的基本参数如下：

new THREE.CylinderGeometry(
  radiusTop,      // 顶部半径
  radiusBottom,   // 底部半径
  height,         // 高度
  radialSegments, // 径向分段数（圆柱侧面的分段数）
  heightSegments, // 高度分段数（圆柱高度方向的分段数）
  openEnded       // 是否开放两端（布尔值）
); 

示例代码

下面是一个使用CylinderGeometry创建不同形状的示例：

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });

// 创建圆柱体（上下半径相同）
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 32);
const cylinder = new THREE.Mesh(cylinderGeometry, material);
cylinder.position.x = -3;
scene.add(cylinder);

// 创建圆锥体（顶部半径为0）
const coneGeometry = new THREE.CylinderGeometry(0, 1, 2, 32);
const cone = new THREE.Mesh(coneGeometry, material);
cone.position.x = 0;
scene.add(cone);

// 创建顶部半径大于底部半径的圆台
const frustumGeometry = new THREE.CylinderGeometry(1.5, 0.5, 2, 32);
const frustum = new THREE.Mesh(frustumGeometry, material);
frustum.position.x = 3;
scene.add(frustum);

// 设置相机位置
camera.position.z = 5;

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  
  // 让物体旋转
  cylinder.rotation.y += 0.01;
  cone.rotation.y += 0.01;
  frustum.rotation.y += 0.01;
  
  renderer.render(scene, camera);
}
animate();

参数解释

• radiusTop和radiusBottom：分别控制圆柱顶部和底部的半径。当两者相等时，创建标准圆柱；当顶部半径为 0 时，创建圆锥；当两者不同且都不为 0 时，创建圆台。
• height：圆柱的高度。
• radialSegments：圆柱侧面的分段数，值越大，圆柱越光滑。
• heightSegments：圆柱高度方向的分段数，影响高度方向的细分程度。
• openEnded：是否开放两端。如果为true，圆柱的顶部和底部将没有面；如果为false，则会封闭两端。

应用场景

• 建筑模型中的柱子、管道。
• 机械零件中的圆柱体部件。
• 游戏中的障碍物或道具。
• 数据可视化中的柱状图等。

通过调整参数，你可以创建出各种圆柱形或圆锥形的 3D 对象。

>>

• 用代码实现一个带有纹理的圆柱
• CylinderGeometry可以和哪些Three.js的类配合使用？
• 除了CylinderGeometry，Three.js还有哪些几何体类？

参考：https://www.doubao.com/chat/10582028521114114