英文:
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!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论