R3F: Hooks can only be used within the Canvas component

huangapple go评论69阅读模式
英文:

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. R3F: Hooks can only be used within the Canvas component

This is the code. What am I doing wrong ? (PS: I am new to React and ThreeJS)

import React, { useRef } from &quot;react&quot;;
import { PerspectiveCamera, RenderTexture, Text } from &quot;@react-three/drei&quot;;
import { Canvas, useFrame } from &quot;@react-three/fiber&quot;;
import styled from &quot;styled-components&quot;;

const Container = styled.div`
  height: 100vh;
  width: 100%;
  scroll-snap-align: center;
`

const Test = () =&gt; {
  const textRef = useRef();
  useFrame(
    (state) =&gt;
      (textRef.current.position.x = Math.sin(state.clock.elapsedTime) * 2)
  );
  return (
    &lt;Container&gt;
      &lt;Canvas&gt;
        &lt;mesh&gt;
          &lt;boxGeometry /&gt;
          &lt;meshStandardMaterial&gt;
            &lt;RenderTexture attach=&quot;map&quot;&gt;
              &lt;PerspectiveCamera makeDefault position={[0, 0, 5]} /&gt;
              &lt;color attach=&quot;background&quot; args={[&quot;#dc9dcd&quot;]} /&gt;
              &lt;Text ref={textRef} fontSize={3} color=&quot;#555&quot;&gt;
                hello
              &lt;/Text&gt;
            &lt;/RenderTexture&gt;
          &lt;/meshStandardMaterial&gt;
        &lt;/mesh&gt;
      &lt;/Canvas&gt;
    &lt;/Container&gt;
  );
};

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 = () =&gt; {

  const textRef = useRef();

  useFrame(
    (state) =&gt;
      (textRef.current.position.x = Math.sin(state.clock.elapsedTime) * 2)
  );

  return (
        &lt;mesh&gt;
          &lt;boxGeometry /&gt;
          &lt;meshStandardMaterial&gt;
            &lt;RenderTexture attach=&quot;map&quot;&gt;
              &lt;PerspectiveCamera makeDefault position={[0, 0, 5]} /&gt;
              &lt;color attach=&quot;background&quot; args={[&quot;#dc9dcd&quot;]} /&gt;
              &lt;Text ref={textRef} fontSize={3} color=&quot;#555&quot;&gt;
                hello
              &lt;/Text&gt;
            &lt;/RenderTexture&gt;
          &lt;/meshStandardMaterial&gt;
        &lt;/mesh&gt;
  );
};

Then use it in your Test component like this:

const Test = () =&gt; {
  return (
    &lt;Container&gt;
      &lt;Canvas&gt;
        &lt;TextCube /&gt;
      &lt;/Canvas&gt;
    &lt;/Container&gt;
  );
};

This should to the trick!

huangapple
  • 本文由 发表于 2023年4月19日 16:57:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/76052578.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定