Tengo alrededor de 100 objetos en una escena de React-Three/Fiber. Necesito agregar etiquetas de texto 2D para cada uno de estos objetos, similar a https://threejs.org/examples/css2d_label.html . <Html /> de React-Three/Drei funciona perfectamente en pequeñas cantidades, pero es extremadamente lento en grandes cantidades.
Aquí hay un ejemplo de lo que tengo actualmente: 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> ); }./Data de muestra:
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 }; ¿Hay alguna forma de renderizar texto/elementos 2D que se comporten de manera similar al ejemplo y que sigan funcionando en grandes cantidades (alrededor de 100)? Puntos extra si se pueden hacer animaciones en ellos. Alternativamente, ¿cómo se puede optimizar el uso de <Html /> de Drei para que funcione mejor?