# How to disable clicking through the mesh

**URL:** <https://discourse.threejs.org/t/how-to-disable-clicking-through-the-mesh/24047>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [March 4, 2021, 9:16am UTC](https://discourse.threejs.org/t/how-to-disable-clicking-through-the-mesh/24047 "2021-03-04T09:16:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Robertas\_Liekis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/robertas_liekis/32/16787_2.png) [@Robertas\_Liekis](https://discourse.threejs.org/u/Robertas_Liekis)\
**Post date:** [March 4, 2021, 9:16am UTC](https://discourse.threejs.org/t/how-to-disable-clicking-through-the-mesh/24047/1 "2021-03-04T09:16:05Z")

</div>

Hello, everyone. I am trying to a simple app where you can highlight one of the three floors.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/6/f6864c0e53ffb5fad730a5ac54e3fdb34eaed3ff.png)  
The problem is if I click on the place where floors align, all of the meshes gets highlighted  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/b/5b2610df291952f19e59f2d4a9126dd93770e58d.png)

I image there should be a simple way to disable clicking through the mesh.

> ```
> import React, { useRef, useState, Suspense } from "react";
> import { Canvas, useFrame, useLoader, useThree, extend } from "react-three-fiber";
> import { softShadows } from "drei";
> import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
> import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
> import "./App.scss";
> 
> extend({ OrbitControls });
> 
> softShadows();
> 
> const Floor = ({ position }) => {
> const [colors, setColors] = useState(false);
> const changeColor = () => {
> let currentColors = colors;
> setColors(!currentColors);
> };
> 
> const { nodes } = useLoader(GLTFLoader, "./models/floor01.glb");
> return (
> <mesh geometry={nodes.floor1_1.geometry} onClick={() => changeColor()} rotation={[1.5, 0, 0]} position={position}>
> <meshStandardMaterial attach="material" color={colors ? "yellow" : "white"} />
> </mesh>
> );
> };
> 
> const CameraControls = () => {
> const {
> camera,
> gl: { domElement }
> } = useThree();
> const controls = useRef();
> useFrame((state) => controls.current.update());
> return <orbitControls ref={controls} args={[camera, domElement]} minDistance={150} />;
> };
> 
> const App = () => {
> return (
> <>
> <Canvas colorManagement shadowMap camera={{ position: [-5, 2, 10], fov: 60 }}>
> <CameraControls />
> <ambientLight intensity={0.3} />
> <pointLight position={[-10, 0, -20]} intensity={0.5} />
> <group>
> <Suspense fallback={null}>
> <Floor position={[0, 10, 0]} />
> <Floor position={[0, -10, 0]} />
> <Floor position={[0, 0, 0]} />
> </Suspense>
> </group>
> </Canvas>
> </>
> );
> };
> 
> ```

---

<div class="post-metadata">

**Author:** ![Fluqz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fluqz/32/6279_2.png) [@Fluqz](https://discourse.threejs.org/u/Fluqz)\
**Post date:** [March 4, 2021, 12:09pm UTC](https://discourse.threejs.org/t/how-to-disable-clicking-through-the-mesh/24047/2 "2021-03-04T12:09:36Z")

</div>

Its really hard to read react code to me, but in general you want to have a [Raycaster](https://threejs.org/docs/index.html#api/en/core/Raycaster) that fires a invisible ray beam from your mouse into the scene. The ray will hit objects and store the intersections in a array, sorted from nearest to farthest. For that to work, each of the floors have to be its own mesh/obj. Then you just get the first element of the interesection array

---

<div class="post-metadata">

**Author:** ![marcel\_pi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marcel_pi/32/14271_2.png) [@marcel\_pi](https://discourse.threejs.org/u/marcel_pi)\
**Post date:** [November 20, 2021, 8:48pm UTC](https://discourse.threejs.org/t/how-to-disable-clicking-through-the-mesh/24047/3 "2021-11-20T20:48:42Z")

</div>

> [@Robertas\_Liekis](#):
>
> `onClick={() => changeColor()}`

It’s probably due to the click event propagating, I had the same problem recently. Try using the stopPropagation method on the event and it should solve it:

> onClick={(ev) =\> {  
> ev.stopPropagation();  
> changeColor();  
> }

Let me know if it works.