@react-three/fiber 可重复使用的 3D 文本组件
@react-three/fiber Reusable 3D Text Component
对这里的编程还很陌生(最近完成了一个代码训练营,但自学了 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]}/>
</>
)
}
我不熟悉 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}]}
。
希望对您有所帮助。
对这里的编程还很陌生(最近完成了一个代码训练营,但自学了 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]}/>
</>
)
}
我不熟悉 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}]}
。
希望对您有所帮助。