<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>
<script src="../visualization/drawGraph.js"></script>
</head>
<body>
<div id="3d-graph"></div>
<script>
var color1= 0xffffff; /*white*/
var color2= '#020227'; /*kohly*/
var color3= 0x1c5c61; /*teal*/
var color4= 0xfa6e70; //red/orange
var color5="#380152"; //purple
var color6="#696767"; //grey
var color7="#03dbfc"; //blue
$.getJSON("../json/multiscale.json", function(json) {
var setup=json.setup;
setup.viz.colorMaps=[YlGnBu,coolwarm, winter ,jet];
scale=100000;
var stress=0.0;
var container='3d-graph';
var Graph=drawGraph(container,setup,scale,true);
// example to test relPos rotations
var scene=Graph.scene();
var trialBox= new THREE.Mesh(
new THREE.BoxGeometry(scale, scale, scale),
new THREE.MeshLambertMaterial({
color: color4,
transparent: false,
})
);
var trialBoxSmall= new THREE.Mesh(
new THREE.BoxGeometry(scale, scale, scale),
new THREE.MeshLambertMaterial({
color: color4,
transparent: false,
})
);
var trialBoxInfer= new THREE.Mesh(
new THREE.BoxGeometry(scale, scale/2, scale),
new THREE.MeshLambertMaterial({
color: color3,
transparent: false,
})
);
// var pos=new THREE.Vector3(-10,-10,-10);
// var posSmall=new THREE.Vector3(-5,-15,-5);
// var rot=new THREE.Vector3(30,30,0);
// trialBox.rotation.x=rot.x;
// trialBox.rotation.y=rot.y;
// trialBox.rotation.z=rot.z;
// trialBox.position.x=pos.x;
// trialBox.position.y=pos.y;
// trialBox.position.z=pos.z;
// trialBox.add(trialBoxSmall)
// trialBoxSmall.position.x=posSmall.x;
// trialBoxSmall.position.y=posSmall.y;
// trialBoxSmall.position.z=posSmall.z;
// var posInfer=pos.clone().add(applyQuaternion1(posSmall,setQuaternionFromEuler(rot)) )
// console.log(posInfer)
// trialBoxInfer.position.x=posInfer.x;
// trialBoxInfer.position.y=posInfer.y;
// trialBoxInfer.position.z=posInfer.z;
// trialBoxInfer.rotation.x=rot.x;
// trialBoxInfer.rotation.y=rot.y;
// trialBoxInfer.rotation.z=rot.z;
// scene.add(trialBox)
// scene.add(trialBoxInfer)
// console.log(trialBoxSmall)
});
function toRadians (angle) {
return angle * (Math.PI / 180.0);
}
function toDegrees (angle) {
return angle * (180.0 / Math.PI);
}
function setQuaternionFromEuler(euler){//euler::Vector3
var x=euler.x
var y=euler.y
var z=euler.z
var c1 = Math.cos( x / 2.0 )
var c2 = Math.cos( y / 2.0 )
var c3 = Math.cos( z / 2.0 )
var s1 = Math.sin( x / 2.0 )
var s2 = Math.sin( y / 2.0 )
var s3 = Math.sin( z / 2.0 )
var x = s1 * c2 * c3 + c1 * s2 * s3
var y = c1 * s2 * c3 - s1 * c2 * s3
var z = c1 * c2 * s3 + s1 * s2 * c3
var w = c1 * c2 * c3 - s1 * s2 * s3
return new THREE.Quaternion(x,y,z,w)
}
function applyQuaternion1(e,q2){ //e::Vector3,q2::Quaternion
var x = e.x
var y = e.y
var z = e.z
var qx = q2.x
var qy = q2.y
var qz = q2.z
var qw = q2.w
// calculate quat * vector
var ix = qw * x + qy * z - qz * y
var iy = qw * y + qz * x - qx * z
var iz = qw * z + qx * y - qy * x
var iw = - qx * x - qy * y - qz * z
// calculate result * inverse quat
var xx = ix * qw + iw * - qx + iy * - qz - iz * - qy
var yy = iy * qw + iw * - qy + iz * - qx - ix * - qz
var zz = iz * qw + iw * - qz + ix * - qy - iy * - qx
return new THREE.Vector3(xx,yy,zz)
}
</script>
</body>