Как реализовать Three.js внутри Gatsby?

Question

Я установил react-three-fiber и три пакета. Я следую этому руководству, но сомневаюсь, где разместить эту строку:

const rootElement = document.getElementById("root");

Кроме того, я начинаю получать эту ошибку:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Мой index.js:

import React, { Children, useRef, useState } from "react"

import {  Link } from "gatsby"

import { Canvas} from 'react-three-fiber'

import Layout from "../components/layout"

const IndexPage = () => {

  return(

    <Layout>

      <div>

        <h1>Hi</h1>

      </div>

      <canvas>

        <Children></Children>

      </canvas>

    </Layout>

    )

}

const rootElement = document.getElementById("root");

export default IndexPage

Любые идеи?

Answer 1

Убедитесь, что вы установили оба three а также react-three-fiber.

npm install three react-three-fiber 

Затем в компоненте страницы gatsby просто импортируйте Canvas от react-three-fiber перед использованием в вашем JSX.

import React from "react"
import { Canvas} from 'react-three-fiber'

import Layout from "../components/layout"

const IndexPage = () => (
  <Layout>
    <Canvas />
  </Layout>
)

export default IndexPage

---

Что касается const rootElement = document.getElementById("root");:

Хотя Gatsby построен с React, вам не нужно выбирать корневой элемент для отображения вашего приложения. Если это звучит сбивающе с толку, вам следует потратить немного времени, чтобы прочитать документацию Gatsby.

---

Если бы вы использовали пример из документации react-three-fiber, в Gatsby он выглядел бы примерно так.

import React, { useRef, useState } from "react"
import { Canvas, useFrame } from "react-three-fiber"

const Box = props => {
  // This reference will give us direct access to the mesh so we can animate it
  const mesh = useRef()

  // Set up state for the hovered and active state
  const [hovered, setHover] = useState(false)
  const [active, setActive] = useState(false)

  // Rotate mesh every frame, this is outside of React without overhead
  useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01))

  return (
    <mesh
      {...props}
      ref={mesh}
      scale={active ? [1.5, 1.5, 1.5] : [1, 1, 1]}
      onClick={e => setActive(!active)}
      onPointerOver={e => setHover(true)}
      onPointerOut={e => setHover(false)}
    >
      <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
      <meshStandardMaterial
        attach="material"
        color={hovered ? "hotpink" : "orange"}
      />
    </mesh>
  )
}

const IndexPage = () => (
  <Canvas>
    <ambientLight />
    <pointLight position={[10, 10, 10]} />
    <Box position={[-1.2, 0, 0]} />
    <Box position={[1.2, 0, 0]} />
  </Canvas>
)

export default IndexPage