seo Question posted in
Some basic information to get you started with this can be found here.

Loading gltf in gatsby site with react-three-fiber – SEO

I’ve been trying to load a GLTF model into my gatsby site using react-three-fiber, but can’t seem to get it to load. This seems like it should be very simple, but I’m new to Gatsby and threejs and was wondering if I could get some guidance.

My model is stored as static/models/crerar.glb, and I used gltfjsx to generate a Model component. I’ve tried referencing just ‘models/crerar.glb’ but haven’t had luck either.

In index.js, I have:

import Layout from "../components/layout"
import SEO from "../components/seo"
import React, { Suspense, useRef, useState } from "react"
import { Canvas, useFrame, useLoader } from "react-three-fiber"
import Model from "../components/Crerar"

const IndexPage = () => (
<Layout>
  <Canvas>
    <ambientLight intensity={0.2} />
    <Model />
  </Canvas>
</Layout>
)

export default IndexPage

and in Crerar.js (stored in components)

/*
auto-generated by: https://github.com/react-spring/gltfjsx
*/

import * as THREE from 'three'
import React, { useRef } from 'react'
import { useLoader } from 'react-three-fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

export default function Model(props) {
  const group = useRef()
  const { nodes, materials } = useLoader(GLTFLoader, '../static/models/crerar.glb')
  return (
    <group ref={group} {...props} dispose={null}>
      <mesh material={nodes.mesh_0.material} geometry={nodes.mesh_0.geometry} />
    </group>
  )
}
Tags:

2

Answers


  1. 0

    the path is wrong. the json.parse error you’re getting is because the loader tries to parse a HTML 404 fetch-error as a GLTF. you can make sure by opening dev tools and the networking tab. you should see it’s trying to reach your file, but can’t.

    if the model is within your src folder you have to import it first, then use the hashed url that you get. this is my recommendation, don’t mess around with public files, always import your stuff. it’s safer, the compiler will complain if the file isn’t present, and it’s better for cache control.

    otherwise, if the file is inside /public or i guess it’s /static in gatsby (?) then the url has to be something like "/file.glb". sometimes it’s /public/file.glb or /static/file.glb, it depends on your bundling environment (you can try fetching the file via the browsers url bar, if an url works, that’s the one you should pass on to the loader).

    if your file is draco compressed, then draco must also be inside public or static. see: https://codesandbox.io/s/r3f-ibl-envmap-simple-y541h

    you can safely use useLoader(GLTFLoader, url), it’s just a wrapper around new GLTFLoader().load(url, data => ...) + suspense. It’s not experimental any longer, even though it may have that warning on Github.

    Login or Signup to reply.
  2. 0

    gatsby copies everything from static into the public folder, so change your url to:

    const { nodes, materials } = useLoader(GLTFLoader, '/models/crerar.glb')

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search