编写了一个页面 装载了Three.js，并创建场景摄像机等，现在的问题是我要jsonloader.load就假死在那里没有反应，比较关键的是我不清楚jsonloader.load的用法是什么，代码如下
问题代码
function initObject_JS()
{
alert("init object");
/* Show model */
var jsonloader = new THREE.JSONLoader();
jsonloader.load( {model: "Model_ascii.js", callback: createScene } );
alert("success");
}
function createScene( geometry ) {
alert("in");
var object = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial());
object.position.x=-15;
object.position.y=-5;
object.scale.x = object.scale.y = object.scale.z = 4;
scene.addObject( object );
}
全部代码
<!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()
{
alert("init object");
/* Show model */
var jsonloader = new THREE.JSONLoader();
jsonloader.load( {model: "Model_ascii.js", callback: createScene } );
alert("success");
}
function createScene( geometry ) {
alert("in");
var object = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial());
object.position.x=-15;
object.position.y=-5;
object.scale.x = object.scale.y = object.scale.z = 4;
scene.addObject( 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>
7 个解决方案
#1
Model_ascii.js你这个数据源文件是不是很大啊....要不不会假死，要么就是你绘图的js效率不行。
#2
我测试用的100KB大么？ 还有个正方形 5KB 大么？ 都没有结果 同样的 我找一个网站上面的就没问题 诡异了 代码有问题么？
#3
可以进入init object 但是函数内部和success无法展现
#4
可以你数据源文件的json格式结构不正确导致加载文件生成json的时候出错而不执行回调。没有错误吗？
建议用firefox的fierbug查看是下是否出错，firebug是我用过最好的js调试工具了
建议用firefox的fierbug查看是下是否出错，firebug是我用过最好的js调试工具了
#5
楼主能提供下 convert_obj_three.py 这个文件么 我打不开网上关于这个文件的链接，谢谢
#6
楼主问题解决了吗？能不能分享一下?
#7
同求 我自己下载了一个，但是会出问题
#1
Model_ascii.js你这个数据源文件是不是很大啊....要不不会假死，要么就是你绘图的js效率不行。
#2
我测试用的100KB大么？ 还有个正方形 5KB 大么？ 都没有结果 同样的 我找一个网站上面的就没问题 诡异了 代码有问题么？
#3
可以进入init object 但是函数内部和success无法展现
#4
可以你数据源文件的json格式结构不正确导致加载文件生成json的时候出错而不执行回调。没有错误吗？
建议用firefox的fierbug查看是下是否出错，firebug是我用过最好的js调试工具了
建议用firefox的fierbug查看是下是否出错，firebug是我用过最好的js调试工具了
#5
楼主能提供下 convert_obj_three.py 这个文件么 我打不开网上关于这个文件的链接，谢谢
#6
楼主问题解决了吗？能不能分享一下?
#7
同求 我自己下载了一个，但是会出问题