如何在Three.js中构造空心圆柱体

Question

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

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

Answer 1

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);

Answer 2

此解决方案使用ChandlerParal的ThreeCSG.js项目：http://github.com/chandlerprall/ThreeCSG

（目前，我建议使用支持材料的实验版本-紫外线分支-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 );

Answer 3

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

Answer 4

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