I am having problems loading an obj file using the example code. I have no issue when loading the example file male02.obj however when I insert my file the object isn't displayed. I have had the same problem when using using the Python converter script and the JSONLoader.
Here is all of the code for the OBJLoader
<!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">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
</style>
</head>
<body>
<div id="info">
<a href=".js" target="_blank">three.js</a> - OBJLoader test
</div>
<script src="javascripts/Three.js"></script>
<script src="javascripts/OBJLoader.js"></script>
<script src="javascripts/Detector.js"></script>
<script src="javascripts/Stats.js"></script>
<script>
var container, stats;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 100;
scene.add( camera );
var ambient = new THREE.AmbientLight( 0x101030 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 ).normalize();
scene.add( directionalLight );
var loader = new THREE.OBJLoader();
//loader.load( "img/male02.obj", function ( object ) {
loader.load( "img/originalMeanModel.obj", function ( object ) {
object.position.y = - 80;
scene.add( object );
} );
// RENDERER
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) / 2;
mouseY = ( event.clientY - windowHalfY ) / 2;
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
</body>
</html>
I am using the latest version of three.js (49).
Here is a link to the obj file I am trying to load .obj
I noticed when I was trying the JSONLoader that the exported JSON file doesn't have any normals, colors or uvs. This doesn't affect when viewing the file in Blender or MeshLab but will is have an effect with three.js?
If anyone can help me out it would be greatly appreciated.
Thanks in advance.
I am having problems loading an obj file using the example code. I have no issue when loading the example file male02.obj however when I insert my file the object isn't displayed. I have had the same problem when using using the Python converter script and the JSONLoader.
Here is all of the code for the OBJLoader
<!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">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
</style>
</head>
<body>
<div id="info">
<a href="http://github./mrdoob/three.js" target="_blank">three.js</a> - OBJLoader test
</div>
<script src="javascripts/Three.js"></script>
<script src="javascripts/OBJLoader.js"></script>
<script src="javascripts/Detector.js"></script>
<script src="javascripts/Stats.js"></script>
<script>
var container, stats;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 100;
scene.add( camera );
var ambient = new THREE.AmbientLight( 0x101030 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 ).normalize();
scene.add( directionalLight );
var loader = new THREE.OBJLoader();
//loader.load( "img/male02.obj", function ( object ) {
loader.load( "img/originalMeanModel.obj", function ( object ) {
object.position.y = - 80;
scene.add( object );
} );
// RENDERER
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) / 2;
mouseY = ( event.clientY - windowHalfY ) / 2;
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
</body>
</html>
I am using the latest version of three.js (49).
Here is a link to the obj file I am trying to load https://dl.dropbox./u/23384412/originalMeanModel.obj
I noticed when I was trying the JSONLoader that the exported JSON file doesn't have any normals, colors or uvs. This doesn't affect when viewing the file in Blender or MeshLab but will is have an effect with three.js?
If anyone can help me out it would be greatly appreciated.
Thanks in advance.
Share Improve this question asked Jun 19, 2012 at 10:14 TrueWheelTrueWheel 9872 gold badges20 silver badges35 bronze badges 1- are you trying to run this locally without a webserver? read this: github./mrdoob/three.js/wiki/How-to-run-things-locally – frank Commented Jun 19, 2012 at 13:18
2 Answers
Reset to default 6Both object and camera positions must be set according the position and dimensions of your model.
"Comment" all these lines:
camera.position.z = 100;
...
object.position.y = - 80;
...
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
And start playing with the code, changing the camera position:
camera.position.z = 2;
I have a simple solution to this. 1. import the male02.obj that es with three.js installer package into blender, or daz3d, or whatever 3d program you use (I've only tried this with Daz3d however). 2. import whatever .obj you want to replace for your html. Rescale that obj so that it is around the same height as the male02.obj. 3. Delete the maleo2.obj from the scene and keep the new one you want. Export this file as a obj. 4. Add it to your code.
This should work, I tried adding objs to that source for a couple of days and I've been successful with this method.