# Can't detect GLB model with Raycaster

**URL:** <https://discourse.threejs.org/t/cant-detect-glb-model-with-raycaster/8207>\
**Category:** Questions\
**Tags:** raycaster\
**Created:** [June 21, 2019, 11:10am UTC](https://discourse.threejs.org/t/cant-detect-glb-model-with-raycaster/8207 "2019-06-21T11:10:09Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Boris\_Bek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/boris_bek/32/5493_2.png) [@Boris\_Bek](https://discourse.threejs.org/u/Boris_Bek)\
**Post date:** [June 21, 2019, 11:10am UTC](https://discourse.threejs.org/t/cant-detect-glb-model-with-raycaster/8207/1 "2019-06-21T11:10:09Z")

</div>

Hello everyone Can someone help me with my issue I need to detect my model with click, I am using Three.js in Vue.js. I successfully load my glb model into scene but after I cant detect my model with click  
I am using RAYCASTER to approach this task.  
below is my code  
Thank you In Advance.

```auto
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';

export default {
  name: 'THREETest',
  data: function() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      gltf: null,
      orbit: null,
      control: null,
      loader: null,
      array_buffer: null,

      raycaster: null,
      mouse: null,
      intersects: null,

    };
  },
  mounted: function() {

    let container = this.$refs.container;
    // SET AND ADD CAMERA
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    this.camera.position.z = 1;

    // ADD SCENE
    this.scene = new THREE.Scene();

    // ADD LIGHT TO SCENE
    this.light = new THREE.AmbientLight(0xffffff, 5.3);
    this.scene.add(this.light);

    // RENDER IN PAGE
    this.renderer = new THREE.WebGLRenderer({antialias: true});
    this.renderer.setClearColor('#dbdbdb');
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.renderer.gammaFactor = 1.5;
    this.renderer.gammaOutput = true;
    container.appendChild(this.renderer.domElement);

    // SET GRID HELPER
    const size = 10;
    const divisions = 25;
    this.gridHelper = new THREE.GridHelper( size, divisions );
    this.scene.add( this.gridHelper );

    // SET ORBIT CONTROLS
    this.orbit = new OrbitControls( this.camera, this.renderer.domElement );
    this.orbit.addEventListener("change", () => this.renderer.render(this.scene, this.camera));

    // SET MODEL CONTROL
    this.control = new TransformControls( this.camera, this.renderer.domElement );
    this.control.setSize(1);
    this.control.addEventListener( 'change', () => { this.renderer.render(this.scene, this.camera); });

    // EVENT LISTNER TO ENABLE ORBIT CAMERA AND CHANGE VALUE OF INPUTS
    this.control.addEventListener( 'dragging-changed', ( event ) => {
      this.orbit.enabled = ! event.value
    });

    this.raycaster = new THREE.Raycaster();
    this.mouse = new THREE.Vector2();

    const onMouseClick = (event) => {
      event.preventDefault();
      // calculate mouse position in normalized device coordinates
      // (-1 to +1) for both components
      this.mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
      this.mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
      // update the picking ray with the camera and mouse position
      this.raycaster.setFromCamera( this.mouse, this.camera );
      this.intersects = this.raycaster.intersectObjects( this.gltfobject, true );

      this.intersects.map((rayobject) => {
        if (rayobject.object.name.lenght > 0 ) {
          console.log(rayobject.object.name)
        }
      })

    };

    // window.addEventListener( 'mousemove', onMouseMove, false );

    window.addEventListener( 'mousedown', onMouseClick, false);

     this.renderer.render(this.scene, this.camera);
 },

 methods: {
   loaderGLTF: function() {
     // ADD GLTFLOADER
     this.loader = new GLTFLoader();

       if (this.array_buffer !== null ) {

         this.loader.parse(this.array_buffer, '',

          gltf => {
              this.scene.add(gltf.scene);
              gltf.scene.name = "Name of Glb File"

              // ADD CONTROLS TO MODEL
              this.control.attach( gltf.scene );
              this.scene.add( this.control );

              gltf.scene.scale.set(5, 5, 5);

              this.renderer.render(this.scene, this.camera);

       }, error => {
            console.log(error)
       });
     }
   },

   fileReader: function() {
     const file = this.$refs.file.files[0]
     const reader = new FileReader();

     reader.onload = (e) => {
       this.array_buffer = e.target.result;
    };

    reader.readAsArrayBuffer(file);
   },
  },
}

```

---

<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:** [June 21, 2019, 11:37am UTC](https://discourse.threejs.org/t/cant-detect-glb-model-with-raycaster/8207/2 "2019-06-21T11:37:01Z")

</div>

> [@Boris\_Bek](#):
>
> ```javascript
> rayobject.object.name.lenght > 0
> 
> ```

A typo: `.length`

---

<div class="post-metadata">

**Author:** ![Boris\_Bek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/boris_bek/32/5493_2.png) [@Boris\_Bek](https://discourse.threejs.org/u/Boris_Bek)\
**Post date:** [June 21, 2019, 11:39am UTC](https://discourse.threejs.org/t/cant-detect-glb-model-with-raycaster/8207/3 "2019-06-21T11:39:44Z")

</div>

It was case. Thank You  
But one more question pleas  
I set the name of my glb file but it returns “defaulte1” how it comes

---

<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:** [June 21, 2019, 11:59am UTC](https://discourse.threejs.org/t/cant-detect-glb-model-with-raycaster/8207/4 "2019-06-21T11:59:46Z")

</div>

> [@Boris\_Bek](#):
>
> gltf.scene.name = “Name of Glb File”

`gltf.scene` is not a mesh, or points, or lines, it’s `THREE.Object3D()` that is just a container and it can’t be detected by a raycaster.  
Maybe makes sense to use [.traverseAncestors](https://threejs.org/docs/#api/en/core/Object3D.traverseAncestors.traverseAncestors):

Something like that, after you get an array of intersected objects (it’s just from a scratch, I didin’t test it):

```javascript
this.intersects = this.raycaster.intersectObjects( this.gltfobject, true );
if (this.intersects.length != 0) {
    var obj = this.intersects[0].object;
    obj.traverseAncestors( a => {
        if (a.name.length > 0) console.log(a.name);
    })
}

```

---

<div class="post-metadata">

**Author:** ![Boris\_Bek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/boris_bek/32/5493_2.png) [@Boris\_Bek](https://discourse.threejs.org/u/Boris_Bek)\
**Post date:** [June 21, 2019, 12:02pm UTC](https://discourse.threejs.org/t/cant-detect-glb-model-with-raycaster/8207/5 "2019-06-21T12:02:14Z")

</div>

Prisoner Thank you 🙂

---

<div class="post-metadata">

**Author:** ![Boris\_Bek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/boris_bek/32/5493_2.png) [@Boris\_Bek](https://discourse.threejs.org/u/Boris_Bek)\
**Post date:** [July 3, 2019, 10:01am UTC](https://discourse.threejs.org/t/cant-detect-glb-model-with-raycaster/8207/6 "2019-07-03T10:01:50Z")

</div>

Hello I have a question about Raycaster that I can’t find in the Internet  
I was wonder what content raycaster.intersectObjects() returns after intersects,

and why we use .traverseAncestors

thank you.

---

<div class="post-metadata">

**Author:** ![DolphinIQ](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dolphiniq/32/3510_2.png) [@DolphinIQ](https://discourse.threejs.org/u/DolphinIQ)\
**Post date:** [July 3, 2019, 11:09am UTC](https://discourse.threejs.org/t/cant-detect-glb-model-with-raycaster/8207/7 "2019-07-03T11:09:11Z")

</div>

Everything is in the docs, my friend.  
[https://threejs.org/docs/#api/en/core/Raycaster.intersectObject](https://threejs.org/docs/#api/en/core/Raycaster.intersectObject)

---

<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:** [July 3, 2019, 12:18pm UTC](https://discourse.threejs.org/t/cant-detect-glb-model-with-raycaster/8207/8 "2019-07-03T12:18:18Z")

</div>

> [@Boris\_Bek](#):
>
> why we use .traverseAncestors

What should we use instead?  
Traversing ancestors, we simply look for parent objects with some conditions.