@react-three/fiber 可重复使用的 3D 文本组件

Question

对这里的编程还很陌生（最近完成了一个代码训练营，但自学了 Three.js）。我正在尝试使用 @react-three/fiber 创建一个可重用的函数，但我认为问题可能来自基本的 React。谁能看出为什么我的 {text, coordinates} 道具可能无法按预期工作？我只想在每次使用该功能时都能够编辑文本和文本的位置，因此实际上我的页面上会有多个文本对象，我可以单独控制它们。我没有错误，但是在呈现时文本对象没有显示在应用程序上，尽管在我检查站点时它被列为组件。有人有什么想法吗？我希望这很简单。 :)

这是可重用文本组件的代码。

export default function Text3D({text, coordinates}){
  const font = new FontLoader().parse(Montserrat);

  return (
    <mesh position={[coordinates]} visible>
      <textGeometry attach='geometry'args={[{text}, {font, size: 5, height: 0.1}]} />
      <meshStandardMaterial attach='material' color="white" />
     </mesh>
  )};

这是我尝试在其中使用文本组件的另一个组件的示例。

export default function ETPlanet(){
    const eTPlanet = useLoader(THREE.TextureLoader, saturnPlanetTexture);
    const eTPlanetRing = useLoader(THREE.TextureLoader, saturnRingTexture);
    const ref = useRef(null);
    const planetRef = useRef(null);
    useFrame(() => {
        ref.current.rotation.z += 0.01;
        planetRef.current.rotation.y -= 0.005;
    }); /* ref and useFrame lines are to create a reference and then allow the saturn ring to spin every frame.*/

    return(
        <>
            <mesh ref={planetRef} position={[-15, -2, 4]}>{/* Creates shape and sets position using x, y, z co-ordinates.*/}
                <sphereGeometry args={ [0.85, 32, 32] } />{/*Sets shape as a sphere using three.js and specifies dimensions.*/}
                <meshStandardMaterial map={eTPlanet} />{/*Sets material type from three.js and maps the texture image to surface of the shape.*/}
            </mesh>
            <mesh position={[-15, -2, 4]} rotation={[1.3, 0, 0]} ref={ref} castShadow visible>{/* Creates shape and sets position using x, y, z co-ordinates. Also makes ring more horizontal and cast a shadow.*/}
                <ringBufferGeometry args={ [1.1, 1.5, 64] } />
                <meshStandardMaterial map={eTPlanetRing} side={THREE.DoubleSide} transparent={true} opacity={1} />
            </mesh>
            <Text3D text={'Experience Timeline'} coordinates={[0, 0, 0]}/>
        </>
    )
}

Answer 1

我不熟悉 React 3 Fiber，但看起来你有 coordinates 作为数组（对象）和 text 作为字符串，你应该像这样传递它：

export default function Text3D({text, coordinates}){
  const font = new FontLoader().parse(Montserrat);

  return (
    <mesh position={coordinates} visible>
      <textGeometry attach='geometry'args={[text, {font, size: 5, height: 0.1}]} />
      <meshStandardMaterial attach='material' color="white" />
    </mesh>
)};

基本上，您所做的是尝试“嵌套”数组（例如 [[1, 3, 4]]），因为 coordinates 是一个数组。

您还尝试将文本“嵌套”到对象中，将其写为 args={[{text}, {font, size: 5, height: 0.1}]}，但应该是 args={[text, {font, size: 5, height: 0.1}]}。

希望对您有所帮助。

@react-three/fiber 可重复使用的 3D 文本组件

@react-three/fiber Reusable 3D Text Component

reactjs

three.js

components

react-props

react-three-fiber