Hello!
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: https://github.com/pmndrs/gltfjsx
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(() => {
actions.Jump.play()
}, [])
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>
<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>
<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>
<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>
<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} />
</group>
</group>
</group>
)
}
export default Monkey;
useGLTF.preload('./models/Monkey-transformed.glb')
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 (
<Canvas>
<OrbitControls />
<ambientLight intensity={2} />
<directionalLight position={[-5, 5, 5]} castShadow shadow-mapSize-width={1024} shadow-mapSize-height={1024} />
<Suspense fallback={null}>
<Monkey />
</Suspense>
</Canvas>
)
}
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!
