<!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;
}
.label {
color: #FFF;
font-family: sans-serif;
padding: 2px;
background: rgba( 0, 0, 0, .6 );
}
</style>
</head>
<body>
<div id="3d-graph"></div>
<script src="//unpkg.com/three"></script>
<script src="../lib/TransformControls.js"></script>
<script src="../lib/STLLoader.js"></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="../lib/dat.gui.js"></script>
<script src="../visualization/utils.js"></script>
<script src="../visualization/geometry.js"></script>
<script src="../visualization/boundaryUtils.js"></script>
<!-- <script src="../visualization/boundary.js"></script> -->
<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 setup,Graph,gData,scene,camera,renderer,orbit,gui,guiSupport,guiLoad;
var scale=10.0;
setup=setupEmpty;
var supportCount=0;
var supportBoxes=[];
var supportControls=[];
var guiSupports=[];
var loadCount=0;
var loadBoxes=[];
var loadControls=[];
var guiLoads=[];
var name="test1";
//////////////init///////////////////////
// $.getJSON("../json/"+fileName+".json", function(json) {
[scene,camera,renderer,orbit]=loadGraph(setup,scale);
setup.supports=[];
setup.loads=[];
gui = new dat.GUI();
// });
// var three;
// var setup=setupEmpty;
// var empty=true;
// var static=false;
// var live=true;
// three= new threejs(setup,"container","",static,live,empty); //dynamic and live updates
// three.folderName="live";
// three.init();
var loader = new THREE.STLLoader();
var group;;
loader.load( "../CAD/"+name+".stl", function ( geometry ) {
var material = new THREE.MeshPhongMaterial( { color: 0xff5533, specular: 0x111111, shininess: 200 } );
var material = new THREE.MeshBasicMaterial( { color: color3 } );
var material = new THREE.MeshPhongMaterial(
{
side: THREE.OneSide, vertexColors: THREE.VertexColors
});
// material.vertexColors = THREE.VertexColors;
var count=geometry.attributes.position.count*3;
var colors=[]
for(var i=0;i<count/3.0;i++){
colors.push(28.0/255.0);
colors.push(92.0/255.0);
colors.push(97.0/255.0); //teal
}
var colors = new Float32Array( colors );
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
// for(var faceIndex=0;faceIndex<geometry.faces.length;faceIndex++){
// for(var vertexIndex=0;vertexIndex<geometry.faces[ faceIndex ].vertexColors.length;vertexIndex++){
// geometry.faces[ faceIndex ].vertexColors[ vertexIndex ] = new THREE.Color( color3 );
// }
// }
group = new THREE.Mesh( geometry, material );
// console.log(geometry.attributes.position.array);
// group.geometry.colorsNeedUpdate = true;
group.geometry.attributes.color.needsUpdate = true;
group.position.set( 0, -5.0*scale, 0.0 );
group.rotation.set( - Math.PI / 2, 0, 0 );
group.scale.set( scale, scale, scale );
group.name=name;
scene.add( group.clone() );
} );
// var scene,renderer,orbit,gui,guiSupport,guiLoad;
// var supportCount=0;
// var supportBoxes=[];
// var supportControls=[];
// var guiSupports=[];
// var loadCount=0;
// var loadBoxes=[];
// var loadControls=[];
// var guiLoads=[];
// setup.supports=[];
// setup.loads=[];
// var scale=1;
// scene= three.scene;
// renderer= three.renderer;
// orbit=three.controls;
// var calls={
// addSupportBox:addSupportBox,
// addLoadBox:addLoadBox
// }
guiAddSupports();
function updateNodeColors(){
var count=group.geometry.attributes.position.count*3;
var colors=[]
for(var i=0;i<count/3.0;i++){
colors.push(255.0/255.0);
colors.push(92.0/255.0);
colors.push(97.0/255.0); //teal
}
for(var j=0;j<supportCount;j++){
var box = new THREE.Box3();
supportBoxes[j].geometry.computeBoundingBox();
box.copy( supportBoxes[j].geometry.boundingBox ).applyMatrix4( supportBoxes[j].matrixWorld );
colors=[]
console.log(group.geometry.attributes.color.array[0])
for(var i=0;i<count/3.0;i++){
if(box.containsPoint(new THREE.Vector3(
scale*group.geometry.attributes.position.array[i*3],
scale*group.geometry.attributes.position.array[i*3+2]-5.0*scale,
scale*group.geometry.attributes.position.array[i*3+1]))){
colors.push(255.0/255.0);
colors.push(92.0/255.0);
colors.push(97.0/255.0); //orange
}else{
colors.push(28.0/255.0);
colors.push(92.0/255.0);
colors.push(97.0/255.0); //teal
}
}
}
for(var j=0;j<loadCount;j++){
var box1 = new THREE.Box3();
loadBoxes[j].geometry.computeBoundingBox();
box1.copy( loadBoxes[j].geometry.boundingBox ).applyMatrix4( loadBoxes[j].matrixWorld );
colors=[]
for(var i=0;i<count/3.0;i++){
if(box1.containsPoint(new THREE.Vector3(
scale*group.geometry.attributes.position.array[i*3],
scale*group.geometry.attributes.position.array[i*3+2]-5.0*scale,
scale*group.geometry.attributes.position.array[i*3+1]))){
// && group.geometry.attributes.color.array[i*3]==0.10980392247438431){
colors.push(3.0/255.0);
colors.push(219.0/255.0);
colors.push(252.0/255.0); //blue
}else if(group.geometry.attributes.color.array[i*3]==1.0){
colors.push(255.0/255.0);
colors.push(92.0/255.0);
colors.push(97.0/255.0); //orange
}else {
colors.push(28.0/255.0);
colors.push(92.0/255.0);
colors.push(97.0/255.0); //teal
}
}
}
var colors = new Float32Array( colors );
group.geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
// console.log(group.geometry.attributes.position.array);
// group.geometry.colorsNeedUpdate = true;
group.geometry.attributes.color.needsUpdate = true;
}
</script>
</body>
</html>