三.js:无法使用 THREE.OBJLoader 显示 obj 文件 - IT屋-程序员软件开发技术分享社区
首页 前端开发 三.js:无法使用 THREE.OBJLoader 显示 obj 文件
三.js:无法使用 THREE.OBJLoader 显示 obj 文件
[英] three.js: Cannot display obj file using THREE.OBJLoader
本文介绍了三.js:无法使用 THREE.OBJLoader 显示 obj 文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在使用示例代码加载 obj 文件时遇到问题.加载示例文件male02.obj 时我没有问题，但是当我插入我的文件时，对象没有显示.我在使用 Python 转换器脚本和 JSONLoader 时遇到了同样的问题.
这是 OBJLoader 的所有代码
<html lang="zh-cn"><头><title>three.js webgl - 加载器 - OBJ 加载器</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><风格>身体 {字体系列:等宽；背景色:#000；颜色:#fff;边距:0px；溢出:隐藏；}#信息{颜色:#fff;位置:绝对；顶部:10px；宽度:100%；文本对齐:居中；z-索引:100；显示:块；}#info a, .button { 颜色:#f00;字体粗细:粗体；文字装饰:下划线；光标:指针 }</风格><身体><div id="信息"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a>- OBJLoader 测试 <script src="javascripts/Three.js"></script><script src="javascripts/OBJLoader.js"></script><script src="javascripts/Detector.js"></script><script src="javascripts/Stats.js"></script><脚本>var 容器，统计数据；var 相机、场景、渲染器；var mouseX = 0, mouseY = 0;var windowHalfX = window.innerWidth/2;var windowHalfY = window.innerHeight/2;在里面();动画()；函数初始化(){container = document.createElement('div');document.body.appendChild(容器);场景 = 新的 THREE.Scene();camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 1, 2000 );相机.位置.z = 100;场景添加(相机)；var 环境 = 新 THREE.AmbientLight(0x101030);场景添加(环境)；var directionalLight = new THREE.DirectionalLight( 0xffeedd );directionalLight.position.set( 0, 0, 1 ).normalize();场景添加(定向光)；var loader = new THREE.OBJLoader();//loader.load( "img/male02.obj", function ( object ) {loader.load( "img/originalMeanModel.obj", function ( object ) {object.position.y = - 80;场景添加(对象)；});//渲染器renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );container.appendChild(renderer.domElement);document.addEventListener('mousemove', onDocumentMouseMove, false );}函数 onDocumentMouseMove( 事件 ) {mouseX = ( event.clientX - windowHalfX )/2;mouseY = ( event.clientY - windowHalfY )/2;}//函数动画(){requestAnimationFrame( 动画 );使成为();}函数渲染(){camera.position.x += ( mouseX - camera.position.x ) * .05;camera.position.y += ( - mouseY - camera.position.y ) * .05;相机.看(场景.位置)；renderer.render(场景，相机)；}
</html>我使用的是最新版本的three.js (49).
这是我尝试加载的 obj 文件的链接 https://dl.dropbox.com/u/23384412/originalMeanModel.obj
我在尝试 JSONLoader 时注意到导出的 JSON 文件没有任何法线、颜色或 uv.这不会影响在 Blender 或 MeshLab 中查看文件时，但会影响 Three.js?
如果有人可以帮助我，将不胜感激.
提前致谢.
解决方案
必须根据模型的位置和尺寸设置对象和相机位置.
评论"所有这些行:
camera.position.z = 100;...object.position.y = - 80;...document.addEventListener('mousemove', onDocumentMouseMove, false );然后开始玩代码，改变相机位置:
camera.position.z = 2;
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.com/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.com/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.
解决方案
Both 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;
这篇关于三.js:无法使用 THREE.OBJLoader 显示 obj 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
