# Why Raycast with GLTF not working

**URL:** <https://discourse.threejs.org/t/why-raycast-with-gltf-not-working/41200>\
**Category:** Questions\
**Tags:** raycasting, loaders\
**Created:** [August 8, 2022, 12:15pm UTC](https://discourse.threejs.org/t/why-raycast-with-gltf-not-working/41200 "2022-08-08T12:15:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![AdarkSt](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@AdarkSt](https://discourse.threejs.org/u/AdarkSt)\
**Post date:** [August 8, 2022, 12:15pm UTC](https://discourse.threejs.org/t/why-raycast-with-gltf-not-working/41200/1 "2022-08-08T12:15:37Z")

</div>

This is my code i don’t know why array of intersects is empty after intersectObjects and raycasting is not working

```javascript
import * as THREE from 'three'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

const renderer = new THREE.WebGL1Renderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.01, 1000)
camera.position.set(0.8, 2.4, 2.0)

const scene = new THREE.Scene()

scene.add(new THREE.AxesHelper(5))

const light = new THREE.PointLight()
light.position.set(3, 5, 5)
scene.add(light)

const controls = new OrbitControls(camera, renderer.domElement)

const loader: GLTFLoader = new GLTFLoader()

const raycaster = new THREE.Raycaster()
const sceneMeshes: THREE.Object3D[] = []

loader.load('models/vanguard.glb', 
    (object) => {
        console.log('object', object)
        object.scene.traverse( child => {
            if ((child as THREE.Mesh).isMesh) {
                sceneMeshes.push(child as THREE.Mesh) 
            }
        })
        scene.add(object.scene)
    }   
)

const arrowHelper = new THREE.ArrowHelper(
    new THREE.Vector3(),
    new THREE.Vector3(),
    0.25,
    0xffff00
)
scene.add(arrowHelper)

const render = () => {
    renderer.render(scene, camera)
}

const onMouseMove = (event: any) => {
    const mouse = {
        x: (event.clientX / renderer.domElement.width) * 2 - 1,
        y: (event.clientY / renderer.domElement.height) * 2 - 1 
    }

    raycaster.setFromCamera(mouse, camera)
    const intersects = raycaster.intersectObjects(sceneMeshes, false)
    
    if(intersects.length > 0) {
        
        const n = new THREE.Vector3()
        n.copy((intersects[0].face as THREE.Face).normal)

        arrowHelper.setDirection(n)
        arrowHelper.position.copy(intersects[0].point)
    }
}

renderer.domElement.addEventListener('mousemove', onMouseMove)

const resize = () => {
    camera.aspect = window.innerWidth / innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
    render()
}
window.addEventListener('resize', resize, false)

const animate = () => {
    requestAnimationFrame(animate)

    controls.update()

    render()
}

animate()

```

[vanguard.glb](https://discourse.threejs.org/uploads/short-url/pAFTr60vunGdDqXbnkJubxvQlvw.glb) (3.3 MB)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [August 8, 2022, 12:40pm UTC](https://discourse.threejs.org/t/why-raycast-with-gltf-not-working/41200/2 "2022-08-08T12:40:48Z")

</div>

Hi!  
Try to change this  
`y: (event.clientY / renderer.domElement.height) * 2 - 1 `  
into this  
`y: - ( event.clientY / renderer.domElement.height ) * 2 + 1 `

---

<div class="post-metadata">

**Author:** ![AdarkSt](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@AdarkSt](https://discourse.threejs.org/u/AdarkSt)\
**Post date:** [August 8, 2022, 5:21pm UTC](https://discourse.threejs.org/t/why-raycast-with-gltf-not-working/41200/3 "2022-08-08T17:21:53Z")

</div>

Hi! I just fix that but problem didn’t solved.  
intersects array is always empty has not intersected objects with ray

```javascript
import * as THREE from 'three'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

const renderer = new THREE.WebGL1Renderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.01, 1000)
camera.position.set(0.8, 2.4, 2.0)

const scene = new THREE.Scene()

scene.add(new THREE.AxesHelper(5))

const light = new THREE.PointLight()
light.position.set(3, 5, 5)
scene.add(light)

const controls = new OrbitControls(camera, renderer.domElement)

const loader: GLTFLoader = new GLTFLoader()

const raycaster = new THREE.Raycaster()
const sceneMeshes: THREE.Object3D[] = []

loader.load('models/vanguard.glb', 
    (object) => {
        console.log('object', object)
        object.scene.traverse( child => {
            if ((child as THREE.Mesh).isMesh) {
                sceneMeshes.push(child as THREE.Mesh) 
            }
        })
        scene.add(object.scene)
    }   
)

const arrowHelper = new THREE.ArrowHelper(
    new THREE.Vector3(),
    new THREE.Vector3(),
    0.25,
    0xffff00
)
scene.add(arrowHelper)

const render = () => {
    renderer.render(scene, camera)
}

const onMouseMove = (event: any) => {
    const mouse = {
        x: (event.clientX / renderer.domElement.width) * 2 - 1,
        y: -(event.clientY / renderer.domElement.height) * 2 + 1 
    }

    raycaster.setFromCamera(mouse, camera)
    const intersects = raycaster.intersectObjects(sceneMeshes, false)
    
    if(intersects.length > 0) {
        const n = new THREE.Vector3()
        n.copy((intersects[0].face as THREE.Face).normal)

        arrowHelper.setDirection(n)
        arrowHelper.position.copy(intersects[0].point)
    }
}

renderer.domElement.addEventListener('mousemove', onMouseMove)

const resize = () => {
    camera.aspect = window.innerWidth / innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
    render()
}
window.addEventListener('resize', resize, false)

const animate = () => {
    requestAnimationFrame(animate)

    controls.update()

    render()
}

animate()
 

```

---

<div class="post-metadata">

**Author:** ![AdarkSt](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@AdarkSt](https://discourse.threejs.org/u/AdarkSt)\
**Post date:** [August 8, 2022, 6:14pm UTC](https://discourse.threejs.org/t/why-raycast-with-gltf-not-working/41200/4 "2022-08-08T18:14:29Z")

</div>

But now i change this section in code and it is works.  
in this case when i log ‘m’ that is THREE.SkinnedMesh and raycasting doesn’t work, but when i create THREE.Mesh from ‘m’ geometry and material raycasting is works. So Problem is in SkinnedMesh. Is anyone know can i do raycasting with THREE.SkinnedMeshes?

```javascript
loader.load('models/vanguard.glb', 
    (object) => {
        console.log('object', object)
        object.scene.traverse( child => {
            if ((child as THREE.Mesh).isMesh) {
                const m = child as THREE.Mesh
                m.receiveShadow = true
                m.castShadow = true;
                (m.material as THREE.MeshStandardMaterial).flatShading = true
                sceneMeshes.push(new THREE.Mesh(m.geometry, m.material))
            }
        })
        scene.add(object.scene)
    }   
)

```

---

<div class="post-metadata">

**Author:** ![rrafw](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rrafw/32/36776_2.png) [@rrafw](https://discourse.threejs.org/u/rrafw)\
**Post date:** [June 2, 2023, 1:38am UTC](https://discourse.threejs.org/t/why-raycast-with-gltf-not-working/41200/5 "2023-06-02T01:38:42Z")

</div>

const loader = new GLTFLoader();  
loader.load( ‘models/gltf/Brain/Brain.glb’,  
( gltf ) =\> {   
model = gltf.scene;  
model.traverse( function ( object ) {  
if ( object.isMesh ) {   
object.material = wireFrameMaterial;  
object.material.flatShading = true;  
object.raycast(raycaster, object.geometry);  
scene.add(new THREE.Mesh(object.geometry, wireFrameMaterial));   
}  
} );

}  
);