<!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/drawFriction.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(three);//todo change location
onWindowResize(three1);//todo change location
});
$(document).mouseup(function(e){
$(document).unbind('mousemove');
onWindowResize(three);//todo change location
onWindowResize(three1);//todo change location
});
//////////////////////////////////////////////////////////////////
/////////////////seemless mirror control/////////////////////
$('#graph').on('click mousedown touchstart', function(){
if(event.button!=0){
three.controls = new THREE.OrbitControls( camera, three.renderer.domElement );
}
})
$('#threejs').on('click mousedown touchstart', function(){
if(event.button!=0){
three1.controls = new THREE.OrbitControls( camera, three.renderer.domElement );
}
})
</script>
</body>
</html>