Controller.updateDisplay() not working with THREE.HTMLMesh

[HanaeRateau]

Hello, I've been trying to refresh the GUI after changing a value outside the GUI but it seems it's not working. Looking at the code of updateDisplay from Controller, the method only returns this. The consequence is then that listen does not work either. It looks like it's been like this for a while now.

Note that I'm using lil-gui (v0.17) from three.js in webXR. It's the same in the current version.

[georgealways]

Hi, that method is a stub that is overridden by the actual controller classes. I would need to see your code to help.

[HanaeRateau]

Yup ok sorry about that. Here is the code I have.

This is the GUI I create in the init() function:

// status parameters 
const status = {
    countSpheres: 0,
};

init(){
... 

const statusGUI = new GUI( { width: 300, title: 'Status' } );
const igHUD = new InteractiveGroup(renderer, camera);
statusGUI.add(status, 'countSpheres').name('Current number of spheres').listen();
const meshHUD = new HTMLMesh(statusGUI.domElement);
igHUD.add(meshHUD);

camera.add(igHUD);
igHUD.position.set(0, 0, -0.5);
igHUD.lookAt(camera.position);

...
}

For debug purposes, I increment the countSpheres property in the render function

status.countSpheres++;

The incrementation is working and the object of the controller is also updated with the right value. Only the display is not refreshed. I tried calling setValue from the controller but it's not changing anything.

I've just observed that when I'm closing and opening the GUI, the value is refreshed.

Edit The problem might come from the fact that the DOM is not modified thus, HTMLMesh does not trigger an update.

[HanaeRateau]

It looks like adding this.$input.setAttribute("value", t); into the updateDisplay() method of NumberController does the trick.

[georgealways]

Do you still have this problem without HTMLMesh?

Number controller already updates $input.value in updateDisplay. I’m not sure what t is here. Are you using a modified version of the library?

[HanaeRateau]

The problem only arises with using HTMLMesh. The t is in the minified versioned. It's the equivalent of value. I think the setAttribute works because it updates the HTML code which then triggers the update call in HTMLMesh that only observes the DOM.

[georgealways]

This looks like a limitation of THREE.HTMLMesh—it's not capturing every update to the DOM.

You may want to open an issue in that repo. I would continue to use your setAttribute edit in the meantime.