Repository navigation
Drei <Html transform /> flickering #106
Description
Activity
Can you add a codesanbox to take a look? Thanks!
I suspect is related to the camera transform.I'm having a similar issue, only difference I see it without transform mode in drei/html . I made a sandbox here but I can't replicate it in the sandbox, I'll keep trying but feel free to collaborate on that sandbox
drei/html does a lot of calculations with the camera transform, is than an unsafe thing to do because react-three-map is changing the transform at other times?
Yes, I guess if you use
transformwe may need to improve our camera matrix calculations or maybe we are not updating the viewports correctly.I know this is an older issue - not sure if it's related, but we've also been having problems with the Drei Html component. I've done a fair amount of tracking back of values to try to work out the problem.
We're using the Canvas in overlay mode, which may or may not be a factor but basically in the syncCamera method, the calculation generates 'far' values for the camera that are invalid. The 'far' value should always be greater than the 'near' value, and it's fairly easy to get it into the massive negative number if you rotate the view. I've done a code sandbox here demonstrating the issue - zoom in and out is OK, but try rotating the camera. If you take it out of 'overlay' mode, you instead end up with a value of -Infinity, which again isn't a valid value. This then gives weird behaviour within the Drei HTML component whether in transform or without as it uses the camera.near and camera.far values to calculate z-index values (and the invalid camera.far value means that you get negative z-indexes.). For now we're using patch-package to just hardcode the recommended max for the camera.far to 2000
React Drei component with property "transform={true}" seems to not work under react-three-map canvas.