如何在Three.js中構造空心圓柱體

Question

我在Three.js中構造空心圓柱體時遇到困難。

我應該去使用CSG或將頂點拼接在一起來構建它嗎？

Answer 1

該解決方案使用ChandlerPrall的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 2

這是不可能的，你將不得不縫合頂點。如果您的氣缸沒有厚度，您可以使用THREE.CylinderGeometry()。如果它確實有厚度，可以使用CSG。

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