Performance problem when using raycaster

Questions
,
1

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/

But on big model ( 25mb ) works very slow ( click mouse on model ):
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/

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… ?

2

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

137 line… :roll_eyes:

3

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

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

Representing your geometry just as a THREE.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/

2 Likes
4

I put the example on the list for the sample collection.
Collection of examples from discourse.threejs.org

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

1 Like
5

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/

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

Thanks for the recommendations!!!

6

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