three.js - 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

このソリューションは、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 );

Answer 3

頂点をつなぎ合わせる必要はほとんどありません。円柱に厚みがない場合は、 を使用できますTHREE.CylinderGeometry()。厚みがある場合は、CSG を使用できます。