I've been struggling with an issue for a few days now. I can't figure out how to import OBJLoader for Three.js. This is crucial for incorporating custom 3D models into my game.
I'm seeing 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 the 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 exhausted all possible solutions. I placed the OBJLoader source in my directory, required it, and even inserted the OBJLoader source code inside my script.js file. Unfortunately, nothing seemed to work.