How to add drei/Html text labels dynamically to 3D model and make them responsive? #993

flashman2 · 2022-07-17T22:58:15Z

flashman2
Jul 17, 2022

I'm trying to add labels to meshes of 3D model dynamically. So far, I have one solution, but it works strange. When window size is changed, 3D model in Canvas change its size too. But drei/Html labels added to same Canvas is not change their positions! So it looks like 3D model and Canvas is responsive, but drei/Html text labels is not responsive. See example:

Questions:

1 How to make drei/Html labels responsive same as 3D model?
2 Is there any way to mesh.add() OR scene.add() ? I just want to add component to meshes directly and not to Canvas. For example, if I will iterate all meshes to add labels to them like this:

   scene.children.map((obj) => {
     obj.traverse((child) => {
         child.add(<Html />);
     });
   });

How can I do this? What is proper way to do this?

Here is my code:

import { Grid, Button, Typography } from "@mui/material";
import { Canvas, useThree } from "@react-three/fiber";
import { OrbitControls, Html } from "@react-three/drei";

const SingleModelViewComponent = ({ Model }) => {

function Labels() {
    const [state, setState] = useState({
        visible: true,
        positions: {
          Fibroid_1_1: [-0.1, 0.6, 0.3],
          Fibroid_3_1: [-0.3, -0.1, -0.1],
          Fibroid_4_1: [-0.3, -0.1, 0.1],
          Fibroid_5_1: [-0.1, 0, 0.2],
          Fibroid_6_1: [-0.2, 0, 0],
          Fibroid_2_1: [0, 0, -0.1],
        },
      });

    if (state && state.visible) {
      return (
        <React.Fragment>
          {Object.entries(state.positions).map((item, index) => {
            return (
              <Html key={index} position={item[1]} center >
                <Typography style={{ color: 'White' }}>{item[0]}</Typography>
              </Html>
            );
          })}
        </React.Fragment>
      );
    } else {
      return null;
    }
  };

return (
<Grid item xs={12}>
    <Canvas style={{  height: '380px'   }} >
    <spotLight intensity={0.5} penumbra={1} position={[-10, 10, 10]} />
    <spotLight intensity={0.5} penumbra={1} position={[-10, -10, -10]} />
    <Suspense fallback={null}>{Model}</Suspense>
    <Labels />
    <OrbitControls ref={OrbitControlsRef}  enablePan={false}  />
    </Canvas>
</Grid>
);
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to add drei/Html text labels dynamically to 3D model and make them responsive? #993

{{title}}

Replies: 0 comments

Select a reply

How to add drei/Html text labels dynamically to 3D model and make them responsive? #993

flashman2 Jul 17, 2022

Replies: 0 comments

flashman2
Jul 17, 2022