How to make an extrude geometry same color (front & back)?


I am trying to create a shape with extrude geometry, but the shape is coming out to be double colored (desired color for MeshPhongMaterial in the front, and black on sides and back). The shape is a regular THREE.Shape() which consists of lines and arcs.

Here is the code for creating the Shape:

const shape = new THREE.Shape();
let pointType, arcPoints = [];
for (var i = 0; i < points.length; i++) {
        pointType = points[i][0];
        shape.moveTo(0, 0);
        if (pointType == LINE) {
            shape.moveTo(points[i][1], points[i][2]);
            shape.lineTo(points[i][3], points[i][4]);
        } else if (pointType == ARC) {
            shape.moveTo(0, 0);
            arcPoints = calculateArcPoints(points[i][1], points[i][2], points[i][3], points[i][4], points[i][5], points[i][6]);
            shape.ellipse(arcPoints[0], arcPoints[1], arcPoints[2], arcPoints[3], arcPoints[4], arcPoints[5], false);

Below is the code for extrude geometry settings and the Mesh material:

const extrudeSettings = {
        steps: 2,
        depth: 10,
        bevelEnabled: true,
        bevelThickness: 1,
        bevelSize: 1,
        bevelSegments: 2

    const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
    const material = new THREE.MeshPhongMaterial({
        color: 0x008000
    const mesh = new THREE.Mesh(geometry, material);

The output I’m getting is:

The expected outcome I want is that green color (or any custom color I choose in MeshPhongMaterial) on all sides of the shape.

I would really appreciate if anybody can help me with this.

Thank you.

You probably only have a single light that’s shining on the front face of your shape, but not on the sides. If you want a light that shines evenly from all angles, you could use THREE.AmbientLight

1 Like

If without lights. then need MeshBasicMaterial

@marquizzo Thanks. That helped. AmbientLight did the trick. On top of that, I was adding the PointLight to the scene. Instead adding it to the camera worked in my case.

@Chaser_Code Thanks for your response. The issue was not including AmbientLight.