<!DOCTYPE html>
<html lang="en">
<head>
<title>MetaVoxel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!-- <link type="text/css" rel="stylesheet" href="main.css"> -->
<style>
body {
background-color: #f0f0f0;
color: #444;
}
a {
color: #08f;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
</head>
<body>
<div id="threejs">
<div class="header1">
<i> Hierarchical Simulation</i>
<!-- Three.js -->
</div>
<div id="webgl"></div>
</div>
<div id="graph">
<div class="header2">
<div class="dragbar"></div>
<i>. Detailed Simulation</i>
</div>
<div class="dragbar"></div>
<div id="webgl1"></div>
</div>
<div class="footer1">
<strong>left-click left window</strong>: orbit, <strong>right-click</strong>: zoom
</div>
<div class="footer2" id="footer2">
<!-- update change to more instructions/feedback -->
<i> Loading RhinoScript</i>
</div>
<!-- <div id="container"></div>
<div id="container"></div> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://files.mcneel.com/rhino3dm/js/latest/rhino3dm.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>
<!-- <script src="./lib/require.js"></script> -->
<script src="../lib/three.min.js"></script>
<script src="../lib/stats.js"></script>
<script src="../lib/dat.gui.js"></script>
<script src="../lib/SVGRenderer.js"></script>
<script src="../lib/DragControls.js"></script>
<script src="../lib/OrbitControls.js"></script>
<script src="../lib/TransformControls.js"></script>
<script src="../lib/js-colormaps.js"></script>
<script src="../lib/LineSegments2.js"></script>
<script src="../lib/LineSegmentsGeometry.js"></script>
<script src="../lib/Line2.js"></script>
<script src="../lib/LineMaterial.js"></script>
<script src="../lib/LineGeometry.js"></script>
<script src="../lib/GeometryUtils.js"></script>
<script src="../visualization/utils.js"></script>
<script src="../visualization/geometry.js"></script>
<!-- <script src="./beamFea.js"></script>
<script src="./geometry.js"></script> -->
<script src="../visualization/main.js"></script>
<script src="../fea/parallelFea.js"></script>
<script type="text/javascript" src="./rhino3dm.js"></script>
<!-- <script src="../visualization/draw.js"></script> -->
<script>
////////////////////////dragbar///////////////
$('.dragbar').mousedown(function(e){
e.preventDefault();
$(document).mousemove(function(e){
// $('#position').html(e.pageX +', '+ e.pageY);
$('#threejs').css("width",e.pageX+2);
$('#webgl').css("width",e.pageX+2);
$('#graph').css("left",e.pageX+2);
// $('#json').css("left",e.pageX+2);
$('.footer1').css("width",e.pageX+2);
$('.footer2').css("left",e.pageX+2);
})
onWindowResize();//todo change location
});
$(document).mouseup(function(e){
$(document).unbind('mousemove');
onWindowResize();//todo change location
});
//////////////////////////////////////////////////////////////////
/////////////////seemless mirror control/////////////////////
$('#graph').on('click mousedown touchstart', function(){
three.controls = new THREE.OrbitControls( camera, three.renderer.domElement );
})
$('#threejs').on('click mousedown touchstart', function(){
three1.controls = new THREE.OrbitControls( camera, three1.renderer.domElement );
})
var three; //todo change location
var three1; //todo change location
var setup;
var setup1;
rhino3dm().then(async m => {
console.log('Loaded rhino3dm.');
document.getElementById("footer2").innerHTML = "Loaded rhino3dm.";
_rhino3dm = m; // global
var latticeSize=4;
var voxelSize=5;
setup=JSON.parse(JSON.stringify(setupEmpty));
setup.hierarchical=false;
setup.voxelSize=voxelSize;
var material={
area:1.0,
density:0.028,
stiffness:10000000
};
latticeSetup(setup,latticeSize,voxelSize,createVoxel,{x:0,y:-400,z:0},material);
setup.viz.colorMaps=[YlGnBu,coolwarm, winter ,jet];
setup.viz.minStress=10e6;
setup.viz.maxStress=-10e6;
setup.viz.exaggeration=10e3;
setup.solve=solveParallel;
setup.numTimeSteps=100;
three= new threejs(setup,"webgl1","graph");
three.init();
////////////////////////////////////
setup1=JSON.parse(JSON.stringify(setupEmpty));
setup1.hierarchical=true;
setup1.voxelSize=voxelSize;
latticeSetup(setup1,latticeSize,voxelSize,createHierarchalVoxel,{x:0,y:-400,z:0},material);
setup1.viz.colorMaps=[YlGnBu,coolwarm, winter ,jet];
setup1.viz.minStress=10e6;
setup1.viz.maxStress=-10e6;
setup1.viz.exaggeration=10e3;
setup1.solve=solveParallel;
three1= new threejs(setup1,"webgl","threejs");
three1.init();
gui.add(three.setup,"numTimeSteps", 0, 200).listen();
gui.add(three.setup,"solve");
document.getElementById("footer2").innerHTML = "Press solve for structure simulation.";
// more stuff
});
function solveParallel(){
document.getElementById("footer2").innerHTML = "Running...";
var numTimeSteps=250;
/////////////////////////////////////////////////////
var dt=0.0251646; //?? todo change to recommended step
setTimeout(function() {
simulateParallel(setup,three.setup.numTimeSteps,dt);
simulateParallel(setup1,three.setup.numTimeSteps,dt);
}, 1);
}
</script>
</body>
</html>