Programmatically src changes prevent the changes of the baseColorFactor

[slightHYP]

Hi everyone,

I'm newbie to model-viewer and I played a little bit in order to create a 3d Model configurator by myself.
I added the intersected object to the return of the positionAndNormalFromPoint functions, as follow:

return { position: position, normal: normal, object: hit.object };

both in Scene class and Annotation class.
Within this object I applied the logic to change the materials or the base colors on click or mouse-over events.

Everything is fine and it works well, but if I change the src of the viewer (programmatically from the UI and re-select the first model the e.g. setBaseColorFactor function doesn't work anymore.

This is my function to change the src from a select element:

	$(select).on("change", function(event){
		modelViewer.src = event.target.value;
		if (modelViewer.environmentImage === '') {
			useSkybox.disabled = true;
			useSkybox.checked = false;
			modelViewer.skyboxImage = null;
		} else {
			useSkybox.disabled = false;
		}
		if (useSkybox.checked) {
			modelViewer.skyboxImage = modelViewer.environmentImage;
		}
	});

and this is the function on mouse move events:

$(modelViewer).off("mousemove").mousemove(function( event ) {
		const rect = modelViewer.getBoundingClientRect();
		const color = [0,1,0,1];
		const x = event.clientX - rect.left;
		const y = event.clientY - rect.top;
		const hit = modelViewer.positionAndNormalFromPoint(x, y);
		if(hit && modelViewer && modelViewer.model && modelReady){
			if(highlightedMaterialName != hit.object.material.name){
				highlightedMaterialName = hit.object.material.name;
				switch(highlightedMaterialName){
					case "Inner":
						defaultMaterialInner.pbrMetallicRoughness.setBaseColorFactor(color);
					break;
					case "Laces":
						defaultMaterialLaces.pbrMetallicRoughness.setBaseColorFactor(color);
					break;
					case "Outer":
						defaultMaterialOuter.pbrMetallicRoughness.setBaseColorFactor(color);
					break;
					case "Sole":
						defaultMaterialSole.pbrMetallicRoughness.setBaseColorFactor(color);
					break;
				}
			}
		}

The events are raised correctly and also the functions, but the new color is not set by the setBaseColorFactor.
In the animated GIF you can have a look at the behavoiur just described.

Should I destroy the viewer some how and re-initialize it, or I missed something? Thanks for the support!

[elalish]

Nice use case, thanks for sharing! As you're modifying our internal code, it's hard to say what the problem is. However, we are working on exposing this kind of functionality in our public API and this example will help guide its design. @timmmeh, what do you think of adding the material index of the hit to the result of positionAndNormalFromPoint()?

[slightHYP]

this[$kernel].mutate was removed almost a year ago. Are you using an ancient version of model-viewer? We're on v1.8 now.

Wow!!! I downloaded the new version last week, but it seems that I didn't replace the old one... My mistake, sorry for that!

Let's try with the new version

[slightHYP]

The file was correct but inside the folder there was the old map file and this caused the download of old modules files, sorry I didn't realize that!
Now I've the last version and on monday I will try my project with the new code and I will let you know!

Thanks

[slightHYP]

Hi @elalish,

I've just updated the glitch project within the last version (1.8). The strange behaviour is still there. For the moment in my prototype project I can reload the page without any problem. Thank you

[elalish]

Sorry, but I can't really give support when you're outside of our public API, and of course what you're doing could easily get broken in new ways in subsequent versions. Another option is you could contribute this change in a PR, in which case we can give you a solid review and actually pull it into our code base once the issues are resolved.

[slightHYP]

I fully understand and agree with your point! Thank you