Imported Blender model is not showing in viewport


I am having an issue with importing a 3D model I made. For some reason, it’s not showing up on the viewport, and I am unsure why.

For now, here is what the error looks like on the Chrome DevTools:

Here is my code for the Model that got converted to jsx:

Auto-generated by:
Command: npx gltfjsx@6.2.12 Monkey.glb --transform 
Files: Monkey.glb [225.68KB] > Monkey-transformed.glb [96.22KB] (57%)

import React, { useRef, useEffect } from 'react'
import { useGLTF, useAnimations } from '@react-three/drei'

const Monkey = (props) => {
  const group = useRef()
  const { nodes, materials, animations } = useGLTF('/Monkey-transformed.glb')
  const { actions } = useAnimations(animations, group)
  useEffect(() => {
  }, [])
  return (
    <group ref={group} {...props} dispose={null}>
      <group name="Scene">
        <group name="Armature" position={[0, 2.829, 0]} scale={1.288}>
          <primitive object={nodes.spine0} />
          <primitive object={nodes.legIK} />
          <primitive object={nodes.legIKRight} />
          <primitive object={nodes.legIKLeft} />
        <group name="Cube" position={[0, 2.829, 0]} scale={1.288}>
          <skinnedMesh name="Cube_1" geometry={nodes.Cube_1.geometry} material={materials.PaletteMaterial001} skeleton={nodes.Cube_1.skeleton} />
          <skinnedMesh name="Cube_2" geometry={nodes.Cube_2.geometry} material={materials.PaletteMaterial002} skeleton={nodes.Cube_2.skeleton} />
        <group name="Cube002" position={[0, 2.829, 0]} scale={1.288}>
          <skinnedMesh name="Cube002_1" geometry={nodes.Cube002_1.geometry} material={materials.PaletteMaterial001} skeleton={nodes.Cube002_1.skeleton} />
          <skinnedMesh name="Cube002_2" geometry={nodes.Cube002_2.geometry} material={materials.PaletteMaterial002} skeleton={nodes.Cube002_2.skeleton} />
        <group name="Cube004" position={[0, 2.829, 0]} scale={1.288}>
          <skinnedMesh name="Cube005_1" geometry={nodes.Cube005_1.geometry} material={materials.PaletteMaterial001} skeleton={nodes.Cube005_1.skeleton} />
          <skinnedMesh name="Cube005_2" geometry={nodes.Cube005_2.geometry} material={materials.PaletteMaterial002} skeleton={nodes.Cube005_2.skeleton} />
        <group name="Cube005" position={[0, 2.829, 0]} scale={1.288}>
          <skinnedMesh name="Cube006" geometry={nodes.Cube006.geometry} material={materials.PaletteMaterial001} skeleton={nodes.Cube006.skeleton} />
          <skinnedMesh name="Cube006_1" geometry={nodes.Cube006_1.geometry} material={materials.PaletteMaterial002} skeleton={nodes.Cube006_1.skeleton} />

export default Monkey;


And here is the code for App.js:

import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import { Suspense } from "react";

import Monkey from "./components/Monkey"

function App() {

  return (
     <OrbitControls />
     <ambientLight intensity={2} />
     <directionalLight position={[-5, 5, 5]} castShadow shadow-mapSize-width={1024} shadow-mapSize-height={1024} />
     <Suspense fallback={null}>
       <Monkey />

export default App

And here is what the file structure of my project looks like:

If you have any suggestions as to why the imported Blender model is not showing up, please let me know!

Thank you!

According to the error message:


the GLB file is not loaded from the correct location.

1 Like

should be /models/Monkey-transformed.glb

1 Like