# Studio: raycaster

**URL:** <https://forum.8thwall.com/t/studio-raycaster/3469>\
**Category:** Technical Support\
**Tags:** raycasting, studio\
**Created:** [November 6, 2024, 7:59am UTC](https://forum.8thwall.com/t/studio-raycaster/3469 "2024-11-06T07:59:46Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alex\_Di\_Guida](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/alex_di_guida/32/369_2.png) [@Alex\_Di\_Guida](https://forum.8thwall.com/u/Alex_Di_Guida)\
**Post date:** [November 6, 2024, 7:59am UTC](https://forum.8thwall.com/t/studio-raycaster/3469/1 "2024-11-06T07:59:46Z")

</div>

Hi everyone,

I’m working on a WebAR experience and trying to use a raycaster in Studio to get the `face.normal` value from an intersection.

1. Initially, in a component, I used a standard THREE.Raycaster with the mesh and camera to define an intersection. However, I encountered an issue: I only have a box in my scene, and when I tap directly on the box, there’s no intersection detected, but tapping slightly below it triggers an intersection. I’m not quite sure what could be causing this issue. Here’s the code I used:

```auto
const tapPosition = new THREE.Vector2()
const raycaster = new THREE.Raycaster()
const {activeCamera} = world.three

const map = world.three.entityToObject
const mesh = map.get(eid)

const handleTouchStart = (evt) => {
      tapPosition.x = (evt.touches[0].clientX / window.innerWidth) * 2 - 1
      tapPosition.y = -(evt.touches[0].clientY / window.innerHeight) * 2 + 1

      // Update the picking ray with the camera and tap position.
      raycaster.setFromCamera(tapPosition, activeCamera)

      // Raycast against the mesh
      const intersects = raycaster.intersectObject(mesh)
      console.log({intersects})
      if (intersects.length > 0) {
        console.log('✅') // only working when tapping just bellow the mesh for some reason
      } else {
        console.log('❌')
      }
    }

    const canvasEl = document.querySelector('canvas')
    canvasEl.addEventListener('touchstart', handleTouchStart, true)

```

1. Then I realised there is this [SCREEN\_TOUCH\_START](https://www.8thwall.com/docs/studio/api/ecs/input/SCREEN_TOUCH_START/#event-properties) event available, but it doesn’t provide the face normal I need.

```auto
  world.events.addListener(eid, ecs.input.SCREEN_TOUCH_START, (evt) => {
      console.log({evt}) // With evt: { pointerId, position, target(= eid) }
   }

```

Is there a way to get the face.normal in the same way we would within an intersection using a standard THREE.Raycaster? Thank you.

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [November 6, 2024, 5:32pm UTC](https://forum.8thwall.com/t/studio-raycaster/3469/2 "2024-11-06T17:32:48Z")

</div>

At the moment this is the best way to do it, however this is valuable feedback for the team.

---

<div class="post-metadata">

**Author:** ![Alex\_Di\_Guida](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/alex_di_guida/32/369_2.png) [@Alex\_Di\_Guida](https://forum.8thwall.com/u/Alex_Di_Guida)\
**Post date:** [November 6, 2024, 10:38pm UTC](https://forum.8thwall.com/t/studio-raycaster/3469/3 "2024-11-06T22:38:42Z")

</div>

Thank you for your reply.

I will double check again the classic Raycaster approach but it doesn’t seem to work for me, as the intersection only happens when the tap is below the target mesh for some reason.

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [November 7, 2024, 3:18pm UTC](https://forum.8thwall.com/t/studio-raycaster/3469/4 "2024-11-07T15:18:15Z")

</div>

I would make sure that the collider on the mesh is what you would expect. You might need to apply all transforms in Blender as well.