How to draw open end curve shapes in Threejs

user_13030187 0
Viewed 74

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)

curve three.js shapes geometry
1 Answers

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] ) ;
user_26085150
Related