# Adding walls from mouse clicks

**URL:** <https://discourse.threejs.org/t/adding-walls-from-mouse-clicks/15892>\
**Category:** Questions\
**Tags:** extrude-geometry\
**Created:** [June 4, 2020, 2:58pm UTC](https://discourse.threejs.org/t/adding-walls-from-mouse-clicks/15892 "2020-06-04T14:58:45Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mirko.simanic](https://avatars.discourse-cdn.com/v4/letter/m/919ad9/32.png) [@mirko.simanic](https://discourse.threejs.org/u/mirko.simanic)\
**Post date:** [June 4, 2020, 2:58pm UTC](https://discourse.threejs.org/t/adding-walls-from-mouse-clicks/15892/1 "2020-06-04T14:58:45Z")

</div>

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;
    };
  };
};
```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 4, 2020, 3:26pm UTC](https://discourse.threejs.org/t/adding-walls-from-mouse-clicks/15892/2 "2020-06-04T15:26:10Z")

</div>

> [@mirko.simanic](#):
>
> Is there a way to grant different colors to different ‘sides’ (up, down, etc).

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

> **[three.js dev template - module - JSFiddle - Code Playground](https://jsfiddle.net/m2bphoxa/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

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

---

<div class="post-metadata">

**Author:** ![mirko.simanic](https://avatars.discourse-cdn.com/v4/letter/m/919ad9/32.png) [@mirko.simanic](https://discourse.threejs.org/u/mirko.simanic)\
**Post date:** [June 4, 2020, 6:24pm UTC](https://discourse.threejs.org/t/adding-walls-from-mouse-clicks/15892/3 "2020-06-04T18:24:45Z")

</div>

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