3D Model not loading using Three.JS

Questions
1

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.

image
image707Ă—588 46.6 KB

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:

image
image775Ă—142 20 KB

2

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/

3

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
2 Likes
4

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

5

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