Three.js - Can't change loaded JSON position -
Three.js - Can't change loaded JSON position -
i have model of temple made in google sketchup (.obj file). convert json , load application. problem mesh moved far away position, can't see it. i'm trying alter position i've failed far. below code. can tell me what's wrong? i'm new three.js , i'm @ loss
// set scene, camera, , renderer global variables. var scene, camera, renderer; init(); animate(); // sets scene. function init() { // create scene , set scene size. scene = new three.scene(); var width = window.innerwidth, height = window.innerheight; // create renderer , add together dom. renderer = new three.webglrenderer({antialias:true}); renderer.setsize(width, height); document.body.appendchild(renderer.domelement); // create camera, zoom out model bit, , add together scene. photographic camera = new three.perspectivecamera(45, width / height, 0.1, 20000); camera.position.set(0,16,0); scene.add(camera); // create event listener resizes renderer browser window. window.addeventlistener('resize', function() { var width = window.innerwidth, height = window.innerheight; renderer.setsize(width, height); camera.aspect = width / height; camera.updateprojectionmatrix(); }); // set background color of scene. renderer.setclearcolor(0x333f47, 1); // create light, set position, , add together scene. var lite = new three.pointlight(0xffffff); light.position.set(-100,200,100); scene.add(light); // load in mesh , add together scene. var loader = new three.jsonloader(); loader.load( "models/naos_apollona.js", function(geometry){ var material = new three.meshlambertmaterial({color: 0x55b663}); mesh = new three.mesh(geometry, material); //mesh.position.set(1,1,1) scene.add(mesh); }); // add together orbitcontrols can pan around mouse. controls = new three.orbitcontrols(camera, renderer.domelement); } // renders scene , updates render needed. function animate() { // read more requestanimationframe @ http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ requestanimationframe(animate); // render scene. renderer.render(scene, camera); controls.update(); }
you have no thought in space model is. need utilize bounding box of model, find center , subtract position.
mesh = new three.mesh ...; mesh.geometry.computeboundingbox (); var bbox = mesh.geometry.boundingbox; mesh.position.set (bbox.min.x-bbox.max.x, bbox.min.y-bbox.max.y, bbox.min.z-bbox.max.z);
and there bounding box helper three.boundingboxhelper()
help visualize bounding box of model.
json position three.js
Comments
Post a Comment