Studio: raycaster

🧑‍💻 Technical Support
,
1

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:
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 event available, but it doesn’t provide the face normal I need.
  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.

2

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

1 Like
3

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.

4

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.