英文:
R3F: Hooks can only be used within the Canvas component
问题
我正在尝试使用ThreeJs（我在使用React）制作一个带有动画的立方体，上面有一个“hello”文本。它显示“Hooks只能在Canvas组件内使用！”，但我已经在我的代码中添加了Canvas组件。这是代码。我做错了什么？（附言：我是React和ThreeJS的新手）
import React, { useRef } from "react";
import { PerspectiveCamera, RenderTexture, Text } from "@react-three/drei";
import { Canvas, useFrame } from "@react-three/fiber";
import styled from "styled-components";
const Container = styled.div`
height: 100vh;
width: 100%;
scroll-snap-align: center;
`
const Test = () => {
const textRef = useRef();
useFrame(
(state) =>
(textRef.current.position.x = Math.sin(state.clock.elapsedTime) * 2)
);
return (
<Container>
<Canvas>
<mesh>
<boxGeometry />
<meshStandardMaterial>
<RenderTexture attach="map">
<PerspectiveCamera makeDefault position={[0, 0, 5]} />
<color attach="background" args={["#dc9dcd"]} />
<Text ref={textRef} fontSize={3} color="#555">
hello
</Text>
</RenderTexture>
</meshStandardMaterial>
</mesh>
</Canvas>
</Container>
);
};
export default Test;
如果您需要更多帮助，请告诉我。
英文:
I am trying to make a Cube with an animated "hello" text on it using threeJs (im using react).
It says "Hooks can only be used within the Canvas component!" but I even added the Canvas component in my code. 
This is the code. What am I doing wrong ? (PS: I am new to React and ThreeJS)
import React, { useRef } from "react";
import { PerspectiveCamera, RenderTexture, Text } from "@react-three/drei";
import { Canvas, useFrame } from "@react-three/fiber";
import styled from "styled-components";
const Container = styled.div`
height: 100vh;
width: 100%;
scroll-snap-align: center;
`
const Test = () => {
const textRef = useRef();
useFrame(
(state) =>
(textRef.current.position.x = Math.sin(state.clock.elapsedTime) * 2)
);
return (
<Container>
<Canvas>
<mesh>
<boxGeometry />
<meshStandardMaterial>
<RenderTexture attach="map">
<PerspectiveCamera makeDefault position={[0, 0, 5]} />
<color attach="background" args={["#dc9dcd"]} />
<Text ref={textRef} fontSize={3} color="#555">
hello
</Text>
</RenderTexture>
</meshStandardMaterial>
</mesh>
</Canvas>
</Container>
);
};
export default Test;
答案1
得分: 0
The error message suggests that you are currently using a react-three-fiber hook outside of the Canvas component. To resolve this, you can encapsulate your text cube in its own component and use useFrame there. Here's the translated code:
const TextCube = () => {
const textRef = useRef();
useFrame(
(state) =>
(textRef.current.position.x = Math.sin(state.clock.elapsedTime) * 2)
);
return (
<mesh>
<boxGeometry />
<meshStandardMaterial>
<RenderTexture attach="map">
<PerspectiveCamera makeDefault position={[0, 0, 5]} />
<color attach="background" args={["#dc9dcd"]} />
<Text ref={textRef} fontSize={3} color="#555">
hello
</Text>
</RenderTexture>
</meshStandardMaterial>
</mesh>
);
};
Then, use it in your Test component like this:
const Test = () => {
return (
<Container>
<Canvas>
<TextCube />
</Canvas>
</Container>
);
};
This should do the trick!
英文:
As the error says, you are currently calling a react-three-fiber hook not within the Canvas component. You could wrap your text cube in its own component and call useFrame there:
const TextCube = () => {
const textRef = useRef();
useFrame(
(state) =>
(textRef.current.position.x = Math.sin(state.clock.elapsedTime) * 2)
);
return (
<mesh>
<boxGeometry />
<meshStandardMaterial>
<RenderTexture attach="map">
<PerspectiveCamera makeDefault position={[0, 0, 5]} />
<color attach="background" args={["#dc9dcd"]} />
<Text ref={textRef} fontSize={3} color="#555">
hello
</Text>
</RenderTexture>
</meshStandardMaterial>
</mesh>
);
};
Then use it in your Test component like this:
const Test = () => {
return (
<Container>
<Canvas>
<TextCube />
</Canvas>
</Container>
);
};
This should to the trick!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论