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"}));
      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;
    };
  };
};

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

https://jsfiddle.net/m2bphoxa/

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!