Drei's HTML elements flicker

Questions
,
1

In my project ([https://codesandbox.io/p/sandbox/fbxloader-forked-srz7rj?file=%2Fpublic%2Findex.html%3A15%2C56]), labels are put on a 3D model for annotation purpose.

The problem is that the labels are flickering in my app. Please note that the labels are displayed without any problem in another app that uses CSS2DRenderer. However in my project I have to use React Three Fiber and Drei.

Any help is greatly appreciated.

PS: since the model and the texture are big, it takes around 1 minute for the codesandbox to finish loading.

2

css2d doesn’t occlude, labels will be shown at all times even behind the object. drei/html tries to occlude, you have raycast-occlude and blend-occlude. you are using raycast, so it tests if the annotation is visible by casting a ray towards the camera. if anything occludes that ray the annotation must hide. but it looks like the labels are either too close to the model or inside it, so they flicker.

if you want css2d behaviour just remove the occlude prop. otherwise i would try to move the points slightly outside the model.

3

one thing you could do is calculate outward positions by code, but keep in mind that this could push some points into overlapping geometry where they are hidden again.

  const vec = new THREE.Vector3(label.pos[0], label.pos[1], label.pos[2])
  const dir = vec.clone().normalize().multiplyScalar(1)
  vec.add(dir)
  return (
    <Html occlude={[heartRef]} position={vec} style={{ color: 'purple', cursor: 'pointer' }}>

if you wanted to make sure you need stable outward points, either placed by hand or with a better algorithm. i’d just set them by hand.

4

Thank you very much for the suggestions. The code works but as you have said, some points are hidden. So I guess recalculating the position by hand using onClick handler on the heart seems to be the right solution. Just wonder what do you mean by “with a better algorithm”?

5

just shifting the points outside would not account for overlapping geometry. i would set the positions by hand. too much work figuring out the code that distributes the points so that nothing occludes them.