Hello,
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);
scene.add(mesh);
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.