three.jscsg

How do I construct a hollow cylinder in Three.js


I'm having difficulties constructing a hollow cylinder in Three.js.

Should I go and construct it using CSG or by stitching the vertices together?


Solution

  • This solution uses ChandlerPrall's ThreeCSG.js project: http://github.com/chandlerprall/ThreeCSG

    (For now, I recommend using the experimental version that supports materials - the uv branch - http://github.com/chandlerprall/ThreeCSG/tree/uvs)

    Here's the code you will need:

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