Search code examples
reactjsthree.js3dreact-three-fiberdrei

Resize 3D Model in React

I'm using React and this is my first time trying Three.js / @react-three/fiber / @react-three/drei.

I use this 3D model downloaded from Sketchfab.com and it's appearing too big for my website.

I want to make the model size smaller but can't find any solution to it.

I've tried this solution but it doesn't change anything https://stackoverflow.com/a/69676440/17156530

Can you have a look at my code to see where I'm doing wrong? Because I'm following a tutorial from 2020 so maybe there are some features that don't work now.

Thank you guys! :)


Here's the screenshot of my website: model too big

Screenshot of my File tree:

File tree

Here's my code:

    import React, { Suspense } from 'react' 
    import './App.css'; 
    import Header from './components/Header' 
    import { Section } from './components/Section' 
    import { Canvas } from '@react-three/fiber' 
    import { Html, useGLTF } from '@react-three/drei'
    
    const Model = () => {   const gltf = useGLTF('/angel.gltf')   return <primitive object={gltf.scene} dispose={null} /> }
    
    const Lights = () => {   return (
        <>
          <ambientLight intensity={0.3} />
          <directionalLight position={[10, 10, 5]} intensity={1} />
          <directionalLight position={[0, 10, 0]} intensity={1.5} />
          <spotLight intensity={1} position={[1000, 0, 0]} />
        </>
    
      ) }
    
    const HTMLContent = () => {   return (
        <Section factor={1.5} offset={1}>
          <group position={[0, 46, 0]}>
            <mesh position={[0, -40, 0]}>
              <Model scale={[0.1, 0.1, 0.1]} />
            </mesh>
            <Html fullscreen>
              <div className="container">
                <h1 className="title">Hello</h1>
              </div>
            </Html>
          </group>
        </Section>   ) }
    
    function App() {   
     return (
        <>
          <Header />
          <Canvas
            colorManagement
            camera={{position: [0, 0, 20], fov: 70}}
          >
            <Lights />
            <Suspense fallback={null}>
              <HTMLContent />
            </Suspense>
          </Canvas>
        </>   
     );
   }
 
    export default App;
Solution

  • I figured it out this way:

    The scale property actually goes with the <mesh>, not the <Model>

     <mesh position={[0, -40, 0]} scale={100}>
   <Model modelPath="/model.gltf />
 </mesh>

    scale value could be a number or scale={[x, y, z]}