CODEWITHSUNDEEP
javascriptthree.js
lxd
lxd

Reputation: 11

Why can't I seem to import the OBJLoader module for Three.js?

I've been stumped for a few days on this issue. I cannot seem to import OBJLoader for Three.js. This is obviously important because I want custom 3D models in my game.

I have two error messages:

Uncaught TypeError: Failed to resolve module specifier "three-obj-loader". Relative references must start with either "/", "./", or "../".

and

Failed to load resource: the server responded with a status of 404 (Not Found)

import {OBJLoader} from 'three-obj-loader'

// load a resource
loader.load(

    // resource URL
    '/Users/dmitri/Desktop/flame/models/fresh_fire_01 (1).obj',
    // called when resource is loaded
    function ( object ) {

        scene.add( object );
    },

    // called when loading is in progresses
    function ( xhr ) {

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

    // called when loading has errors
    function ( error ) {

        console.log( 'An error happened' );
    }
);

// 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.setClearColor(0xffffff)

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// loader.load("/Users/dmitri/Desktop/flame/models/fresh_fire_01
(1).obj",
function(object){
    //     scene.add(object)
    // })

    var run = function() {
    requestAnimationFrame(run);
    renderer.render(scene, camera)
}
run()

And here is my HTML code:

<html>
<head>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js">.
    </script>

    <script src="/script.js" type="module"></script>
</body>

</html>

Here's my app.js source code:

const express = require("express");
var app = express();

app.set("port", process.env.PORT || 8080)

app.use(express.static("public"))

app.listen(app.get("port"), function() {
    return
})

Here's my file structure:

models

--fresh-fire-01 (1).obj

public

--index.html

--script.js

app.py

I have tried every solution that I can possibly think of. I put the source for OBJLoader in my directory. I required it. I even put the OBJLoader source code inside of my script.js source code. Nothing seemed to work.

Upvotes: 1

Views: 2010

Answers (1)

Valerian Lukashyk
Valerian Lukashyk

Reputation: 79

Three.js has its own OBJLoader. It is better to use native loaders instead of third parties. If you look at 'three-obj-loader' you can see it's outdated. 4 years ago last update. So, try to import OBJLoader from three.js library

Change:

import {OBJLoader} from 'three-obj-loader'

to:

import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader.js'

Upvotes: 7

Related Questions