[SOLVED] Multimaterial force browser to endless-loop when raycasting

Questions
,
1

Hi all, I’m using a multimaterial with the following pattern:
var materials = [ material1, material0];
myObj.geometry.clearGroups();
myObj.geometry.addGroup( 0, Infinity, 0 );
myObj.geometry.addGroup( 0, Infinity, 1 );
myObj.material=materials;

This works fine but not in case of intersecting objects with raycaster
var intersects = raycaster.intersectObjects( myArr,true );

The reason is the Infinity parameter, which brings the ‘end’ variable to an infinitive state an in turn the following for-loop never ends and the browser hangs [three.js - function raycast( raycaster, intersects ) lines 14396-14399 :
start = Math.max( group.start, drawRange.start );
end = Math.min( ( group.start + group.count ), ( drawRange.start + drawRange.count ) );
for ( j = start, jl = end; j < jl; j += 3 ) { …

My workaround is to use the first material and skip the multimaterial implementation
var m= Array.isArray( material) ?material[ 0]:material;
… code for single material using variable ‘m’ …

It’s a functional workaround for my case because all groups overlaps, but not a generic solution!

So the question: any ideas how to solve this?
Thanks in advance

2

According to the docs, BufferGeometry.groups.end has to be an integer value. Infinity is invalid.

Try to apply position.count for a non-indexed geometry or index.count for an indexed geometry as second parameter of BufferGeometry.addGroup(). Both variables are defined like so:

const position = geometry.attributes.position;
const index = geometry.index;
4 Likes
3

Thanks for the hint, I will give it a try…

4

@Mugen87 thanks again for the help,
geometry.index.count was the perfect solution.