Adding walls from mouse clicks

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"}));
    } 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"
      controlPoints = [];
      clickCount = 0;

It is only possible apply two different materials to ExtrudeGeometry. One for the side faces, the other one for the caps.

If this setup is not sufficient for you, you have to modify ExtrudeGeometry so it defines BufferGeometry.groups data differently.

1 Like

Wow, thanks a lot for quick response!! This is exactly what I needed! Thanks!