3D Model not loading using Three.JS

Hello! I am trying to load in a 3D model. I am using Astro.js and I am unable to load it in whatsoever. Here is my file structure.

here is the code:

    let threeDHolder2 = document.getElementById('3DHolder2') as HTMLDivElement
    threeDHolder2.appendChild( renderer2.domElement );
    renderer2.setSize( threeDHolder2.clientWidth, threeDHolder2.clientHeight );
    // change the background color
    renderer2.setClearColor(0x000000, 0)

    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

    const loader = new GLTFLoader();

    loader.load( 'src/model/gltf (1)/zGear2.gltf', function ( gltf ) {

        scene.add( gltf.scene );

        renderer2.render( scene, camera );

    }, undefined, function ( error ) {

        console.error( error );

    } );

Here is the error:

I’m not familiar with astro but if it functions anything like other bundlers you’ll need to move your model directory out of the src folder and into a “public” directory on the same level as src and load from ./model/

true, /src/… is not a valid path. /src is virtual, it does not exist, it will be squashed into a single javascript file later on and all directories will vanish.

if you have placed it into /public it will most likely still fail because of the sub directory “model gltf (1)”. a gltf is a container file, it links towards external files and gltfloader defaults to “/”, so it will look for “/Gear2.bin” for instance, not “/model gltf (1)/Gear2.bin”.

  • you can fix that by call the setResourcePath method on gltfloader
  • but the root of the problem is that you should not use gltf on the web but glb, which is smaller and contains all files

What do you think of .obj models? and how do I use that? If i try using OBJ it gives me the same error

glb has up to 95% compression rate, and it’s relatively easy to use, imo that’s pretty unbeatable.