2

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>
  )
}
April Wang
  • 29
  • 1
  • 3
  • 1
    Can you share if you are seeing any errors in console? – Praym Jul 19 '20 at 22:16
  • Yes, I'm getting a few - 1)SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data parse GLTFLoader.js:248 load GLTFLoader.js:155 load three.module.js:36856 2) Uncaught Error: Model suspended while rendering, but no fallback UI was specified. – April Wang Jul 19 '20 at 22:39
  • as well as - The above error occurred in the component: in Model (at pages/index.js:65) in Canvas – April Wang Jul 19 '20 at 22:45
  • You should also provide your `gatbsy-config.js` file, in order to see if you have enabled a static file loader. – snoob dogg Oct 22 '21 at 10:22

2 Answers2

2

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.

hpalu
  • 1,357
  • 7
  • 12
  • Hey, thanks for your answer - I think that I'm passing the correct url now, but when I try to import the model (it's not draco compressed), I get this error when I build the site: ERROR #98123 WEBPACK Generating development JavaScript bundle failed Unexpected character '' (1:4) File: src/models/crerar.glb:1:4 How do I get around this ? – April Wang Jul 20 '20 at 17:27
  • bundlers like CRA are configured to return a url for unknown extensions that you import, you might be missing a loader statement, for instance when you tie "*.glb" to url-loader. getting paths right is hard in bundling envs, maybe do try to get the /public thing again to make it work at least, then you can come back to imports. – hpalu Jul 20 '20 at 19:11
  • Did you ever figure this out? – FRMR Nov 18 '20 at 00:53
0

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

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

user15560347
  • 1