# Performance problem when using raycaster

**URL:** <https://discourse.threejs.org/t/performance-problem-when-using-raycaster/5314>\
**Category:** Questions\
**Tags:** raycaster, performance\
**Created:** [December 11, 2018, 4:30pm UTC](https://discourse.threejs.org/t/performance-problem-when-using-raycaster/5314 "2018-12-11T16:30:09Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![vasilii](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vasilii/32/530_2.png) [@vasilii](https://discourse.threejs.org/u/vasilii)\
**Post date:** [December 11, 2018, 4:30pm UTC](https://discourse.threejs.org/t/performance-problem-when-using-raycaster/5314/1 "2018-12-11T16:30:09Z")

</div>

Hi to all!

It is necessary to put html tags disappearing behind the edge.  
On small models work ( click mouse on model ):  
[http://js.otrisovano.ru/competentum/181203\_3d\_rotation\_tool/02/editor/](http://js.otrisovano.ru/competentum/181203_3d_rotation_tool/02/editor/)

But on big model ( 25mb ) works very slow ( click mouse on model ):  
[http://js.otrisovano.ru/competentum/181203\_3d\_rotation\_tool/01/editor/](http://js.otrisovano.ru/competentum/181203_3d_rotation_tool/01/editor/)

If disable disappear - norm ( click mouse on model ):  
[http://js.otrisovano.ru/competentum/181203\_3d\_rotation\_tool/03/editor/](http://js.otrisovano.ru/competentum/181203_3d_rotation_tool/03/editor/)

Use:  
`var raycaster = new THREE.Raycaster();`  
…

```
 function checkPointVisible(point, targetList) {
    let posLabel = point.clone();
    let posCam = camera.position.clone();
    let lenToLabel = posLabel.sub(posCam).length();
    raycaster.set(posCam, posLabel.normalize());
    let intersects = raycaster.intersectObjects(targetList, false);
    if ( intersects.length > 0 ) {
      if( intersects[0].distance < lenToLabel ) {
        return false;
      }
    }
    return true
  }

```

Is there any other way to know object is displayed or behind and not visible… ?

---

<div class="post-metadata">

**Author:** ![vasilii](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vasilii/32/530_2.png) [@vasilii](https://discourse.threejs.org/u/vasilii)\
**Post date:** [December 12, 2018, 11:15am UTC](https://discourse.threejs.org/t/performance-problem-when-using-raycaster/5314/2 "2018-12-12T11:15:09Z")

</div>

IN JSFiddle … wait few seconds … ( click on sphere ):  
[http://jsfiddle.net/vasilii/ato7rh2j/117/](http://jsfiddle.net/vasilii/ato7rh2j/117/)

137 line… 🙄

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 12, 2018, 1:38pm UTC](https://discourse.threejs.org/t/performance-problem-when-using-raycaster/5314/3 "2018-12-12T13:38:44Z")

</div>

The problem is that your sphere geometry is way too complex. If you define it like so, the performance is much better.

```auto
var geometry = new THREE.SphereBufferGeometry( 10, 32, 32 );

```

Representing your geometry just as a [THREE.Sphere](https://threejs.org/docs/index.html#api/en/math/Sphere) will further increase the performance.

Besides, you should avoid object creation in code which is called from your animation loop. So define objects like `posLabel` or `posCam` once and reuse them in `checkPointVisible()`. Moreover, a `for` loop is better than `foreach` since you avoid the creation of an anonymous function per execution.

Working demo: [https://jsfiddle.net/rgpno81k/1/](https://jsfiddle.net/rgpno81k/1/)

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [December 12, 2018, 2:02pm UTC](https://discourse.threejs.org/t/performance-problem-when-using-raycaster/5314/4 "2018-12-12T14:02:27Z")

</div>

I put the example on the list for the sample collection.  
[Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315)

Unfortunately it only works with Opera, Chrom but not with Firefox.🙁

---

<div class="post-metadata">

**Author:** ![vasilii](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vasilii/32/530_2.png) [@vasilii](https://discourse.threejs.org/u/vasilii)\
**Post date:** [December 12, 2018, 2:20pm UTC](https://discourse.threejs.org/t/performance-problem-when-using-raycaster/5314/5 "2018-12-12T14:20:23Z")

</div>

I searching for a long time - maybe there is some other way to determine whether the object is visible or not.  
Big size model working fast without check visibility: [https://jsfiddle.net/vasilii/xyvq4uLk/3/](https://jsfiddle.net/vasilii/xyvq4uLk/3/)

But not find. I will disable labels for large models.

Thanks for the recommendations!!!

---

<div class="post-metadata">

**Author:** ![vasilii](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vasilii/32/530_2.png) [@vasilii](https://discourse.threejs.org/u/vasilii)\
**Post date:** [December 12, 2018, 2:51pm UTC](https://discourse.threejs.org/t/performance-problem-when-using-raycaster/5314/6 "2018-12-12T14:51:18Z")

</div>

Small mistake: e/event in mouse listener ( not working in firefox ). Corrected: [http://jsfiddle.net/vasilii/ato7rh2j/124/](http://jsfiddle.net/vasilii/ato7rh2j/124/)