Text Is going to Outside from 3dModel React-three-fiber/react-three/drei

Question

I'm not too much familiar with Three Js. When I start This work and came to know there is a library React-three-fiber which provides all the features of Three Js in components, and I start with this.

Problem:.

I want to add a feature for users, to add custom text in the 3d model. But The Text comes out from the model.

It should Fit in the model something Like This:

as long as the text moves upward.

This Is My Code:

`

import { Canvas,useThree ,useFrame } from '@react-three/fiber'
import { Suspense } from 'react'
import { OrbitControls, useGLTF,Text,useTexture,useHelper} from '@react-three/drei'

const Three_d_model = ({ name, setBackGroundColor,backLogo,frontLogo, backgroundColor ,qrBlock}) => {

  const ref = useRef('')
  const configurator = useSelector(state=>state.configurator)
  const dispatch=useDispatch();

  const downloadImage=()=>{
    const my_canvas=ref.current
    console.log("my_canvas",my_canvas)
    var link = document.createElement('a');
    link.download = 'filename.png';
    link.href = my_canvas.toDataURL()
    link.click();
  }

  return (
    <>
      <div className="w-screen h-screen rounded-xl">
            <Canvas shadowMap camera={{ fov: 75, near: 0.1, far: 1000, position: [0,0,-2] }} ref={ref} gl={{ preserveDrawingBuffer: true }}  >
                  <ambientLight intensity={2} />
                  <spotLight intensity={0.5} angle={0.1} penumbra={1} position={[10, 15, 10]} castShadow />
                <Suspense fallback={"Loading..."}>
                  <OrbitControls enablePan={true} enableRotate={true} enableZoom={true} />
                  <Model configurator={configurator}  />
               </Suspense>
        </Canvas>
      </div>
    </>
  )
}

Model

function Model({configurator,...props}) {
  const group = useRef()
  const { nodes, materials } = useGLTF('/3dCard10.gltf')

  return (
 
    <group {...props} dispose={null}>
      <mesh geometry={nodes.card.geometry} material={materials['card color']} material-color={`${configurator.backgroundColor}`} />
      <mesh geometry={nodes['qr-code-outline'].geometry} material={materials['qr code outline']} material-color={`${configurator.qrBlockColor}`} />
      <mesh geometry={nodes.nfc.geometry} material={materials['qr code outline']} material-color={`${configurator.qrBlockColor}`} />
      {/* <mesh geometry={nodes.Text.geometry} material={materials.text} position={[-0.87, 0.11, 0.01]} rotation={[1.57, 0, 0]} /> */}
      <mesh geometry={nodes['qr-code'].geometry} material={materials.qrcode} />
      <mesh geometry={nodes['horizontal-logo'].geometry} material={materials['horizontal-logo']} position={[-0.52, 0.96, 0.01]}  rotation={[0, 0, 0]} scale={[1,1,1]}  />
      <mesh geometry={nodes.Cube.geometry} material={materials['logo-vertical']} position={[0, 0.2, -0.01]} rotation={[0, 0, 0]} scale={[1,1,1]} />
      <Text
          position={[-0.45, 0.11, 0.01]}
          lineWidth="12px"
          scale={1}
          color={get_text_color(configurator.backgroundColor)}
          backgroundColor="#FFC642"
          width={'1px'}
          textAlign='left'
          maxWidth={'13px'}
          minWidth={'12px'}
          >
          {configurator.text}
        </Text>
  </group>
  )
}

{/ <mesh geometry={nodes.Text.geometry} material={materials.text} position={[-0.87, 0.11, 0.01]} rotation={[1.57, 0, 0]} /> /}

This is the main line of Material Text which comes from My model.gltf

I have tried The 'Text' tag which comes from '@react-three/drei [Please see Import of Text in my code.] on the same Position of Text material that comes from JSX of My Model.

Answer 1

An easier solution might be to use drei's 'Html' tag rather than "Text". you can resize and reposition html in the canvas and attach the Html to objects in your scene. You can have it resize with your objects or live statically on your canvas:

https://github.com/pmndrs/drei#html