CODEWITHSUNDEEP
three.jsgeometryshapescurve
USMANHEART
USMANHEART

Reputation: 113

How to draw open end curve shapes in Threejs

I am drawing curves/polygons by using ExtrudeBufferGeometry. Usually it always has closed ends. For example: enter image description here

My target is to draw similar shapes but open ended like

enter image description here enter image description here

Note that my target is not "LINES" or "Planes". It must have extrude and I just want continuous points keep combining with angle (angle can be any floating point value in radian)

Upvotes: 1

Views: 400

Answers (1)

M -
M -

Reputation: 28492

Your solution lies in the ExtrudeGeometry documentation, where it states:

When creating a Mesh with this geometry, if you'd like to have a separate material used for its face and its extruded sides, you can use an array of materials. The first material will be applied to the face; the second material will be applied to the sides.

So when generating the mesh, just pass 2 materials, the first one with visible: false so it doesn't get rendered.

const geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );

const materialFace = new THREE.MeshBasicMaterial( { visible: false } );
const materialSide = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

const mesh = new THREE.Mesh( geometry, [materialFace, materialSide] ) ;

Upvotes: 2

Related Questions