javascriptthree.js3d-modelling

How to fill the space between two cylinder meshes. Three.js


I have a code that generates cylinders based on an array of 3d vectors. The problem is that they have those ugly spaces between them:

cylinders

Does any one know how I can fill them in the newest version of three.js? Thanks in advance!!


Solution

  • To fill the gaps, I'd suggest you just use a sphere with the same radius as the cylinders, centered at the point the two cylinders meet.

    Set height & width segment counts to match the cylinders so it all looks consistent.

    The parts that aren't filling the gap will just get hidden inside the cylinders, and won't be visible.

    If you want to keep the vertex count down, you could use the theta parameters on the Sphere Geometry to only generate the parts that you actually need to fill the gap. https://threejs.org/docs/?q=sphere#api/en/geometries/SphereGeometry

    Alternatively, if what you are really trying to achieve is a curved object with a circular cross-section, you could drop the cylinders altogether, and extrude a circle along a curve to achieve the shape that you want.

    https://threejs.org/docs/?q=extrude#api/en/geometries/ExtrudeGeometry https://threejs.org/examples/webgl_geometry_extrude_shapes.html