From GLB, GLTF to svelte file: Integrating 3D Models into Your Sveltekit App via Threlte

Integrating GLB/ GLTF 3d model in sveltekit is step by step process. Let's first create basic structure to display 3d model using threlte which is a three js library for sveltekit.

Creating Basic Structure

If you are new in threlte then follow this tutorial to create a basic scene in threlte Create Basic Scene in threlte

Download or Select 3d Model & Collect Asset

1. I have downloaded this 3d model Merc Hovercar from sketchfab

Download Merc Hovercar

3. In this blog post, I will show you the process of working with both gltf and glb formats. I have downloaded both versions and stored them inside the static folder.
4. I have also downloaded a HDR file from polyhaven & stored inside static folder.

Convert GLB, GLTF to re-usable Threlte components

1. Use the terminal to navigate to the GLB model folder. In my case, it is located at \static\3dModels\GLB
2. Run
   terminal

   npx @threlte/gltf@next .\free_merc_hovercar.glb

3. This will create a svelte threlte component named Free_merc_hovercar.svelte inside the model folder
4. Keeping the Svelte threlte component inside staic folder is considered bad practice, Let's move the Free_merc_hovercar.svelte filte to the src\lib\3dmodels folder
5. Open the Free_merc_hovercar.svelte file, and you can notie a reference to our glb model in the
   Free_merc_hovercar.svelte

   const gltf = useGltf('/free_merc_hovercar.glb')

   Since we have changed the location of our svelte threlte component, we need to update this as well. If you followed my file structure, the corrected code should be
   Free_merc_hovercar.svelte

   const gltf = useGltf('3dModels/GLB/free_merc_hovercar.glb')

Reference 3d Model in the scene

1. If you followed my previous instructions and followed my article Create Basic Scene in threlte then you should have
   +page.svelte

   <script>
      import { Canvas } from '@threlte/core';
      import SceneOne from '../lib/SceneOne.svelte';
   </script>
   
   <section class="p-5">
      <div class="canvas-wrapper ring h-[700px]">
         <Canvas>
            <SceneOne />
         </Canvas>
      </div>
   </section>

   The scene file
   SceneOne.svelte

   <script>
      import { T } from '@threlte/core';
      import * as THREE from 'three';
      import { OrbitControls, Environment, Sky } from '@threlte/extras';
   </script>
   
   <T.PerspectiveCamera makeDefault position={[10, 10, 10]} fov={80} near={0.1} far={1000}>
   <OrbitControls
         autoRotate
         autoRotateSpeed={1.0}
         allowPan={false}
         enableDamping
         maxDistance={200}
         minDistance={10}
      />
   </T.PerspectiveCamera>
   
   <Sky />
   
   <T.Mesh position={[0, 0.5, 0]} scale={1}>
   <T.SphereGeometry />
   <T.MeshStandardMaterial roughness={0} color="gray" side={0} />
   </T.Mesh>
   
   <T.GridHelper args={[10, 10]} />

2. Now import the svelte threlte component to the scene file
   SceneOne.svelte

   <script>
     import FreeMercHovercar from './3dmodels/Free_merc_hovercar.svelte';
   </script>
   
       <FreeMercHovercar />

   Make sure to remove or comment out the sphere geometry code; the complete code should look like thisCheck the result on browser
3. Let's resize the hover car by wrapping the car component in a T.Group.
   SceneOne.svelte

   <T.Group position={[0, 2, 0]} scale={5}>
       <FreeMercHovercar />
   </T.Group>

4. To use the HDR file, utilize the environment tag and make sure to comment out the sky tag.
   SceneOne.svelte

   <Environment
     path="/hdr/"
     format="hdr"
     isBackground={true}
     files="metro_noord_1k.hdr"
   />

   
5. To use the HDR component without the background, we can set isBackground to false. Thus, the complete code should look like this
   SceneOne.svelte

   <script>
      import { T } from '@threlte/core';
      import * as THREE from 'three';
      import { OrbitControls, Environment, Sky } from '@threlte/extras';
      import FreeMercHovercar from './3dmodels/Free_merc_hovercar.svelte';
   </script>
   
   <T.PerspectiveCamera makeDefault position={[10, 10, 10]} fov={80} near={0.1} far={1000}>
      <OrbitControls
         autoRotate={false}
         autoRotateSpeed={1.0}
         allowPan={false}
         enableDamping
         maxDistance={200}
         minDistance={0.1}
      />
   </T.PerspectiveCamera>
   
   <!-- <Sky /> -->
   
   <!-- <T.Mesh position={[0, 0.5, 0]} scale={1}>
      <T.SphereGeometry />
      <T.MeshStandardMaterial roughness={0} color="gray" side={0} />
   </T.Mesh> -->
   
   <Environment path="/hdr/" format="hdr" isBackground={false} files="metro_noord_1k.hdr" />
   
   <T.Group position={[0, 2, 0]} scale={5}>
      <FreeMercHovercar />
   </T.Group>
   
   <T.GridHelper args={[10, 10]} />