three.js json loadingmanager model not displayed -
i want preload models , textures loadingbar in project. use loadingmanger three.js have problems preloading json models. load unable display them. here example.
you can see in console 200 meshs created. 100 asteroids , 100 ships.
withoud loadingmanger can display models (asteroids) there should no problem model. can see in example asteroids loaded without loading manager.
here simplified code problem
$(function(){ if ( ! detector.webgl ) detector.addgetwebglmessage(); var debugscene = true; var controler, camera, controls, scene, renderer; var objectcontrols; var ship1geometry,ship1material; //////////////////////////////////////////////////////// //loadmanger //////////////////////////////////////////////////////// var manager = new three.loadingmanager(); manager.onprogress = function ( item, loaded, total ) { $('#loader').css({width:(math.round(loaded / total *100))+"%"}); console.log( item, loaded, total ); }; manager.onload = function () { $('#loaderholder').fadeout(function(){ init(); animate(); }); console.log('all items loaded'); }; manager.onerror = function () { console.log('there has been error'); }; var loader = new three.jsonloader(manager); // init loader util loader.load('models/shiptest.json', function (ship1geometry) { var ship1material = new three.meshfacematerial(); }, "models"); function init() { var width = window.innerwidth; var height = window.innerheight; camera = new three.perspectivecamera( 45, width / height, 1, 10000000 ); camera.position.x = 0; camera.position.y = 0; camera.position.z = 1500; scene = new three.scene(); renderer = new three.webglrenderer(); renderer.setclearcolor("black"); renderer.setpixelratio( window.devicepixelratio ); renderer.setsize( window.innerwidth, window.innerheight ); renderer.autoclear = false; var container = document.getelementbyid( 'container' ); container.appendchild( renderer.domelement ); controls = new three.orbitcontrols( camera, renderer.domelement ); controls.enabledamping = true; controls.dampingfactor = 0.25; controls.enablezoom = false; controls.mindistance = 50; controls.maxdistance = 300000; controls.autorotate = false; controls.autorotatespeed = 0.05; controls.target.x = 0; controls.target.y = 0; controls.target.z = 0; light = new three.ambientlight( 0x666666 ); scene.add( light ); light = new three.pointlight( 0xffffff, 1, 10000 ); light.position.set( 0, 0, 0 ); var params = { recursive: true }; objectcontrols = new objectcontrols( camera, params ); shipcount = 100; (var p = 0; p < shipcount; p++) { var px = math.random() * 5000 - 2500; var pz = math.random() * 5000 - 2500; var ship = createshipmesh(px,0,pz,0,0,0,ship1geometry,ship1material); scene.add(ship); } var loader = new three.jsonloader(); loader.load('models/asteroid.json', function (geometry, mat) { var material = new three.meshfacematerial( mat ); asteroidcount = 100; (var p = 0; p < asteroidcount; p++) { var px = math.random() * 5000 - 2500; var pz = math.random() * 5000 - 2500; var mesh = new three.mesh(geometry,material); mesh.rotation.y = -math.pi/math.random(); mesh.position.set( px, 0, pz ); scene.add(mesh); } }, "textures"); window.addeventlistener( 'resize', onwindowresize, false ); if(debugscene){ var gridhelper = new three.gridhelper( 900000, 10000 ); gridhelper.setcolors( 0x0000ff, 0x808080 ); scene.add( gridhelper ); var axishelper = new three.axishelper( 500 ); scene.add( axishelper ); console.log(scene); } } function onwindowresize() { var width = window.innerwidth; var height = window.innerheight; camera.aspect = width / height; camera.updateprojectionmatrix(); renderer.setsize( window.innerwidth, window.innerheight ); } var lasttimemsec= null; var nowmsec= null; function animate() { requestanimationframe( animate ); render(); update(); } function update(){ controls.update(); objectcontrols.update(); } function render() { renderer.render( scene, camera ); } function createshipmesh(positionx,positiony,positionz,centerx,centery,centerz,geometry,material){ positionx = centerx + positionx; positiony = centery + positiony; positionz = centerz + positionz; var mesh = new three.mesh(geometry,material); mesh.rotation.y = -math.pi/math.random(); mesh.position.set( positionx, positiony, positionz ); objectcontrols.add( mesh ); mesh.select = function(){ controls.target.x = position.x; controls.target.y = position.y; controls.target.z = position.z; controls.dollyin(2); controls.mindistance = 20; } return mesh; } });
okay found problem on own. loading manager works json mistake set variable ship1geometry global , thinking loader overwrite variable can use later in scene. wrong. needed assign response loader in globaly set variable. here right code
var ship1geometry,ship1material var manager = new three.loadingmanager(); manager.onprogress = function ( item, loaded, total ) { $('#loader').css({width:(math.round(loaded / total *100))+"%"}); console.log( item, loaded, total ); }; manager.onload = function () { $('#loaderholder').fadeout(function(){ init(); animate(); }); console.log('all items loaded'); }; manager.onerror = function () { console.log('there has been error'); }; var loader = new three.jsonloader(manager); // init loader util loader.load('models/shiptest.json', function (geometry,mat) { ship1geometry = geometry; ship1material = new three.meshlambertmaterial({map:mat }); }, "textures"); function init(){ ... }
Comments
Post a Comment