Three.JS OBJ转化为JSON 的导入问题

发布于 2021-12-04 07:18:55 字数 3248 浏览 838 评论 2

我写了一个Three.js，使用Maya导出了一个OBJ的三维模型文件，使用Three.js默认给出的转换脚本使OBJ转换为JS的JSON文件，转换代码 convert_obj_three.py -i model.obj -o model.js

编写了一个页面装载了Three.js，并创建场景摄像机等，现在的问题是我要jsonloader.load就假死在那里没有反应，比较关键的是我不清楚jsonloader.load的用法是什么，代码如下

问题代码

  function initObject_JS()
  {
	/* Show model */
	var jsonloader = new THREE.JSONLoader(true);
	
	jsonloader.load('model.js',
					function( geometry ) 
					{ 
						var object = new THREE.Mesh( geometry, new THREE.MeshLamberMaterial() );
						scene.add(object); 
					});

	alert("success");
  }

全部代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three.js Exporter</title>
<script src="Three.js"></script>
<script src="tree.js"></script>
<style type="text/css">
div#canvas-frame{
  border: none;
  cursor: pointer;
  width: 1024px;
  height: 1024px;
  background-color: #EEEEEE;
}
</style>
<script>
var geometry;

  var renderer;
  function initThree() {
    width = document.getElementById('canvas-frame').clientWidth;
    height = document.getElementById('canvas-frame').clientHeight; 
    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(width, height );
    document.getElementById('canvas-frame').appendChild(renderer.domElement);
    renderer.setClearColorHex(0xFFFFFF, 1.0);
  }
 
  var camera;
  function initCamera() { 
    camera = new THREE.PerspectiveCamera( 45 , width / height , 0.001 , 10000 );
    camera.position.x = 100;
    camera.position.y = 100;
    camera.position.z = 100;
    camera.up.x = 0;
    camera.up.y = 0;
    camera.up.z = 1;
    camera.lookAt( {x:0, y:0, z:0 } );
  }
  var scene;
  function initScene() {   
    scene = new THREE.Scene();
  }
  var light;
  function initLight() { 
    light = new THREE.DirectionalLight(0xFFFFFF, 1.0, 0);
    light.position.set( 100, 100, 200 );
    scene.add(light);
  }
  var cube;
  function initObject(){  
    cube = new THREE.Mesh(
         new THREE.CubeGeometry(50,50,50),                //Geometry 
         new THREE.MeshLambertMaterial({color: 0xff0000}) //material
    );
    scene.add(cube);
    cube.position.set(0,0,0);
  }
  
  function initObject_JS()
  {
	/* Show model */
	var jsonloader = new THREE.JSONLoader(true);
	
	jsonloader.load('Model_ascii.js',
					function( geometry ) 
					{ 
						var object = new THREE.Mesh( geometry, new THREE.MeshLamberMaterial() );
						scene.add(object); 
					});

	alert("success");
  }
/*  
  function createScene( geometry )
  {
	alert("in");

    var object = new THREE.Mesh( geometry, new THREE.MeshLamberMaterial() );
	scene.add(object);
  }
*/
  function threeStart() {
	//initThree
    initThree();
	//init camera
    initCamera();
	//init scene
    initScene();   
	//init ligth
    initLight();

    initObject_JS();
	
    renderer.clear(); 
    renderer.render(scene, camera);
  }
</script>
</head>
 
<body onload="threeStart();">
<!-- canvas -->
<div id="canvas-frame"></div>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苍暮颜 2021-12-09 14:33:04

renderer要这样写

function renderme() {
    renderer.render(scene, camera);
    window.requestAnimationFrame(render);
}

最后调用下：rendererme（）;

回复收藏 0

岁吢 2021-12-09 02:18:31

自己通过Chrome找到问题，附源码不过还是有一个问题不知道为什么必须在Chrome的Console执行renderer.render(scense,cmera);才可以显示出我的模型，感觉是render写的有问题但是不知道哪里有问题我显示默认的正方形没问题

<html>
<head>
<meta charset="UTF-8">
<title>Three.js Exporter</title>
<script src="Three.js"></script>
<style type="text/css">
div#canvas-frame{
  border: none;
  cursor: pointer;
  width: 1024px;
  height: 1024px;
  background-color: #EEEEEE;
}
</style>
<script>
var geometry;

  var renderer;
  function initThree() {
    width = document.getElementById('canvas-frame').clientWidth;
    height = document.getElementById('canvas-frame').clientHeight; 
    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(width, height );
    document.getElementById('canvas-frame').appendChild(renderer.domElement);
    renderer.setClearColorHex(0xFFFFFF, 1.0);
  }
  var scene;
  function initScene() {   
    scene = new THREE.Scene();
  }
  
	var camera;
  function initCamera() { 
    camera = new THREE.PerspectiveCamera( 75 , width / height , 0.1 , 10000 );
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 10;
//    camera.up.x = 0;
//    camera.up.y = 0;
//    camera.up.z = 1;
//    camera.lookAt( {x:0, y:0, z:0 } );
	
	scene.add(camera);
  }
  
  var light;
  function initLight() { 
    light = new THREE.DirectionalLight(0xFFFFFF, 1.0, 0);
    light.position.set( 100, 100, 200 );
    scene.add(light);
  }
  var cube;
  function initObject(){  
    cube = new THREE.Mesh(
         new THREE.CubeGeometry(50,50,50),                //Geometry 
         new THREE.MeshLambertMaterial({color: 0xff0000}) //material
    );
    scene.add(cube);
    cube.position.set(0,0,0);
  }
  
  function initObject_JS()
  {
	alert("init object");
	/* Show model */
	var jsonloader = new THREE.JSONLoader();
	
	jsonloader.load('mga.js',createScene);

	alert("success");
  }

function createScene( geometry ) {

//	var loading = document.getElementById("Loading");
//	loading.parentNode.removeChild(loading);

//	geometry.materials[0][0].shading = THREE.FlatShading;
//	geometry.materials[0][0].morphTargets = true;

	
//	var material = new THREE.MeshLambertMaterial({ color: 0xcccccc, wireframe: true }),object;
		
	var material = new THREE.MeshLambertMaterial({color: 0xffffff});
	
	mesh = new THREE.Mesh( geometry, material );
//	mesh.position.set(0,0,0);
//	mesh.scale.set(0, 0, 0);

	scene.add( mesh );
	mesh.position.set(0,0,0);
}

  function threeStart() {
	//initThree
    initThree();
	
	//init scene
    initScene(); 
	//init camera
    initCamera();	
	//init ligth
    initLight();

    initObject_JS();
	
    renderer.clear(); 
    renderer.render(scene, camera);
  }
</script>
</head>
 
<body onload="threeStart();">
<!-- canvas -->
<div id="canvas-frame"></div>
</body>
</html>

源码

回复收藏 0

~没有更多了~