Issue in loading the .obj using three.js
Question
I am trying to load .obj file using three.js, but unfortunately it's say the error that "Failed to load resource: the server responded with a status of 404 (Not Found)"
Below is the example link I am using
view-source: http://mrdoob.github.io/three.js/examples/webgl_loader_obj.html
CODE is as follows
<!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://threejs.org" target="_blank">three.js</a> - OBJLoader test
</div>
<script src="../build/three.min.js"></script>
<script src="js/loaders/OBJLoader.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.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 );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 100;
// scene
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 );
// texture
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total );
};
var texture = new THREE.Texture();
var loader = new THREE.ImageLoader( manager );
loader.load( 'textures/UV_Grid_Sm.jpg', function ( image ) {
texture.image = image;
texture.needsUpdate = true;
} );
// model
var loader = new THREE.OBJLoader( manager );
loader.load( 'obj/male02/male02.obj', function ( object ) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.map = texture;
}
} );
object.position.y = - 80;
scene.add( object );
} );
//
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
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>
If anybody has these above example working then please let me know how do you do?
Thanks, Pratik
3 answers
solution1
7 2014-09-15 09:35:56
My issue in this case was allowing Mime Type on Windows Server.
You can either do it manually or in code:
Manual way:
- Go to IIS settings
- Open Mime Type settings
- Click Add
- Mime type extinsion: .obj
- Mime type: application/octet-stream
- Click Add
- Restart your Site or application Pool
Code - put following into Web.config:
<system.webServer>
<staticContent>
<mimeMap fileExtension=".obj" mimeType="application/octet-stream" />
</staticContent>
</system.webServer>
solution2
1 2014-04-02 13:40:34
A 404 error means the file cannot be found in the location you've defined it. If you're running in localhost, then in the same folder as your demo.html file, you should have:
- A directory called obj containing a directory called male02 containing a file called male02.obj
- A directory called textures containing a file called UV_Grid_Sm.jpg
The error means that you currently do not.
If you're an experienced developer, I guess you will be able to fix this now. If you're new to development and struggling to understand where your current links are pointing, perhaps spend a bit of time refreshing your understanding of absolute and relative links: http://webdesign.about.com/od/beginningtutorials/a/aa040502a.htm
solution3
0 2017-11-22 17:50:39
I ran into this issue and changed the Mime settings with no success. What seemed to resolve the issue was re-creating a new file directly from my web host panel and copying the .obj and .mtl code into it and re-naming it with the appropriate suffix.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.