0

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;
KYin
  • 439
  • 1
  • 5
  • 21
  • have you tried gltfjsx : https://www.npmjs.com/package/gltfjsx and once you have it use the command : npx gltfjsx angel.gltf i t will generate a model file for you from your gltf model and then you are sure to end up with a model component where scale can be applied. Some other improvement that could be made would be to remove the mesh around the model component and probably the group also unless you want to add another model or mesh in the same group. – codeanjero Jan 04 '22 at 13:05
  • @codeanjero I haven't tried gltfjsx but I will definitely do! I changed the position of the camera and the mesh Z position to make it look closer/further from the camera. Is this a bad practice? – KYin Jan 04 '22 at 13:26
  • no it is common practice just trying not to overload the dom is a good way to get better perfs. – codeanjero Jan 04 '22 at 16:37
  • @codeanjero Turns out changing the z position of the mesh made the scrolling act weird (parallax) because I thought it would make the model bigger - it's not. I moved the scale property on the `mesh` and it works :) – KYin Jan 05 '22 at 02:57

1 Answers1

1

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]}

KYin
  • 439
  • 1
  • 5
  • 21