如何在 Three.js 中构造一个空心圆柱体答案

【问题标题】：How do I construct a hollow cylinder in Three.js如何在 Three.js 中构造一个空心圆柱体
【发布时间】：2012-08-03 08:04:38
【问题描述】：

我在 Three.js 中构建空心圆柱体时遇到了困难。

我应该使用 CSG 构建它还是将顶点缝合在一起？

【问题讨论】：

我有同样的问题，但措辞不同。 stackoverflow.com/questions/11638686/…

标签： three.js csg

【解决方案1】：

使用SVGloader 加载所需半径的圆（作为 SVG）。将几何体设置为ExtrudeBufferGeometry，并在拉伸设置对象中为其指定所需的高度作为深度。

【讨论】：

【解决方案2】：

本方案使用 ChandlerPrall 的 ThreeCSG.js 项目：http://github.com/chandlerprall/ThreeCSG

（目前我推荐使用支持材质的实验版-uv分支-http://github.com/chandlerprall/ThreeCSG/tree/uvs）

这是您需要的代码：

// Cylinder constructor parameters:  
// radiusAtTop, radiusAtBottom, height, segmentsAroundRadius, segmentsAlongHeight

var smallCylinderGeom = new THREE.CylinderGeometry( 30, 30, 80, 20, 4 );
var largeCylinderGeom = new THREE.CylinderGeometry( 40, 40, 80, 20, 4 );

var smallCylinderBSP = new ThreeBSP(smallCylinderGeom);
var largeCylinderBSP = new ThreeBSP(largeCylinderGeom);
var intersectionBSP = largeCylinderBSP.subtract(smallCylinderBSP);      

var redMaterial = new THREE.MeshLambertMaterial( { color: 0xff0000 } );
var hollowCylinder = intersectionBSP.toMesh( redMaterial );
scene.add( hollowCylinder );

【讨论】：

【解决方案3】：

var extrudeSettings = {
    amount : 2,
    steps : 1,
    bevelEnabled: false,
    curveSegments: 8
};

var arcShape = new THREE.Shape();
arcShape.absarc(0, 0, 1, 0, Math.PI * 2, 0, false);

var holePath = new THREE.Path();
holePath.absarc(0, 0, 0.8, 0, Math.PI * 2, true);
arcShape.holes.push(holePath);

var geometry = new THREE.ExtrudeGeometry(arcShape, extrudeSettings);

【讨论】：

【解决方案4】：

您不太可能必须将顶点缝合在一起。如果您的圆柱体没有厚度，您可以使用THREE.CylinderGeometry()。如果它确实有厚度，你可以使用CSG。

【讨论】：