Extrude Geometry, side material separate from front and rear?

Questions
, ,
1

Hi,
I’m using Extrude Geometry to extrude shape paths from imported SVGs.
All is working relatively well.

I’d like to apply flat sharing true/false to the front/back faces, and the sides of the extruded object separately, so that I have flat shading only on the front and back, while I get the shading on the curved sides (and bevels) of the resulting object.

Possibly a way to apply separate materials to each geometry area??

If anyone knows of any example code off hand that produces this desirable effect, then please share.
Thanks!

2

Try this:

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.

https://threejs.org/docs/index.html?q=extr#api/en/geometries/ExtrudeGeometry

2 Likes
3

Thank you for that. I missed that.
Any idea how the code might go in stating the materials as an array?
Thanks

4 
// ARRAY OF MATERIALS
    var materials = [
        new THREE.MeshBasicMaterial({
            color: 0xff0000
        }),
        new THREE.MeshBasicMaterial({
            color: 0x00ff00
        }),
        new THREE.MeshBasicMaterial({
            color: 0x0000ff
        })
     ];
...
...
    var mesh = new THREE.Mesh( geometry, materials);

Stolen here:
https://dustinpfister.github.io/2018/05/14/threejs-mesh-material-index/

2 Likes