admin管理员组文章数量:1310466
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:.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="" 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
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" 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
Share Improve this question edited Apr 3, 2014 at 6:12 Pratik asked Apr 2, 2014 at 10:48 PratikPratik 1711 gold badge5 silver badges19 bronze badges 11- You say you are trying to load a .obj file.... then why link to the threejs example? Is the example not loading for you? It loads ok for me. The 404 error simply means that the path to the file is wrong. – 2pha Commented Apr 2, 2014 at 11:28
- yes example is not loading object for me....could you please send me the working copy of example. – Pratik Commented Apr 2, 2014 at 11:37
- Are you trying to run it on your local machine? – 2pha Commented Apr 2, 2014 at 11:45
- yes i m running in my local machine... – Pratik Commented Apr 2, 2014 at 12:31
- Well, it is quite simple. The error is because the files are not bring found on your local machine. The paths should start with 'mrdoob.github.io/three.js/examples/' eg 'mrdoob.github.io/three.js/examples/obj/male02/male02.obj' – 2pha Commented Apr 3, 2014 at 3:05
4 Answers
Reset to default 8My 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>
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./od/beginningtutorials/a/aa040502a.htm
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.
Problem
You are unable to load .OBJ files using Three.js built in Methods.
this link -> https://threejs/docs/index.html#api/en/loaders/ObjectLoader
Solution
You CANNOT use new THREE.OBJLoader(); you need to call it as new OBJLoader();
I have found the answer after reading & understanding the Three.js Site.
The method you are thinking unconsciously is called ObjectLoader(); though it does not mean it is made to load .obj file type. Their working is different.
ObjectLoader(); is made to load .JSON file type.
What you need is a Three.js Addon called ---> OBJLoader();
how to get OBJLoader();
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
after importing the addon
const objLoader = new OBJLoader();
objLoader.load('./my-obj-folder/my-obj-file.obj',(PassingOBJ) => {
scene.add(PassingOBJ);
Generic Function();
});
本文标签： cIssue in loading the obj using threejsStack Overflow
版权声明：本文标题：c# - Issue in loading the .obj using three.js - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741825229a2399602.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论