I have around 100 objects in a React-Three/Fiber scene. I need to add 2D text labels for each one of these objects, similar to https://threejs.org/examples/css2d_label.html. React-Three/Drei's <Html /> works perfectly in small amounts, but is extremely slow at high amounts.
Here's an example of what I currently have: https://6nrshf.csb.app/
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Html } from "@react-three/drei";
import { Suspense, Fragment } from "react";
import { things } from "./sampleData";
const MainScene = () => {
return (
<>
{things.map((thing, index) => {
return (
<Fragment key={index}>
<mesh position={thing.position}>
<icosahedronBufferGeometry args={[0.5, 0]} />
<meshPhongMaterial color="#55aaff" />
</mesh>
<Html center position={thing.position}>
<div style={{ background: "white" }}>{thing.data}</div>
</Html>
</Fragment>
);
})}
{/* scene setup */}
<ambientLight intensity={0.2} />
<directionalLight intensity={1} color="white" />
<OrbitControls />
<gridHelper />
</>
);
};
export default function App() {
return (
<div
style={{
height: "100vh",
width: "100vw",
background: "black",
position: "absolute",
top: 0,
left: 0
}}
>
<Suspense fallback>
<Canvas camera={{ position: [3, 5, 3] }}>
<MainScene />
</Canvas>
</Suspense>
</div>
);
}
./sampleData:
const things = [];
/* An array of:
{
position: [x, y, z], here they are laid out on a grid
data: A string in this example.
}
*/
for (let i = 0; i < 144; i++) {
things.push({
position: [(i % 12) - 5.5, 0, ~~(i / 12) - 5.5],
data: `thing #${i}`
});
}
export { things };
Is there a way to render 2D text/elements that behave similar to the example while still being performant at large amounts (around 100)? Extra points if animations can be done on them.
Alternatively, how can the usage of Drei's <Html /> be optimized to run better?