Newer
Older
<head>
<style> body { margin: 0; } </style>
<title>MetaVoxel</title>
<script src="../lib/dat.gui.js"></script>
<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 interaction= {
exaggeration:1,
speed:100
}
var gui = new dat.GUI();
gui.add(interaction,'exaggeration',0.0,10.0).listen();
gui.add(interaction,'speed',0.0,200.0).listen();
$.getJSON("../json/tutorial/0.json", function(json0) {
var maxNumFiles=json0.maxNumFiles-1;
$.getJSON("../json/tutorial/"+maxNumFiles+".json", function(json) {
var setup=json;
var static=false
setup.viz.colorMaps=[YlGnBu,coolwarm, winter ,jet];
if(setup.hierarchical){
// scale=setup.scale*200;
// nodeScale=scale/1500;
scale=setup.scale*0.001;
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,
restrained:node.restrained_degrees_of_freedom[0],
loaded:!(node.force.x==0.0&&node.force.y==0.0&&node.force.z==0.0),
displaced:(node.fixedDisplacement===undefined ||(node.fixedDisplacement.x==0&&node.fixedDisplacement.y==0&&node.fixedDisplacement.z==0))?false:true,
dxs:new Array(maxNumFiles).fill(0),
dys:new Array(maxNumFiles).fill(0),
dzs:new Array(maxNumFiles).fill(0),
axs:new Array(maxNumFiles).fill(0),
ays:new Array(maxNumFiles).fill(0),
azs:new Array(maxNumFiles).fill(0),
})),
links: setup.edges
.filter(edge => edge.id)
.map(edge => ({
source: 'n'+edge.source,
target: 'n'+edge.target,
stresses:new Array(maxNumFiles).fill(getColor(setup.viz,edge.stress)),
// console.log(getColor(setup.viz,setup.edges[0].stress))
//////////////////////////////////////////////////////////////////////////
const Graph = ForceGraph3D({ controlType: 'orbit' }).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);
// })
.nodeThreeObject(({ restrained,loaded,displaced }) => new THREE.Mesh(
new THREE.BoxGeometry(nodeScale, nodeScale, nodeScale)
color: getNodeColor(restrained,loaded,displaced),
transparent: false,
})
))
.d3Force('box', () => {
gData.nodes.forEach(node => {
node.fx=node.px;
node.fy=node.py;
node.fz=node.pz;
});
})
.cooldownTime(Infinity)
.graphData(gData);
var position=new THREE.Vector3(500,100,3000);
Graph.camera().position.copy( position );
// Graph.camera().lookAt( 500, orbit.target.y, orbit.target.z );
// Graph.camera().lookAt( 500, 0, 0 );
Graph.controls().target.set( 500, 100, 0 );
////////////////////////////////////
drawConstraintBoundingBoxes(json0,Graph.scene(),scale);
///////////////////////////////////////
if(static){
var count=0;
var totalCount=0;
var increment=true;
setInterval(() => {
Graph.d3Force('box', () => {
gData.nodes.forEach(node => {
node.fx=node.px+count/interaction.speed*node.dx*interaction.exaggeration;
node.fy=node.py+count/interaction.speed*node.dy*interaction.exaggeration;
node.fz=node.pz+count/interaction.speed*node.dz*interaction.exaggeration;
increment=false;
}else if (count<0){
increment=true;
}
if(increment){
count++;
}else{
count--;
}
}, 1);
}else{ //dynamic
for(let i=0;i<maxNumFiles;i++){
$.getJSON("../json/tutorial/"+i+".json", function(jsons) {
var setups=jsons;
for(let j=0;j<setups.nodes.length;j++){
gData.nodes[j].dxs[i]=setups.nodes[j].displacement.x*scale;
gData.nodes[j].dys[i]=setups.nodes[j].displacement.y*scale;
gData.nodes[j].dzs[i]=setups.nodes[j].displacement.z*scale;
gData.nodes[j].axs[i]=setups.nodes[j].angle.x;
gData.nodes[j].ays[i]=setups.nodes[j].angle.y;
gData.nodes[j].azs[i]=setups.nodes[j].angle.z;
setups.viz.colorMaps=[YlGnBu,coolwarm, winter ,jet];
setups.viz.colorMap=0;
// console.log(getColor(setups.viz,setups.edges[j].stress))
gData.links[j].stresses[i]=getColor(setups.viz,setups.edges[j].stress);
}
});
}
var count=0;
var totalCount=0;
var increment=true;
setInterval(() => {
Graph.d3Force('box', () => {
gData.nodes.forEach(node => {
node.fx=node.px+node.dxs[count]*interaction.exaggeration;
node.fy=node.py+node.dys[count]*interaction.exaggeration;
node.fz=node.pz+node.dzs[count]*interaction.exaggeration;
// gData.links.forEach(edge => {edge.color=edge.stresses[count]});
// Graph.graphData(gData);
Graph.nodeThreeObject(({ restrained,loaded,displaced,axs,ays,azs }) => getMesh(restrained,loaded,displaced,axs[count],ays[count],azs[count]) );
// Graph.linkColor(({ stresses }) => stresses[count]);
// Graph.linkWidth(({ stressesVal }) => (stressesVal[count]==0.0)?(scale/10.0):scale)
// Graph.linkOpacity(({ stresses }) => stresses[count]);
}
// if(count>=maxNumFiles-1){
// increment=false;
// }else if (count<=1){
// increment=true;
// }
// if(increment){
// count++;
// }else{
// count--;
// }
}
});
});
function drawConstraintBoundingBoxes(setup,scene,scale){
//grid helper
var helper = new THREE.GridHelper( 100, 100 );
helper.position.y = -setup.voxelSize/2.0*scale;
// helper.position.y = -setup.voxelSize/2.0*scale +2*setup.voxelSize*scale;
helper.material.transparent = true;
helper.scale.x=2.0*scale
helper.scale.z=2.0*scale
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
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??
};
function getNodeColor(restrained,loaded,displaced){
if (restrained){
return 0xfa6e70;
}else if(loaded){
return 0x03dbfc;
}else if(displaced){
return 0x03dbfc;
function getMesh(restrained,loaded,displaced,ax,ay,az){
var m=new THREE.Mesh(
new THREE.BoxGeometry(nodeScale, nodeScale, nodeScale),
new THREE.MeshLambertMaterial({
color: getNodeColor(restrained,loaded,displaced),
transparent: false,
})
);
m.rotation.x=ax;
m.rotation.y=ay;
m.rotation.z=az;
return m;