文本将从 3dModel React-three-fiber/react-three/drei 移到外部

Question

我对Three Js不是很熟悉。 当我开始这项工作并了解到有一个库React-three-fiber可以在组件中提供 Three Js 的所有功能时，我就从这个开始。

问题：

我想为用户添加一个功能，在3d model中添加自定义文本。但是文本来自model。

它应该适合 model 这样的东西：

只要文字向上移动。

这是我的代码：

`

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]} /> /}

这是Material Text的主线，来自My model.gltf

我已经尝试了来自“@react-three/drei [请参阅我的代码中的文本导入。]”的“文本”标签在来自我的 Model 的 JSX 的相同文本材料 Position 上。

Answer 1

一个更简单的解决方案可能是使用 drei 的“Html”标签而不是“文本”。 您可以在 canvas 中调整大小和重新定位 html，并将 Html 附加到场景中的对象。 您可以让它随您的对象调整大小或静态地存在于您的 canvas 上：

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