Make sure to include the necessary JavaScript files and call the init method in your code. Also, ensure that the document is fully loaded using window.onload. If your scene appears black, check if you have added lights and included the OBJLoader from the examples folder.
Your HTML structure should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - loaders - OBJ loader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="three.js/build/three.min.js"></script>
<script src="three.js/examples/js/loaders/OBJLoader.js"></script>
<script src="main.js"></script>
<div id="container"></div>
</body>
</html>
In your JavaScript file (main.js), use the following template:
window.onload=function(){
init();
animate();
}
function init() {
container = document.getElementById( 'container' );
console.log(container)
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 100;
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight( 0x101030 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 );
scene.add( directionalLight );
var loader = new THREE.OBJLoader();
loader.load( 'three.js/examples/obj/male02/male02.obj', function ( object ) {
console.log(object);
scene.add( object );
} );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
renderer.render( scene, camera );
}