position inaccuracy with drei Html component

[bonjat]

Hi all,

I'm using the Html component from drei as labels for objects in my scene. Some (only some) of these labels are exhibiting a strange behavior whereby they kind of jitter and float out of their given position.

I've built an example here: https://khxux.csb.app/
Notice what the '+x' label does when you orbit around the scene, particularly when the +x axis is facing away from the camera.

Any idea what might be causing this? It was annoying me enough, that I moved away from Html labels and instead used sprites and generated custom textures from a hidden canvas. But I'd rather use Html components if possible.

Thanks!

[drcmda]

no idea, could you copy the html code into its own local file and see whats going on?

[bonjat]

Thanks I've added it as a local file.

[drcmda]

turns out a camera.updateMatrixWorld() was missing. i pushed a fix.

i reduced your sandbox down to what was causing the problem, looks good to me now: https://codesandbox.io/s/html-component-odd-behavior-forked-e7qme?file=/src/App.js

ps. no need to implement your own orbitcontrols, drei has you covered. and you dont need to put three.vector3's into that group, it takes regular arrays, too.

[bonjat]

Thanks very much!