Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revisionLast revisionBoth sides next revision | ||
playground:test_3js [2020/08/19 17:59] – hnagel | playground:test_3js [2020/08/20 09:49] – hnagel | ||
---|---|---|---|
Line 3: | Line 3: | ||
</ | </ | ||
< | < | ||
- | <div class=" | + | <!-- |
polymake for knusper | polymake for knusper | ||
- | Wed Aug 19 21:27:01 2020 | + | Thu Aug 20 12:35:04 2020 |
unnamed | unnamed | ||
--> | --> | ||
Line 25: | Line 25: | ||
| | ||
| | ||
- | | + | |
| | ||
| | ||
| | ||
| | ||
- | .resetButton{margin-top: 10px;} | + | button{margin-left: 0; margin-top: 10px} |
- | | + | |
| | ||
| | ||
- | #model95738212468 | + | #model76216027194 |
+ | | ||
+ | | ||
| | ||
| | ||
Line 130: | Line 131: | ||
</ | </ | ||
< | < | ||
+ | < | ||
<div id=' | <div id=' | ||
<div class=group id=' | <div class=group id=' | ||
Line 143: | Line 144: | ||
< | < | ||
< | < | ||
- | < | + | < |
</ | </ | ||
Line 155: | Line 156: | ||
< | < | ||
<div class=indented> | <div class=indented> | ||
- | < | + | < |
- | < | + | |
- | < | + | |
- | < | + | |
- | < | + | |
</ | </ | ||
<div class=suboption> | <div class=suboption> | ||
Line 180: | Line 177: | ||
</ | </ | ||
- | <img id=' | + | <img id=' |
- | <img id=' | + | <img id=' |
- | | + | <div id="model76216027194"></ |
+ | </ | ||
< | < | ||
requirejs.config({ | requirejs.config({ | ||
paths: { | paths: { | ||
- | three: '/ | + | three: '/ |
- | TrackballControls: | + | TrackballControls: |
- | Projector: '/ | + | Projector: '/ |
- | SVGRenderer: | + | SVGRenderer: |
- | WEBGL: '/ | + | WEBGL: '/ |
}, | }, | ||
shim: { | shim: { | ||
Line 208: | Line 206: | ||
THREE.SVGRenderer = SVGRenderer; | THREE.SVGRenderer = SVGRenderer; | ||
THREE.WEBGL = WEBGL; | THREE.WEBGL = WEBGL; | ||
+ | |||
+ | // COMMON_CODE_BLOCK_BEGIN | ||
const intervalLength = 25; // for automatic animations | const intervalLength = 25; // for automatic animations | ||
const explodableModel = false; | const explodableModel = false; | ||
- | var foldables = []; | + | const modelContains = { points: false, pointlabels: |
- | var three = document.getElementById(" | + | const foldables = []; |
+ | |||
+ | var three = document.getElementById(" | ||
var scene = new THREE.Scene(); | var scene = new THREE.Scene(); | ||
Line 274: | Line 276: | ||
}; | }; | ||
// select the target node | // select the target node | ||
- | var target = document.querySelector('# | + | var target = document.querySelector('# |
// create an observer instance | // create an observer instance | ||
Line 320: | Line 322: | ||
obj0.userData.edgeindices = [0, 1, 0, 2, 1, 3, 2, 3, 0, 4, 1, 5, 4, 5, 2, 6, 4, 6, 3, 7, 5, 7, 6, 7]; | obj0.userData.edgeindices = [0, 1, 0, 2, 1, 3, 2, 3, 0, 4, 1, 5, 4, 5, 2, 6, 4, 6, 3, 7, 5, 7, 6, 7]; | ||
< | < | ||
- | obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, depthTest: true, transparent: | + | obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, depthTest: true, linewidth: 1.5, transparent: |
obj0.userData.facets = [[0, 4, 6, 2], [7, 5, 1, 3], [5, 4, 0, 1], [2, 6, 7, 3], [0, 2, 3, 1], [6, 4, 5, 7]]; | obj0.userData.facets = [[0, 4, 6, 2], [7, 5, 1, 3], [5, 4, 0, 1], [2, 6, 7, 3], [0, 2, 3, 1], [6, 4, 5, 7]]; | ||
< | < | ||
- | obj0.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, side: THREE.DoubleSide, depthFunc: THREE.LessDepth, | + | obj0.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, |
init_object(obj0); | init_object(obj0); | ||
scene.add(obj0); | scene.add(obj0); | ||
Line 368: | Line 370: | ||
function init_object(obj) { | function init_object(obj) { | ||
- | if (obj.userData.hasOwnProperty(" | + | |
- | init_points(obj); | + | init_points(obj); |
- | | + | |
- | | + | |
- | init_pointlabels(obj); | + | if (obj.userData.hasOwnProperty(" |
- | | + | init_pointlabels(obj); |
- | | + | |
- | init_lines(obj); | + | |
- | | + | if (obj.userData.hasOwnProperty(" |
- | | + | init_lines(obj); |
- | init_edgelabels(obj); | + | |
- | | + | |
- | | + | if (obj.userData.hasOwnProperty(" |
- | init_arrowheads(obj); | + | init_edgelabels(obj); |
- | | + | |
- | | + | |
- | init_faces(obj); | + | if (obj.userData.hasOwnProperty(" |
- | | + | init_arrowheads(obj); |
+ | | ||
+ | | ||
+ | if (obj.userData.hasOwnProperty(" | ||
+ | init_faces(obj); | ||
+ | | ||
+ | | ||
} | } | ||
Line 586: | Line 594: | ||
- | // ------------------------ FOLDING ------------------------------------------------ | ||
- | // --------------------------------------------------------------------------------- | ||
- | // rotate point p around axis defined by points p1 and p2 by given angle | ||
- | function rotate(p, p1, p2, angle ){ | ||
- | angle = -angle; | ||
- | var x = p.x, y = p.y, z = p.z, | ||
- | a = p1.x, b = p1.y, c = p1.z, | ||
- | u = p2.x-p1.x, v = p2.y-p1.y, w = p2.z-p1.z; | ||
- | var result = []; | ||
- | var L = u*u + v*v + w*w; | ||
- | var sqrt = Math.sqrt; | ||
- | var cos = Math.cos; | ||
- | var sin = Math.sin; | ||
- | |||
- | | ||
- | | ||
- | | ||
- | |||
- | | ||
- | } | ||
- | |||
- | var fold = function(event){ | ||
- | var obj = foldables[Number(event.currentTarget.name)]; | ||
- | var foldvalue = Number(event.currentTarget.value); | ||
- | var scale = foldvalue - obj.userData.oldscale; | ||
- | |||
- | for (var j=0; j< | ||
- | rotateVertices(obj, | ||
- | } | ||
- | update(obj); | ||
- | obj.userData.oldscale += scale; | ||
- | lookAtBarycenter(obj); | ||
- | } | ||
- | |||
- | function lookAtBarycenter(obj){ | ||
- | control.target = barycenter(obj); | ||
- | } | ||
- | |||
- | function barycenter(obj) { | ||
- | var center = new THREE.Vector3(0, | ||
- | var points = obj.userData.points; | ||
- | for (var i=0; i< | ||
- | center.add(points[i].vector); | ||
- | } | ||
- | | ||
- | | ||
- | } | ||
- | |||
- | function rotateVertices(obj, | ||
- | var axes = obj.userData.axes; | ||
- | var subtrees = obj.userData.subtrees; | ||
- | var points = obj.userData.points; | ||
- | var angles = obj.userData.angles; | ||
- | if (edge < axes.length){ | ||
- | for (var j=0; j< | ||
- | var rotP = rotate(points[subtrees[edge][j]].vector, | ||
- | | ||
- | } | ||
- | } | ||
- | } | ||
- | |||
- | function update(obj) { | ||
- | | ||
- | | ||
- | } | ||
- | |||
- | if (foldables.length) { | ||
- | var settings = document.getElementById(' | ||
- | var foldDiv = document.createElement(' | ||
- | foldDiv.id = ' | ||
- | var title = document.createElement(' | ||
- | title.innerHTML = ' | ||
- | foldDiv.appendChild(title); | ||
- | foldDiv.className = ' | ||
- | for (var i=0; i< | ||
- | var range = document.createElement(' | ||
- | range.type = ' | ||
- | range.min = 0; | ||
- | range.max = 1; | ||
- | range.value = 0; | ||
- | range.step = 0.001; | ||
- | range.name = String(i); | ||
- | range.oninput = fold; | ||
- | foldDiv.appendChild(range); | ||
- | } | ||
- | lookAtBarycenter(foldables[0]); | ||
- | settings.insertBefore(foldDiv, | ||
- | } | ||
var xRotationEnabled = false; | var xRotationEnabled = false; | ||
Line 712: | Line 632: | ||
}; | }; | ||
- | + | if ( THREE.WEBGL.isWebGLAvailable() ) { | |
- | | + | render(); |
- | render(); | + | } else { |
- | + | var warning | |
- | if (explodableModel) | + | three.appendChild( warning |
- | for (var i=0; i<scene.children.length; | + | |
- | obj = scene.children[i]; | + | |
- | if ( obj.userData.explodable ) { | + | |
- | computeCentroid(obj); | + | |
- | } | + | |
- | } | + | |
} | } | ||
- | function computeCentroid(obj) { | + | |
- | centroid = new THREE.Vector3(); | + | |
- | obj.userData.points.forEach(function(pmpoint) { | + | |
- | centroid.add(pmpoint.vector); | + | |
- | }); | + | |
- | centroid.divideScalar(obj.userData.points.length); | + | |
- | obj.userData.centroid = centroid; | + | |
- | } | + | |
function changeTransparency() { | function changeTransparency() { | ||
var opacity = 1-Number(event.currentTarget.value); | var opacity = 1-Number(event.currentTarget.value); | ||
Line 795: | Line 701: | ||
} | } | ||
- | function | + | // ------------------------ FOLDING ------------------------------------------------ |
- | var labelsShown | + | // --------------------------------------------------------------------------------- |
- | | + | // rotate point p around axis defined by points p1 and p2 by given angle |
- | | + | function |
- | | + | angle = -angle; |
- | } | + | var x = p.x, y = p.y, z = p.z, |
- | | + | a = p1.x, b = p1.y, c = p1.z, |
- | | + | u = p2.x-p1.x, v = p2.y-p1.y, w = p2.z-p1.z; |
- | + | var result = []; | |
- | | + | var L = u*u + v*v + w*w; |
- | | + | var sqrt = Math.sqrt; |
- | setVisibility(true," | + | var cos = Math.cos; |
+ | var sin = Math.sin; | ||
+ | |||
+ | | ||
+ | result[1] = ((b*(u*u+w*w)-v*(a*u+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*y*cos(angle)+sqrt(L)*(c*u-a*w+w*x-u*z)*sin(angle))/L; | ||
+ | result[2] = ((c*(u*u+v*v)-w*(a*u+b*v-u*x-v*y-w*z))*(1-cos(angle))+L*z*cos(angle)+sqrt(L)*(-b*u+a*v-v*x+u*y)*sin(angle))/ | ||
+ | |||
+ | | ||
+ | } | ||
+ | |||
+ | var fold = function(event){ | ||
+ | | ||
+ | | ||
+ | | ||
+ | |||
+ | | ||
+ | | ||
} | } | ||
+ | update(obj); | ||
+ | obj.userData.oldscale += scale; | ||
+ | lookAtBarycenter(obj); | ||
+ | } | ||
- | | + | function lookAtBarycenter(obj){ |
- | // | + | control.target = barycenter(obj); |
- | var myWindow | + | } |
- | | + | |
- | | + | function barycenter(obj) { |
- | | + | var center = new THREE.Vector3(0, |
- | | + | var points = obj.userData.points; |
+ | for (var i=0; i< | ||
+ | center.add(points[i].vector); | ||
+ | } | ||
+ | | ||
+ | | ||
+ | } | ||
+ | |||
+ | function rotateVertices(obj, | ||
+ | var axes = obj.userData.axes; | ||
+ | var subtrees = obj.userData.subtrees; | ||
+ | var points = obj.userData.points; | ||
+ | var angles = obj.userData.angles; | ||
+ | if (edge < axes.length){ | ||
+ | for (var j=0; j< | ||
+ | var rotP = rotate(points[subtrees[edge][j]].vector, | ||
+ | | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function update(obj) { | ||
+ | | ||
+ | | ||
+ | } | ||
+ | |||
+ | if (foldables.length) { | ||
+ | var settings = document.getElementById(' | ||
+ | var foldDiv = document.createElement(' | ||
+ | | ||
+ | var title = document.createElement(' | ||
+ | title.innerHTML = ' | ||
+ | foldDiv.appendChild(title); | ||
+ | foldDiv.className | ||
+ | | ||
+ | | ||
+ | | ||
+ | range.min = 0; | ||
+ | range.max = 1; | ||
+ | range.value = 0; | ||
+ | range.step = 0.001; | ||
+ | range.name = String(i); | ||
+ | range.oninput = fold; | ||
+ | foldDiv.appendChild(range); | ||
} | } | ||
+ | lookAtBarycenter(foldables[0]); | ||
+ | settings.insertBefore(foldDiv, | ||
} | } | ||
+ | |||
| | ||
// ---------------------- EXPLOSION ------------------------------------------------ | // ---------------------- EXPLOSION ------------------------------------------------ | ||
// --------------------------------------------------------------------------------- | // --------------------------------------------------------------------------------- | ||
+ | |||
+ | if (explodableModel) { | ||
+ | for (var i=0; i< | ||
+ | obj = scene.children[i]; | ||
+ | if ( obj.userData.explodable ) { | ||
+ | computeCentroid(obj); | ||
+ | } | ||
+ | } | ||
+ | document.getElementById(' | ||
+ | document.getElementById(' | ||
+ | document.getElementById(' | ||
+ | } | ||
+ | |||
+ | function computeCentroid(obj) { | ||
+ | centroid = new THREE.Vector3(); | ||
+ | obj.userData.points.forEach(function(pmpoint) { | ||
+ | centroid.add(pmpoint.vector); | ||
+ | }); | ||
+ | centroid.divideScalar(obj.userData.points.length); | ||
+ | obj.userData.centroid = centroid; | ||
+ | } | ||
function explode(factor) { | function explode(factor) { | ||
Line 898: | Line 891: | ||
} | } | ||
- | function showOrHideObject(event){ | + | // ---------------------- DISPLAY -------------------------------------------------- |
- | var nr = Number(event.currentTarget.name); | + | // --------------------------------------------------------------------------------- |
- | scene.children[nr].visible = event.currentTarget.checked; | + | |
- | } | + | |
- | | + | |
- | // append checkboxes for displaying or hiding objects | + | const objectTypeInnerHTMLs |
- | var shownObjectsList | + | const objectTypeVisible |
- | for (var i=0; i< | + | Object.assign(objectTypeVisible, |
- | obj = scene.children[i]; | + | const sortedObjectTypeKeys |
- | var objNode = document.createElement(' | + | const shownObjectTypesList |
- | | + | |
- | var checkbox = document.createElement(' | + | |
- | checkbox.type = ' | + | |
- | checkbox.checked = true; | + | |
- | checkbox.name = String(i); | + | |
- | | + | |
- | shownObjectsList.appendChild(checkbox); | + | |
- | shownObjectsList.appendChild(objNode); | + | |
- | } | + | |
function setVisibility(bool, | function setVisibility(bool, | ||
Line 928: | Line 909: | ||
} | } | ||
- | function | + | function |
- | | + | |
- | | + | |
+ | objectTypeVisible[name] = checked; | ||
+ | setVisibility(checked,name); | ||
} | } | ||
- | function toggleFaces(event) { | + | for (var i=0; i< |
- | | + | |
+ | if (modelContains[key]) { | ||
+ | var objTypeNode = document.createElement(' | ||
+ | objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '< | ||
+ | var checkbox = document.createElement(' | ||
+ | checkbox.type = ' | ||
+ | checkbox.checked | ||
+ | checkbox.name = key; | ||
+ | checkbox.onchange = toggleObjectTypeVisibility; | ||
+ | shownObjectTypesList.appendChild(checkbox); | ||
+ | shownObjectTypesList.appendChild(objTypeNode); | ||
+ | } | ||
} | } | ||
- | function toggleEdges(event) { | + | // ------------------------------------------------------ |
- | setVisibility(event.currentTarget.checked," | + | |
- | } | + | |
- | function | + | function |
- | | + | |
+ | scene.children[nr].visible = event.currentTarget.checked; | ||
} | } | ||
- | function toggleArrowheads(event) { | + | // append checkboxes for displaying or hiding objects |
- | | + | var shownObjectsList = document.getElementById(' |
+ | for (var i=0; i< | ||
+ | | ||
+ | var objNode = document.createElement(' | ||
+ | objNode.innerHTML = obj.name + '< | ||
+ | var checkbox = document.createElement(' | ||
+ | checkbox.type = ' | ||
+ | checkbox.checked | ||
+ | checkbox.name = String(i); | ||
+ | checkbox.onchange = toggleObjectVisibility; | ||
+ | shownObjectsList.appendChild(checkbox); | ||
+ | shownObjectsList.appendChild(objNode); | ||
} | } | ||
- | document.getElementById(' | + | // ---------------------- SVG ------------------------------------------------------ |
- | document.getElementById(' | + | // --------------------------------------------------------------------------------- |
- | document.getElementById(' | + | |
- | document.getElementById(' | + | |
- | document.getElementById(' | + | |
+ | function takeSvgScreenshot() { | ||
+ | if (objectTypeVisible[" | ||
+ | setVisibility(false," | ||
+ | } | ||
+ | if (objectTypeVisible[" | ||
+ | setVisibility(false," | ||
+ | } | ||
+ | svgRenderer.render(scene, | ||
+ | svgElement = XMLS.serializeToString(svgRenderer.domElement); | ||
+ | | ||
+ | if (objectTypeVisible[" | ||
+ | setVisibility(true," | ||
+ | } | ||
+ | if (objectTypeVisible[" | ||
+ | setVisibility(true," | ||
+ | } | ||
+ | if (document.getElementById(' | ||
+ | //show in new tab | ||
+ | var myWindow = window.open("","" | ||
+ | myWindow.document.body.innerHTML = svgElement; | ||
+ | } else{ | ||
+ | // download svg file | ||
+ | download(" | ||
+ | } | ||
+ | } | ||
function download(filename, | function download(filename, | ||
Line 970: | Line 996: | ||
} | } | ||
- | var tempobj; | + | |
- | tempobj = document.getElementById(' | + | |
- | if (tempobj) { | + | |
- | | + | |
- | | + | |
- | | + | |
- | } | + | |
- | tempobj = document.getElementById(' | + | |
- | if (tempobj) { | + | |
- | | + | |
- | } | + | |
document.getElementById(' | document.getElementById(' | ||
document.getElementById(' | document.getElementById(' | ||
Line 991: | Line 1007: | ||
document.getElementById(' | document.getElementById(' | ||
- | |||
// ------------------ SHORTCUTS -------------------------------------------- | // ------------------ SHORTCUTS -------------------------------------------- | ||
Line 1224: | Line 1239: | ||
if (settingsShown){ | if (settingsShown){ | ||
document.getElementById(' | document.getElementById(' | ||
- | } else{ | + | } else { |
document.getElementById(' | document.getElementById(' | ||
} | } | ||
Line 1236: | Line 1251: | ||
</ | </ | ||
</ | </ | ||
- | </ | ||
</ | </ | ||
<code perl> | <code perl> | ||
Line 1242: | Line 1256: | ||
</ | </ | ||
< | < | ||
- | <div class=" | + | <!-- |
polymake for knusper | polymake for knusper | ||
- | Wed Aug 19 21:27:01 2020 | + | Thu Aug 20 12:35:04 2020 |
planar_net_ | planar_net_ | ||
--> | --> | ||
Line 1264: | Line 1278: | ||
| | ||
| | ||
- | | + | |
| | ||
| | ||
| | ||
| | ||
- | .resetButton{margin-top: 10px;} | + | button{margin-left: 0; margin-top: 10px} |
- | | + | |
| | ||
| | ||
- | #model89920187284 | + | #model46056522042 |
+ | | ||
+ | | ||
| | ||
| | ||
Line 1369: | Line 1384: | ||
</ | </ | ||
< | < | ||
+ | < | ||
<div id=' | <div id=' | ||
<div class=group id=' | <div class=group id=' | ||
Line 1382: | Line 1397: | ||
< | < | ||
< | < | ||
- | < | + | < |
</ | </ | ||
Line 1394: | Line 1409: | ||
< | < | ||
<div class=indented> | <div class=indented> | ||
- | < | + | < |
- | < | + | |
- | < | + | |
- | < | + | |
- | < | + | |
</ | </ | ||
<div class=suboption> | <div class=suboption> | ||
Line 1419: | Line 1430: | ||
</ | </ | ||
- | <img id=' | + | <img id=' |
- | <img id=' | + | <img id=' |
- | | + | <div id="model46056522042"></ |
+ | </ | ||
< | < | ||
requirejs.config({ | requirejs.config({ | ||
paths: { | paths: { | ||
- | three: '/ | + | three: '/ |
- | TrackballControls: | + | TrackballControls: |
- | Projector: '/ | + | Projector: '/ |
- | SVGRenderer: | + | SVGRenderer: |
- | WEBGL: '/ | + | WEBGL: '/ |
}, | }, | ||
shim: { | shim: { | ||
Line 1447: | Line 1459: | ||
THREE.SVGRenderer = SVGRenderer; | THREE.SVGRenderer = SVGRenderer; | ||
THREE.WEBGL = WEBGL; | THREE.WEBGL = WEBGL; | ||
+ | |||
+ | // COMMON_CODE_BLOCK_BEGIN | ||
const intervalLength = 25; // for automatic animations | const intervalLength = 25; // for automatic animations | ||
const explodableModel = false; | const explodableModel = false; | ||
- | var foldables = []; | + | const modelContains = { points: false, pointlabels: |
- | var three = document.getElementById(" | + | const foldables = []; |
+ | |||
+ | var three = document.getElementById(" | ||
var scene = new THREE.Scene(); | var scene = new THREE.Scene(); | ||
Line 1513: | Line 1529: | ||
}; | }; | ||
// select the target node | // select the target node | ||
- | var target = document.querySelector('# | + | var target = document.querySelector('# |
// create an observer instance | // create an observer instance | ||
Line 1565: | Line 1581: | ||
obj0.userData.edgeindices = [0, 1, 1, 2, 0, 3, 2, 3, 0, 4, 1, 5, 4, 5, 2, 6, 3, 7, 6, 7, 3, 8, 0, 9, 8, 9, 1, 10, 2, 11, 10, 11, 4, 12, 5, 13, 12, 13]; | obj0.userData.edgeindices = [0, 1, 1, 2, 0, 3, 2, 3, 0, 4, 1, 5, 4, 5, 2, 6, 3, 7, 6, 7, 3, 8, 0, 9, 8, 9, 1, 10, 2, 11, 10, 11, 4, 12, 5, 13, 12, 13]; | ||
< | < | ||
- | obj0.userData.edgematerial = new THREE.LineBasicMaterial( { transparent: false, linewidth: 1.5, depthTest: true, color: 0x000000 | + | obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, depthTest: true, linewidth: 1.5, transparent: false } ); |
obj0.userData.facets = [[0, 1, 2, 3], [13, 5, 4, 12], [5, 1, 0, 4], [3, 2, 6, 7], [0, 3, 8, 9], [2, 1, 10, 11]]; | obj0.userData.facets = [[0, 1, 2, 3], [13, 5, 4, 12], [5, 1, 0, 4], [3, 2, 6, 7], [0, 3, 8, 9], [2, 1, 10, 11]]; | ||
< | < | ||
- | obj0.userData.facetmaterial = new THREE.MeshBasicMaterial( { transparent: true, opacity: 1, polygonOffsetUnits: 1, polygonOffset: | + | obj0.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, |
obj0.userData.axes = [[5,4], | obj0.userData.axes = [[5,4], | ||
[2,1], | [2,1], | ||
Line 1637: | Line 1653: | ||
function init_object(obj) { | function init_object(obj) { | ||
- | if (obj.userData.hasOwnProperty(" | + | |
- | init_points(obj); | + | init_points(obj); |
- | | + | |
- | | + | |
- | init_pointlabels(obj); | + | if (obj.userData.hasOwnProperty(" |
- | | + | init_pointlabels(obj); |
- | | + | |
- | init_lines(obj); | + | |
- | | + | if (obj.userData.hasOwnProperty(" |
- | | + | init_lines(obj); |
- | init_edgelabels(obj); | + | |
- | | + | |
- | | + | if (obj.userData.hasOwnProperty(" |
- | init_arrowheads(obj); | + | init_edgelabels(obj); |
- | | + | |
- | | + | |
- | init_faces(obj); | + | if (obj.userData.hasOwnProperty(" |
- | | + | init_arrowheads(obj); |
+ | | ||
+ | | ||
+ | if (obj.userData.hasOwnProperty(" | ||
+ | init_faces(obj); | ||
+ | | ||
+ | | ||
} | } | ||
Line 1855: | Line 1877: | ||
- | // ------------------------ FOLDING ------------------------------------------------ | ||
- | // --------------------------------------------------------------------------------- | ||
- | // rotate point p around axis defined by points p1 and p2 by given angle | ||
- | function rotate(p, p1, p2, angle ){ | ||
- | angle = -angle; | ||
- | var x = p.x, y = p.y, z = p.z, | ||
- | a = p1.x, b = p1.y, c = p1.z, | ||
- | u = p2.x-p1.x, v = p2.y-p1.y, w = p2.z-p1.z; | ||
- | var result = []; | ||
- | var L = u*u + v*v + w*w; | ||
- | var sqrt = Math.sqrt; | ||
- | var cos = Math.cos; | ||
- | var sin = Math.sin; | ||
- | |||
- | | ||
- | | ||
- | | ||
- | |||
- | | ||
- | } | ||
- | |||
- | var fold = function(event){ | ||
- | var obj = foldables[Number(event.currentTarget.name)]; | ||
- | var foldvalue = Number(event.currentTarget.value); | ||
- | var scale = foldvalue - obj.userData.oldscale; | ||
- | |||
- | for (var j=0; j< | ||
- | rotateVertices(obj, | ||
- | } | ||
- | update(obj); | ||
- | obj.userData.oldscale += scale; | ||
- | lookAtBarycenter(obj); | ||
- | } | ||
- | |||
- | function lookAtBarycenter(obj){ | ||
- | control.target = barycenter(obj); | ||
- | } | ||
- | |||
- | function barycenter(obj) { | ||
- | var center = new THREE.Vector3(0, | ||
- | var points = obj.userData.points; | ||
- | for (var i=0; i< | ||
- | center.add(points[i].vector); | ||
- | } | ||
- | | ||
- | | ||
- | } | ||
- | |||
- | function rotateVertices(obj, | ||
- | var axes = obj.userData.axes; | ||
- | var subtrees = obj.userData.subtrees; | ||
- | var points = obj.userData.points; | ||
- | var angles = obj.userData.angles; | ||
- | if (edge < axes.length){ | ||
- | for (var j=0; j< | ||
- | var rotP = rotate(points[subtrees[edge][j]].vector, | ||
- | | ||
- | } | ||
- | } | ||
- | } | ||
- | |||
- | function update(obj) { | ||
- | | ||
- | | ||
- | } | ||
- | |||
- | if (foldables.length) { | ||
- | var settings = document.getElementById(' | ||
- | var foldDiv = document.createElement(' | ||
- | foldDiv.id = ' | ||
- | var title = document.createElement(' | ||
- | title.innerHTML = ' | ||
- | foldDiv.appendChild(title); | ||
- | foldDiv.className = ' | ||
- | for (var i=0; i< | ||
- | var range = document.createElement(' | ||
- | range.type = ' | ||
- | range.min = 0; | ||
- | range.max = 1; | ||
- | range.value = 0; | ||
- | range.step = 0.001; | ||
- | range.name = String(i); | ||
- | range.oninput = fold; | ||
- | foldDiv.appendChild(range); | ||
- | } | ||
- | lookAtBarycenter(foldables[0]); | ||
- | settings.insertBefore(foldDiv, | ||
- | } | ||
var xRotationEnabled = false; | var xRotationEnabled = false; | ||
Line 1981: | Line 1915: | ||
}; | }; | ||
- | + | if ( THREE.WEBGL.isWebGLAvailable() ) { | |
- | | + | render(); |
- | render(); | + | } else { |
- | + | var warning | |
- | if (explodableModel) | + | three.appendChild( warning |
- | for (var i=0; i<scene.children.length; | + | |
- | obj = scene.children[i]; | + | |
- | if ( obj.userData.explodable ) { | + | |
- | computeCentroid(obj); | + | |
- | } | + | |
- | } | + | |
} | } | ||
- | function computeCentroid(obj) { | + | |
- | centroid = new THREE.Vector3(); | + | |
- | obj.userData.points.forEach(function(pmpoint) { | + | |
- | centroid.add(pmpoint.vector); | + | |
- | }); | + | |
- | centroid.divideScalar(obj.userData.points.length); | + | |
- | obj.userData.centroid = centroid; | + | |
- | } | + | |
function changeTransparency() { | function changeTransparency() { | ||
var opacity = 1-Number(event.currentTarget.value); | var opacity = 1-Number(event.currentTarget.value); | ||
Line 2064: | Line 1984: | ||
} | } | ||
- | function | + | // ------------------------ FOLDING ------------------------------------------------ |
- | var labelsShown | + | // --------------------------------------------------------------------------------- |
- | | + | // rotate point p around axis defined by points p1 and p2 by given angle |
- | | + | function |
- | | + | angle = -angle; |
- | } | + | var x = p.x, y = p.y, z = p.z, |
- | | + | a = p1.x, b = p1.y, c = p1.z, |
- | | + | u = p2.x-p1.x, v = p2.y-p1.y, w = p2.z-p1.z; |
- | + | var result = []; | |
- | | + | var L = u*u + v*v + w*w; |
- | | + | var sqrt = Math.sqrt; |
- | setVisibility(true," | + | var cos = Math.cos; |
+ | var sin = Math.sin; | ||
+ | |||
+ | | ||
+ | result[1] = ((b*(u*u+w*w)-v*(a*u+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*y*cos(angle)+sqrt(L)*(c*u-a*w+w*x-u*z)*sin(angle))/L; | ||
+ | result[2] = ((c*(u*u+v*v)-w*(a*u+b*v-u*x-v*y-w*z))*(1-cos(angle))+L*z*cos(angle)+sqrt(L)*(-b*u+a*v-v*x+u*y)*sin(angle))/ | ||
+ | |||
+ | | ||
+ | } | ||
+ | |||
+ | var fold = function(event){ | ||
+ | | ||
+ | | ||
+ | | ||
+ | |||
+ | | ||
+ | | ||
} | } | ||
+ | update(obj); | ||
+ | obj.userData.oldscale += scale; | ||
+ | lookAtBarycenter(obj); | ||
+ | } | ||
- | | + | function lookAtBarycenter(obj){ |
- | // | + | control.target = barycenter(obj); |
- | var myWindow | + | } |
- | | + | |
- | | + | function barycenter(obj) { |
- | | + | var center = new THREE.Vector3(0, |
- | | + | var points = obj.userData.points; |
+ | for (var i=0; i< | ||
+ | center.add(points[i].vector); | ||
+ | } | ||
+ | | ||
+ | | ||
+ | } | ||
+ | |||
+ | function rotateVertices(obj, | ||
+ | var axes = obj.userData.axes; | ||
+ | var subtrees = obj.userData.subtrees; | ||
+ | var points = obj.userData.points; | ||
+ | var angles = obj.userData.angles; | ||
+ | if (edge < axes.length){ | ||
+ | for (var j=0; j< | ||
+ | var rotP = rotate(points[subtrees[edge][j]].vector, | ||
+ | | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function update(obj) { | ||
+ | | ||
+ | | ||
+ | } | ||
+ | |||
+ | if (foldables.length) { | ||
+ | var settings = document.getElementById(' | ||
+ | var foldDiv = document.createElement(' | ||
+ | | ||
+ | var title = document.createElement(' | ||
+ | title.innerHTML = ' | ||
+ | foldDiv.appendChild(title); | ||
+ | foldDiv.className | ||
+ | | ||
+ | | ||
+ | | ||
+ | range.min = 0; | ||
+ | range.max = 1; | ||
+ | range.value = 0; | ||
+ | range.step = 0.001; | ||
+ | range.name = String(i); | ||
+ | range.oninput = fold; | ||
+ | foldDiv.appendChild(range); | ||
} | } | ||
+ | lookAtBarycenter(foldables[0]); | ||
+ | settings.insertBefore(foldDiv, | ||
} | } | ||
+ | |||
| | ||
// ---------------------- EXPLOSION ------------------------------------------------ | // ---------------------- EXPLOSION ------------------------------------------------ | ||
// --------------------------------------------------------------------------------- | // --------------------------------------------------------------------------------- | ||
+ | |||
+ | if (explodableModel) { | ||
+ | for (var i=0; i< | ||
+ | obj = scene.children[i]; | ||
+ | if ( obj.userData.explodable ) { | ||
+ | computeCentroid(obj); | ||
+ | } | ||
+ | } | ||
+ | document.getElementById(' | ||
+ | document.getElementById(' | ||
+ | document.getElementById(' | ||
+ | } | ||
+ | |||
+ | function computeCentroid(obj) { | ||
+ | centroid = new THREE.Vector3(); | ||
+ | obj.userData.points.forEach(function(pmpoint) { | ||
+ | centroid.add(pmpoint.vector); | ||
+ | }); | ||
+ | centroid.divideScalar(obj.userData.points.length); | ||
+ | obj.userData.centroid = centroid; | ||
+ | } | ||
function explode(factor) { | function explode(factor) { | ||
Line 2167: | Line 2174: | ||
} | } | ||
- | function showOrHideObject(event){ | + | // ---------------------- DISPLAY -------------------------------------------------- |
- | var nr = Number(event.currentTarget.name); | + | // --------------------------------------------------------------------------------- |
- | scene.children[nr].visible = event.currentTarget.checked; | + | |
- | } | + | |
- | | + | |
- | // append checkboxes for displaying or hiding objects | + | const objectTypeInnerHTMLs |
- | var shownObjectsList | + | const objectTypeVisible |
- | for (var i=0; i< | + | Object.assign(objectTypeVisible, |
- | obj = scene.children[i]; | + | const sortedObjectTypeKeys |
- | var objNode = document.createElement(' | + | const shownObjectTypesList |
- | | + | |
- | var checkbox = document.createElement(' | + | |
- | checkbox.type = ' | + | |
- | checkbox.checked = true; | + | |
- | checkbox.name = String(i); | + | |
- | | + | |
- | shownObjectsList.appendChild(checkbox); | + | |
- | shownObjectsList.appendChild(objNode); | + | |
- | } | + | |
function setVisibility(bool, | function setVisibility(bool, | ||
Line 2197: | Line 2192: | ||
} | } | ||
- | function | + | function |
- | | + | |
- | | + | |
+ | objectTypeVisible[name] = checked; | ||
+ | setVisibility(checked,name); | ||
} | } | ||
- | function toggleFaces(event) { | + | for (var i=0; i< |
- | | + | |
+ | if (modelContains[key]) { | ||
+ | var objTypeNode = document.createElement(' | ||
+ | objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '< | ||
+ | var checkbox = document.createElement(' | ||
+ | checkbox.type = ' | ||
+ | checkbox.checked | ||
+ | checkbox.name = key; | ||
+ | checkbox.onchange = toggleObjectTypeVisibility; | ||
+ | shownObjectTypesList.appendChild(checkbox); | ||
+ | shownObjectTypesList.appendChild(objTypeNode); | ||
+ | } | ||
} | } | ||
- | function toggleEdges(event) { | + | // ------------------------------------------------------ |
- | setVisibility(event.currentTarget.checked," | + | |
- | } | + | |
- | function | + | function |
- | | + | |
+ | scene.children[nr].visible = event.currentTarget.checked; | ||
} | } | ||
- | function toggleArrowheads(event) { | + | // append checkboxes for displaying or hiding objects |
- | | + | var shownObjectsList = document.getElementById(' |
+ | for (var i=0; i< | ||
+ | | ||
+ | var objNode = document.createElement(' | ||
+ | objNode.innerHTML = obj.name + '< | ||
+ | var checkbox = document.createElement(' | ||
+ | checkbox.type = ' | ||
+ | checkbox.checked | ||
+ | checkbox.name = String(i); | ||
+ | checkbox.onchange = toggleObjectVisibility; | ||
+ | shownObjectsList.appendChild(checkbox); | ||
+ | shownObjectsList.appendChild(objNode); | ||
} | } | ||
- | document.getElementById(' | + | // ---------------------- SVG ------------------------------------------------------ |
- | document.getElementById(' | + | // --------------------------------------------------------------------------------- |
- | document.getElementById(' | + | |
- | document.getElementById(' | + | |
- | document.getElementById(' | + | |
+ | function takeSvgScreenshot() { | ||
+ | if (objectTypeVisible[" | ||
+ | setVisibility(false," | ||
+ | } | ||
+ | if (objectTypeVisible[" | ||
+ | setVisibility(false," | ||
+ | } | ||
+ | svgRenderer.render(scene, | ||
+ | svgElement = XMLS.serializeToString(svgRenderer.domElement); | ||
+ | | ||
+ | if (objectTypeVisible[" | ||
+ | setVisibility(true," | ||
+ | } | ||
+ | if (objectTypeVisible[" | ||
+ | setVisibility(true," | ||
+ | } | ||
+ | if (document.getElementById(' | ||
+ | //show in new tab | ||
+ | var myWindow = window.open("","" | ||
+ | myWindow.document.body.innerHTML = svgElement; | ||
+ | } else{ | ||
+ | // download svg file | ||
+ | download(" | ||
+ | } | ||
+ | } | ||
function download(filename, | function download(filename, | ||
Line 2239: | Line 2279: | ||
} | } | ||
- | var tempobj; | + | |
- | tempobj = document.getElementById(' | + | |
- | if (tempobj) { | + | |
- | | + | |
- | | + | |
- | | + | |
- | } | + | |
- | tempobj = document.getElementById(' | + | |
- | if (tempobj) { | + | |
- | | + | |
- | } | + | |
document.getElementById(' | document.getElementById(' | ||
document.getElementById(' | document.getElementById(' | ||
Line 2260: | Line 2290: | ||
document.getElementById(' | document.getElementById(' | ||
- | |||
// ------------------ SHORTCUTS -------------------------------------------- | // ------------------ SHORTCUTS -------------------------------------------- | ||
Line 2493: | Line 2522: | ||
if (settingsShown){ | if (settingsShown){ | ||
document.getElementById(' | document.getElementById(' | ||
- | } else{ | + | } else { |
document.getElementById(' | document.getElementById(' | ||
} | } | ||
Line 2505: | Line 2534: | ||
</ | </ | ||
</ | </ | ||
- | </ | ||
</ | </ | ||
+ | |||