问题加载使用three.js所的.OBJ [英] Issue in loading the .obj using three.js
本文介绍了问题加载使用three.js所的.OBJ的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图加载使用three.js所.obj文件，
但不幸的是它说错误无法加载资源：服务器与404状态（未找到）回答
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
查看源码： http://mrdoob.github.io/three。 JS /例子/ webgl_loader_obj.html
code是如下：
<!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?
谢谢，
PRATIK
Thanks, Pratik
推荐答案
我在这种情况下，问题被允许在Windows Server上的MIME类型。
My issue in this case was allowing Mime Type on Windows Server.
您可以手动或code做到这一点：
You can either do it manually or in code:
手动方式：
- 转到IIS设置
- 开启Mime类型设置
- 单击添加
- MIME类型extinsion：.OBJ
- MIME类型：application /八位字节流
- 单击添加
- 重新启动您的网站或应用程序池
code - 把以下内容Web.config文件：
Code - put following into Web.config:
<system.webServer>
<staticContent>
<mimeMap fileExtension=".obj" mimeType="application/octet-stream" />
</staticContent>
</system.webServer>
这篇关于问题加载使用three.js所的.OBJ的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
