I cannot for the life of me figure out why my .obj model is not loading into my WebGL scene. I have tried multiple loaders (OBJLoader and ObjectLoader). I can get a cube, with a pointlight and ambient light, as well as lines drawn but the object will not show up no matter what I do. The .obj file is in the same folder as the .html file.
function loadModel(){
var objLoader = new THREE.ObjectLoader();
objLoader.load(
'bunny-5000.obj',
function ( object ) {
object.position.set(0,0,0);
scene.add( object );
document.querySelector('h1').style.display = 'none';
} );
This is my load method which I call at the same place as my loadAxes() method, so it is definitely being called it just is not loading.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="three-r134.js"></script>
<script src="three.js"></script>
<script src="OBJLoader.js"></script>
<script src="MTLLoader.js"></script>
<script src='https://mamboleoo.be/learnThree/demos/OBJLoader.js'></script>
<script>
THREE.Cache.enabled = true;
init();
animate();
document.addEventListener('keydown', handleKeyDown);
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(1, 2, 15);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(new THREE.GridHelper(10, 20, 0xffffff));
const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshBasicMaterial( {color: 0xFFCC00 });
const cube = new THREE.Mesh( geometry, material);
cube.position.set(0, 2, 0);
scene.add(cube);
scene.add(new THREE.AmbientLight(0xffffff));
light = new THREE.PointLight(0xFFFFFF, 0.5 ,1000);
light.position.set(10,0,25);
scene.add(light);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio); // HiDPI/retina rendering
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor("#e5e5e5");
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', handleResize, false);
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
loadAxes();
loadModel();
}
function loadModel(){
var objLoader = new THREE.ObjectLoader();
objLoader.load(
'bunny-5000.obj',
function ( object ) {
// Add the loaded object to the scene
object.position.set(0,0,0);
scene.add( object );
document.querySelector('h1').style.display = 'none';
} );
}
function handleResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
function loadAxes() {
const xPoints = [];
xPoints.push( new THREE.Vector3( - 10, 0, 0 ) );
xPoints.push( new THREE.Vector3( 10, 0, 0 ) );
const xAxisGeometry = new THREE.BufferGeometry().setFromPoints( xPoints );
const xAxisMaterial = new THREE.LineBasicMaterial( { color: 0xFF0000 } );
const xAxis = new THREE.Line( xAxisGeometry, xAxisMaterial );
scene.add( xAxis );
//y axis
const yPoints = [];
yPoints.push( new THREE.Vector3(0, -10, 0 ) );
yPoints.push( new THREE.Vector3(0, 10, 0 ) );
const yAxisGeometry = new THREE.BufferGeometry().setFromPoints( yPoints );
const yAxisMaterial = new THREE.LineBasicMaterial( { color: 0x008000 } );
const yAxis = new THREE.Line( yAxisGeometry, yAxisMaterial );
scene.add( yAxis );
//z axis
const zPoints = [];
zPoints.push( new THREE.Vector3(0, 0, -10 ) );
yPoints.push( new THREE.Vector3(0, 0, 10 ) );
const zAxisGeometry = new THREE.BufferGeometry().setFromPoints( zPoints );
const zAxisMaterial = new THREE.LineBasicMaterial( { color: 0x0000ff } );
const zAxis = new THREE.Line( zAxisGeometry, zAxisMaterial );
scene.add( zAxis );
}
function handleKeyDown(event) {
switch (event.key) {
// Render modes.
case 'f': // f = face
break;
case 'e': // e = edge
break;
case 'v': // v = vertex
break;
}
}
</script>
</body>
</html>
I post the entire code for the sake of context. Is there a problem with my project file structure I am not aware of? Or am I doing something dumb in the method?