CODEWITHSUNDEEP
reactjswebpackthree.jsgatsbyreact-three-fiber
dawn
dawn

Reputation: 1341

How to correctly import a .glb 3D file into Gatsby using R3F?

I'm trying to upload a 3D .glb file using R3F. The thing is that I'm getting this error:

ModuleParseError: Module parse failed: Unexpected character '☻' (1:4)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

(Source code omitted for this binary file)

And I'm not sure how to solve it. Would anyone be able to help me with this?

My code:

Colibri.js

import React, { useRef } from "react";
import { useGLTF, useAnimations } from "@react-three/drei";
import ColibriGlb from "./210604_Colibri.glb"

export default function Colibri({ ...props }) {
  const group = useRef();
  const { nodes, materials, animations } = useGLTF(ColibriGlb);
  const { actions } = useAnimations(animations, group);
  return (
    <group ref={group} {...props} dispose={null}>
      .
      .
      .
    </group>
  );
}

ColibriScene.js

import React, { Suspense, useEffect } from 'react'
import { Canvas, useThree } from '@react-three/fiber'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as androsFetalStyles from "../css/AndrosFetal.module.css"
import Colibri from "./Colibri/Colibri.js";

const CameraController = () => {
  const { camera, gl } = useThree();
  useEffect(
    () => {
      const controls = new OrbitControls(camera, gl.domElement);

      controls.minDistance = 0;
      controls.maxDistance = 5;
      return () => {
        controls.dispose();
      };
    },
    [camera, gl]
  );
  return null;
};

function ColibriScene() {
  return (
    <div className={androsFetalStyles.container}>
      <Canvas frameloop='demand'>
        <directionalLight color="red" position={[0, 0, 5]} />
        <Suspense fallback={null}>
          <Colibri/>
        </Suspense>
        <mesh>
          <boxGeometry />
          <meshStandardMaterial />
        </mesh>
      </Canvas>
    </div>
  )
}

export default ColibriScene

Acerca.js

import * as React from "react"
import Layout from "../components/Layout"
import SEO from "../components/SEO"
import * as acercaStyles from "../css/Acerca.module.css"
import ColibriScene from "../components/ColibriScene"

const AcercaPage = () => {
  return (
    <Layout>
      <SEO
        title="Acerca(te) | metaxis.digital"
        description="Filosofía y computación"
        image="metaxis.jpg"
        metaurl="https://metaxis.digital/Acerca"
        type="website"
        author="Óscar A. Montiel"
      />
        <main className={acercaStyles.container}>
          <h2 className={acercaStyles.title}>Acerca</h2>
          <p className={acercaStyles.text}>
            <b>metaxis.digital</b> es un blog dedicado a la difusión de ideas que entrelazan la filosofía y la computación y cómo es que interactúan una con la otra a través de una perspectiva metamoderna.
          </p>
          <ColibriScene />
        </main>
    </Layout>
  )
}

export default AcercaPage

Upvotes: 0

Views: 432

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29335

Have you tried directly:

  const { nodes, materials, animations } = useGLTF('./210604_Colibri.glb');

Alternatively, you can try using the GLTFLoader used through the /static folder:

let loader = new GLTFLoader();
loader.load(
  "./210604_Colibri.glb",
  () => {
    console.log("loaded");
  },
  (xhr) => {
    console.log(xhr);
    // called while loading is progressing
    // console.log("The xhr warning isL ",xhr.srcElement.responseText);
  }
);

Modified from Loading a GLTF model with Three JS and React JS

Even without exposing callbacks:

const { nodes, materials } = useLoader(GLTFLoader, './210604_Colibri.glb')

Upvotes: 1

Related Questions