admin管理员组文章数量:1325143
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.
本文标签： javascriptthreejs Cannot display obj file using THREEOBJLoaderStack Overflow
版权声明：本文标题：javascript - three.js: Cannot display obj file using THREE.OBJLoader - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742106926a2421062.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论