Adding HTML to a React Three Drei 'Instance'

Question

I've been looking at this example here: https://codesandbox.io/s/floating-instanced-shoes-h8o2d?file=/src/App.js

Which uses <Instances><Instance> from React Three Drei..

The docs: https://github.com/pmndrs/drei#performance say that html can be passed over inside an instance like so:

<Instance>
  <Html>hello from the dom</Html>
</Instance>

However, in the shoes example, if I pass like this (Html needs to be imported from Drei library):

import { Html, Instances, Instance, OrbitControls, Environment, useGLTF } from '@react-three/drei'

...

  return (
    <group {...props}>
      <Instance ref={ref} onPointerOver={(e) => (e.stopPropagation(), setHover(true))} onPointerOut={(e) => setHover(false)}> 
        <Html>Hello from the DOm</Html>
      </Instance>
    </group>
  )

The html keeps getting added recursively (watch out if you try it).

Is there any way to make sure it gets added 1 time for each item, or will I need to refactor the whole example to use <mesh> or something instead of <Instance>?

Adding HTML to a React Three Drei 'Instance'

0 Answers0