Trying to load an object with OBJLoader locally | Three.js

Question

I am testing how three.js works with 3d objects in a web page with a .obj file, I am using OBJLoader to load my obj file into the HTML view. I however cannot seem to get OBJLoader to work, I have tried different loaders as well but to no avail.

I am using Visual Studio Code and its extension called Live Server to host my local files.

I converted a .stl file with blender to a .obj file.

Here is the documentation I followed from three.js. (I haven't imported the objloader.js file yet because I don't understand how I am supposed to import it.) https://threejs.org/docs/#examples/en/loaders/OBJLoader

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Three.js APP</title>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <script src="js/three.js"></script>
        <script>
            const loader = new OBJLoader();
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            loader.load(

                'models/car.obj',

                function ( object ) {

                    scene.add( object );

                },
                function ( xhr ) {

                    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

                },
                function ( error ) {

                    console.log( 'An error happened' );

                }
            );
        </script>
    </body>
</html>

When you say "locally" are you opening your HTML file from disk (double-clicking)? Or are you running a local server that is hosting the HTML, JavaScript, and model files? — TheJim01
I am using Visual Studio Code, in visual studio code i am using the live server extension. does that answer your question? @TheJim01 — Navycoder
Take a look at the actual OBJLoader example. It uses imports rather than referencing JS files from script tags, but the usage in the code hasn't changed. — TheJim01
@TheJim01 Thank you! the source code from the three.js examples really helped me, I have no errors at the moment, I just can't see the object right now, which I think might be an issue with the object itself. I can however see all the vectors that blender has converted. — Navycoder

TheJim01 TheJim01 · Accepted Answer · 2021-01-18T14:45:50

Take a look at the actual OBJLoader example. It uses imports rather than referencing JS files from script tags, but the usage in the code hasn't changed.

Also be sure to add a light to your scene, otherwise the object won't be lit, and will be black against a black background.

Trying to load an object with OBJLoader locally | Three.js

1 Answers