How to load models 3d in React Three Fiber

Question

I have an App.js file that renders an icosahedronGeometry in Three Fiber, how do I make the file that loads the model that is in the Model.js file

App.js

import React, { Suspense, useRef} from "react";
import { Canvas, useFrame } from "react-three-fiber";
import { Model } from "./Model";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import GltfModel from "./GltfModel";
import "./styles.scss";

const Box = () => {
  const mesh = useRef(null);
  useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01));
  return (
<mesh ref={mesh}>
  <icosahedronGeometry  />
  <meshPhongMaterial attach="material" color="#a6fb22" />
</mesh>
  );
}

function App() {
  
  return (
    <>
      <Canvas>
        
        <Box />
        <ambientLight args={[0xff0000]} intensity={0.01} />
        <directionalLight position={[0, 0, 5]} intensity={0.5} />
        <Suspense></Suspense>
      </Canvas>
    </>
  );
}

export default App;

This is file make with npx gltfjsx model.gltf Model.js

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

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

export function Model(props) {
  const { nodes, materials } = useGLTF('/model.gltf')
  return (
    <group {...props} dispose={null}>
      <mesh geometry={nodes.Text.geometry} material={materials.Material} position={[-0.08, 0, 0.25]} rotation={[Math.PI / 2, 0, 0]} />
    </group>
  )
}

useGLTF.preload('/model.gltf')

score 0 · Answer 1 · answered Dec 06 '22 at 17:13

your code is almost complete to add model you have to place it in <Suspense/> like so:

return (
    <>
      <Canvas>
        
        <Box />
        <ambientLight args={[0xff0000]} intensity={0.01} />
        <directionalLight position={[0, 0, 5]} intensity={0.5} />
        <Suspense fallback={null}>
           <Model/>
        </Suspense>
      </Canvas>
    </>
  );

you have to also make sure that model.gltf is placed in public folder of your project:

public/model.gltf

so it's available for download

Pretty nifty,, I've been reading the react library for a while and I can't relate the paths, my head is full of code and I can't organize all the information — Ilson Ricardo, Dec 06 '22 at 19:46

How to load models 3d in React Three Fiber

1 Answers1