Hello, I am new to THREE.js and what I am trying to do is creation of the wall from mouse clicks.
The code below allows me to create (after 4 mouse clicks) the shape and then to turn it into something that looks like the wall (ExtrudeBufferGeometry). The problem is this object has only one color that I can assign to. Is there a way to grant different colors to different ‘sides’ (up, down, etc).
Many thanks in advance!!!
function onMouseDown(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
intersects = raycaster.intersectObjects(objects);
if (intersects.length > 0) {
if (clickCount <= 3) {
controlPoints[clickCount] = intersects[0].point.clone();
var cp = new THREE.Mesh(new THREE.SphereGeometry(0.125, 16, 12), new THREE.MeshBasicMaterial({color: "red"}));
cp.position.copy(intersects[0].point);
scene.add(cp);
clickCount++;
} else {
//make new wall and stop function
shape = new THREE.Shape();
shape.moveTo(controlPoints[0].x, -controlPoints[0].z);
shape.lineTo(controlPoints[1].x, -controlPoints[1].z);
shape.lineTo(controlPoints[2].x, -controlPoints[2].z);
shape.lineTo(controlPoints[3].x, -controlPoints[3].z);
shape.lineTo(controlPoints[0].x, -controlPoints[0].z);
var extrudeSettings = {
steps: 1,
amount: 20,
bevelEnabled: false
};
var extrudeGeom = new THREE.ExtrudeBufferGeometry(shape, extrudeSettings);
extrudeGeom.rotateX(-Math.PI / 2);
var wall = new THREE.Mesh(extrudeGeom, new THREE.MeshStandardMaterial({
color: "lightgray"
}));
scene.add(wall);
controlPoints = [];
clickCount = 0;
};
};
};