indexTutorialPreview.html

<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>