Passing ref from useResource to line materials results in infinite render

Hi, 👋

I’ve encountered some weird behaviour that seems to create an infinite render loop. If passing a ref from useResource to a line material such as <lineBasicMaterial /> it seems to get into an infinite render loop. If passing a ref from useRef this does not seem to happen, so I believe we can narrow it down to the useResource hook.

In my own environment it just never stops rendering the component (it doesn’t hang though). In this example is just hangs and becomes completely unresponsive: https://codesandbox.io/s/react-three-fiber-react-spring-42187

In my own environment I’m using useResource to draw a lot of lines, hence why I would like to reuse the same material.

Hope this is solvable!

[partynikko]

PS! I just realised the reason invalidateFrameloop never worked for me was because of the infinite render loop. Never understood why it didn’t work. Now it works properly 👏

[partynikko]

yes, there are some of these weird three objects. geometry for instance. in the threejs docs you’ll find it being mentioned like this:

An object with a property for each of the constructor parameters. Any modification after instantiation does not change the geometry.

https://threejs.org/docs/index.html#api/en/geometries/SphereGeometry

so i just re-create it. this is the ugliest hack - i even had to dig deep into react fiber to mutate fibers manually in order to switch references. if they ever change internals im in trouble. but i see no other way.

Ah, interesting. So it’s either doing that or having different functionality for updating different non-changable values? i.e. having specific way to treat changes to geometries and other type of items.

I checked Three’s own way of changing geometry properties from their demos. But as you said, they are recreating it on every change too:

function generateGeometry() {

	updateGroupGeometry( mesh,
		new THREE.BoxBufferGeometry(
			data.width, data.height, data.depth, data.widthSegments, data.heightSegments, data.depthSegments
		)
	);

}

function updateGroupGeometry( mesh, geometry ) {

	if ( geometry.isGeometry ) {

		geometry = new THREE.BufferGeometry().fromGeometry( geometry );

		console.warn( 'THREE.GeometryBrowser: Converted Geometry to BufferGeometry.' );

	}

	mesh.children[ 0 ].geometry.dispose();
	mesh.children[ 1 ].geometry.dispose();

	mesh.children[ 0 ].geometry = new THREE.WireframeGeometry( geometry );
	mesh.children[ 1 ].geometry = geometry;

	// these do not update nicely together if shared

}

source: https://threejs.org/docs/scenes/js/geometry.js