javascript - Show/Hide models in JSC3D -
javascript - Show/Hide models in JSC3D -
i have jsc3d scene contains multiple files. goal show/hide 1 of models onclick call. 2 options can come recreate scene 1 model missing, or somehow access visible property of 1 of models. i've tried various permutations of alert code access visible property, no luck there. updateview function effort recreate scene missing model. btw, if alter colors[newloaded] colors[newloaded+1] colors update, displayed models remain same. has been many years since looked stuff sure easy missing thanks
<!doctype html> <html> <head> <title>crown study ranking</title> <script type="text/javascript" src="jsc3d/jsc3d.js"></script> <script type="text/javascript" src="jsc3d/jsc3d.webgl.js"></script> <script type="text/javascript" src="jsc3d/jsc3d.touch.js"></script> </head> <body> <div style="width:800px; margin:auto; position:relative;"> <canvas id="cv" style="border: 1px solid;" width="750" height="400"> seems using outdated browser not back upwards canvas :-( </canvas> <form action=""> <input type="checkbox" name="antagonist" value="1" onclick="this.value = -1*this.value; updateview(this.name,this.value);" checked> antagonist</input> <input type="checkbox" name="arch" value="1" onclick="this.value = -1*this.value; updateview(this.name,this.value);" checked> main arch</input> <input type="checkbox" name="crown" value="1" onclick="this.value = -1*this.value; updateview(this.name,this.value);" checked> crown</input> </form> </div> <script type="text/javascript"> var canvas = document.getelementbyid('cv'); var viewer = new jsc3d.viewer(canvas); var components = ['models/dummy.stl', 'models/dummya.stl', 'models/dummyc.stl']; var colors = [0xff0000, 0x0000ff, 0x00ff00, 0xffff00, 0x00ffff]; var thescene = new jsc3d.scene; var numofloaded = 0; var onmodelloaded = function(scene) { var meshes = scene.getchildren(); (var i=0; i<meshes.length; i++) { thescene.addchild(meshes[i]); if (meshes.length > 0) meshes[0].setmaterial(new jsc3d.material('red-material', 0, colors[numofloaded])); } if (++numofloaded == components.length) viewer.replacescene(thescene); }; (var i=0; i<components.length; i++) { var loader = new jsc3d.stlloader; loader.onload = onmodelloaded; loader.loadfromurl(components[i]); } viewer.setparameter('modelcolor', '#ff0000'); viewer.setparameter('backgroundcolor1', '#e5d7ba'); viewer.setparameter('backgroundcolor2', '#383840'); viewer.setparameter('rendermode', 'flat'); viewer.setparameter('renderer', 'webgl'); viewer.init(); viewer.update(); alert (meshes[1].visible.value); ////////////////////////////////////////////////////////////////////////////////////// function updateview (name,value) { var newscene = new jsc3d.scene; var newloaded = 0; var newmodelloaded = function(scene) { var newmeshes = scene.getchildren(); (var i=1; i<newmeshes.length; i++) { newscene.addchild(newmeshes[i]); if (newmeshes.length > 0) newmeshes[0].setmaterial(new jsc3d.material('red-material', 0, colors[newloaded])); } if (++newloaded == components.length) viewer.replacescene(newscene); }; (var i=1; i<components.length; i++) { var newloader = new jsc3d.stlloader; newloader.onload = newmodelloaded; newloader.loadfromurl(components[i]); } viewer.update(); }; </script> </body> </html>
1) add together <div> within <body> tag "objectlist".
<div id="objectlist"></div>
2) after lastly viewer.update(); add together little code
viewer.onloadingcomplete = function() { var shtml =""; for(obj in viewer.scene.children) { shtml+="<input type='checkbox' value='" + obj + "' checked onclick='setobject(this);'/>" + viewer.scene.children[object] + "<br />"; var objects = document.getelementbyid(objectlist); objects.innerhtml = shtml; };
3) add together setobject() function.
function setobject(self) { viewer.scene.children[self.value].visible = self.checked; }
except point #1 should in javascript code.
that's it...
enjoy , in case issues allow me know @ sarillaprasad@yahoo.com [or] post here :d
javascript 3d show-hide
Comments
Post a Comment