如何在 Threejs 中绘制开口曲线形状

Question

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

My target is to draw similar shapes but open ended like

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)

Answer 1

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