I've been experimenting with integrating 3D objects into a web page using three.js and a .obj file. Despite my efforts to use OBJLoader to load the file onto the HTML view, I've encountered some difficulties. I even tried different loaders, but none seem to be working for me.
To set up my local environment, I'm utilizing Visual Studio Code along with an extension called Live Server to host my files. For this project, I converted a .stl file to a .obj file using Blender.
While following the documentation provided by three.js, I realized that I haven't imported the objloader.js file yet due to confusion on how to properly import it. Here is the link to the documentation:
<!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>