<head> <style> body { margin: 0; } </style> <title>MetaVoxel</title> <script src="//unpkg.com/three"></script> <script src="../lib/js-colormaps.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="//unpkg.com/3d-force-graph"></script> <!-- <script src="../lib/3d-force-graph.js"></script> --> <script src="//unpkg.com/three-spritetext"></script> <script src="../visualization/utils.js"></script> </head> <body> <div id="3d-graph"></div> <script> var color1= 0xffffff; /*white*/ var color2= '#020227'; /*kohly*/ var color3= 0x1c5c61; /*teal*/ var color4= "#fa6e70"; //red/orange var color5="#380152"; //purple var color6="#696767"; //grey var color7="#03dbfc"; //blue var scale,nodeScale; $.getJSON("../json/tutorial.json", function(json) { var setup=json.setup; var static=true; // setup.viz=[]; // setup.viz.colorMap=0; setup.viz.colorMaps=[YlGnBu,coolwarm, winter ,jet]; if(setup.hierarchical){ // scale=setup.scale*200; // nodeScale=scale/1500; scale=50000; nodeScale=scale/1500; }else{ scale=setup.scale*0.001; nodeScale=scale/5.0; } var stress=0.0; var gData = { nodes: setup.nodes.map(node => ({ id: node.id, px:node.position.x*scale, py:node.position.y*scale, pz:node.position.z*scale, dx:node.displacement.x*scale, dy:node.displacement.y*scale, dz:node.displacement.z*scale })), links: setup.edges .filter(edge => edge.id) .map(edge => ({ source: 'n'+edge.source, target: 'n'+edge.target, color:getColor(setup.viz,edge.stress) })) }; ////////////////////////////////////////////////////////////////////////// const Graph = ForceGraph3D().backgroundColor(color2) (document.getElementById('3d-graph')) .d3Force('center', null) .d3Force('charge', null) // .linkDirectionalParticles(0.5) // .linkThreeObject(link => { // // extend link with text sprite // const sprite = new SpriteText(`${link.source} > ${link.target}`); // sprite.color = 'lightgrey'; // sprite.textHeight = 1.5; // return sprite; // }) // .linkPositionUpdate((sprite, { start, end }) => { // const middlePos = Object.assign(...['x', 'y', 'z'].map(c => ({ // [c]: start[c] + (end[c] - start[c]) / 2 // calc middle point // }))); // // Position sprite // Object.assign(sprite.position, middlePos); // }) .linkWidth(1.0) .linkOpacity(1.0) // .linkColor(color3) .nodeThreeObject(({ id }) => new THREE.Mesh( new THREE.BoxGeometry(nodeScale, nodeScale, nodeScale) , new THREE.MeshLambertMaterial({ color: color3, transparent: true, opacity: 0.8 }) )) .d3Force('box', () => { gData.nodes.forEach(node => { node.fx=node.px; node.fy=node.py; node.fz=node.pz; }); }) .cooldownTime(Infinity) .graphData(gData); //////////////////////////////////// drawConstraintBoundingBoxes(json,Graph.scene(),scale); /////////////////////////////////////// }); function drawConstraintBoundingBoxes(setup,scene,scale){ //grid helper var helper = new THREE.GridHelper( 100, 100 ); helper.position.y = 0.0; helper.material.opacity = 0.5; helper.material.transparent = true; helper.scale.x=2.0*scale helper.scale.z=2.0*scale scene.add(helper); let supports=setup.supports; let loads=setup.loads; let mat=setup.materials; let disps=setup.fixedDisplacements; if (supports ) { for (var i=0;i< supports.length;i++) { let s=supports[i][0]; drawBox(s.min,s.max,color4,scene,scale); } } if (loads ) { for (var i=0;i< loads.length;i++) { let l=loads[i][0]; drawBox(l.min,l.max,color7,scene,scale); } } if (disps ) { for (var i=0;i< disps.length;i++) { let l=disps[i][0]; drawBox(l.min,l.max,color7,scene,scale); } } if (mat ) { for (var i=0;i< mat.length;i++) { let l=mat[i][0]; // console.log(l) drawBox(l.min,l.max,color5,scene,scale); } } }; function drawBox (min,max,color,scene,scale) { var box = new THREE.Box3(new THREE.Vector3(min.x*scale,min.y*scale,min.z*scale),new THREE.Vector3(max.x*scale,max.y*scale,max.z*scale)); var helper = new THREE.Box3Helper( box, color ); scene.add( helper ); // todo add name?? }; </script> </body>