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/05/14 20:51] – hnagel | playground:test_3js [2020/08/20 09:49] – hnagel | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | <code perl> | ||
| + | > cube(3)-> | ||
| + | </ | ||
| + | < | ||
| + | <!-- | ||
| + | polymake for knusper | ||
| + | Thu Aug 20 12:35:04 2020 | ||
| + | unnamed | ||
| + | --> | ||
| + | |||
| < | < | ||
| - | <div class=" | ||
| < | < | ||
| + | <meta charset=utf-8> | ||
| < | < | ||
| < | < | ||
| Line 8: | Line 18: | ||
| // COMMON_CODE_BLOCK_BEGIN | // COMMON_CODE_BLOCK_BEGIN | ||
| */ | */ | ||
| - | | + | html {overflow: scroll;} |
| - | body { font-family: | + | |
| | | ||
| | | ||
| - | | ||
| | | ||
| | | ||
| - | | + | |
| | | ||
| - | | + | |
| - | | + | |
| | | ||
| - | | + | |
| - | | + | |
| - | .resetButton{margin-top: 20px;} | + | button{margin-left: 0; margin-top: 10px} |
| - | | + | |
| | | ||
| - | | + | |
| - | .transparency{display: none;} | + | # |
| - | .labelsCheckbox{margin-top: 10px;} | + | .threejs_container |
| - | + | .settings{max-height: | |
| | | ||
| | | ||
| Line 36: | Line 42: | ||
| | | ||
| | | ||
| - | | + | |
| + | | ||
| | | ||
| } | } | ||
| Line 123: | Line 130: | ||
| </ | </ | ||
| </ | </ | ||
| - | |||
| < | < | ||
| + | < | ||
| <div id=' | <div id=' | ||
| <div class=group id=' | <div class=group id=' | ||
| Line 138: | Line 144: | ||
| < | < | ||
| < | < | ||
| - | < | + | < |
| </ | </ | ||
| Line 149: | Line 155: | ||
| <div class=group id=' | <div class=group id=' | ||
| < | < | ||
| + | <div class=indented> | ||
| + | < | ||
| + | </ | ||
| + | <div class=suboption> | ||
| <div class=indented> | <div class=indented> | ||
| < | < | ||
| - | < | ||
| </ | </ | ||
| </ | </ | ||
| Line 168: | Line 177: | ||
| </ | </ | ||
| - | <img id=' | + | <img id=' |
| - | <img id=' | + | <img id=' |
| - | <div id="model39814440028"></ | + | <div id="model76216027194"></ |
| - | + | </ | |
| - | < | + | |
| - | requirejs.config({ | + | requirejs.config({ |
| - | paths: { | + | paths: { |
| - | three: '/ | + | three: '/ |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | WEBGL: '/ |
| - | | + | }, |
| - | | + | shim: { |
| - | shim: { | + | ' |
| - | ' | + | ' |
| - | | + | 'WEBGL': { deps: [ ' |
| - | | + | ' |
| - | | + | ' |
| - | ' | + | } |
| - | { | + | }); |
| - | deps: [ ' | + | |
| - | exports: ' | + | |
| - | }, | + | window.THREE = THREE; |
| - | | + | require([' |
| - | | + | THREE.TrackballControls |
| - | | + | THREE.Projector |
| - | | + | THREE.SVGRenderer |
| - | | + | THREE.WEBGL = WEBGL; |
| - | 'CanvasRenderer': | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | ' | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | ' | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | } | + | |
| - | }); | + | |
| - | require([' | + | |
| - | window.THREE = THREE; | + | |
| - | require([' | + | |
| - | THREE.SVGRenderer | + | |
| - | THREE.CanvasRenderer | + | |
| - | THREE.Projector | + | |
| - | THREE.TrackballControls | + | |
| // COMMON_CODE_BLOCK_BEGIN | // COMMON_CODE_BLOCK_BEGIN | ||
| - | var foldable = false; | ||
| - | var container = document.getElementById( ' | ||
| - | var renderer = Detector.webgl? | ||
| - | var svgRenderer = new THREE.SVGRenderer({antialias: | ||
| - | var box = document.getElementsByClassName( ' | ||
| - | var width = box.clientWidth; | + | const intervalLength |
| - | var height | + | const explodableModel |
| - | //var height | + | const modelContains |
| - | | + | const foldables = []; |
| - | | + | |
| - | | + | |
| - | svgRenderer.setClearColor(0xFFFFFF, | + | |
| - | | + | var three = document.getElementById(" |
| + | var scene = new THREE.Scene(); | ||
| - | var scene = new THREE.Scene(); | + | var camera |
| - | var camera | + | camera.position.set(0, 0, 5); |
| + | camera.lookAt(0, 0, 0); | ||
| + | camera.up.set(0, | ||
| - | var renderid; | + | var renderer = new THREE.WebGLRenderer( { antialias: true } ); |
| + | var svgRenderer = new THREE.SVGRenderer({antialias: | ||
| + | renderer.setPixelRatio( window.devicePixelRatio ); | ||
| + | renderer.setClearColor(0xFFFFFF, | ||
| + | svgRenderer.setClearColor(0xFFFFFF, | ||
| + | three.appendChild(renderer.domElement); | ||
| - | | + | var control = new THREE.TrackballControls(camera, three); |
| - | camera.lookAt(0, 0, 0); | + | control.zoomSpeed = 0.2; |
| - | camera.up.set(0, 1, 0); | + | control.rotateSpeed = 4; |
| - | // class to allow move points together with labels and spheres | + | function onWindowResize() { |
| - | | + | var width = three.clientWidth; |
| - | this.vector = new THREE.Vector3(x, | + | var height = three.clientHeight; |
| - | this.sprite = null; | + | renderer.setSize( width, height ); |
| - | this.sphere = null; | + | svgRenderer.setSize( width, height ); |
| - | | + | camera.aspect = width / height; |
| - | | + | camera.updateProjectionMatrix(); |
| - | this.sprite = textSprite( label ); | + | } |
| + | |||
| + | onWindowResize(); | ||
| + | window.addEventListener(' | ||
| + | |||
| + | // class to allow move points together with labels and spheres | ||
| + | var PMPoint = function (x,y,z) { | ||
| + | | ||
| + | | ||
| + | | ||
| + | } | ||
| + | PMPoint.prototype.addLabel | ||
| + | | ||
| + | | ||
| + | } | ||
| + | PMPoint.prototype.addSphere = function(spheremesh) { | ||
| + | | ||
| + | | ||
| + | } | ||
| + | PMPoint.prototype.set = function(x, | ||
| + | | ||
| + | if (this.sprite) { | ||
| this.sprite.position.copy(this.vector); | this.sprite.position.copy(this.vector); | ||
| } | } | ||
| - | PMPoint.prototype.makesphere = function(radius, | + | if (this.sphere) |
| - | | + | |
| this.sphere.position.copy(this.vector); | this.sphere.position.copy(this.vector); | ||
| } | } | ||
| + | } | ||
| + | PMPoint.prototype.radius = function() { | ||
| + | if (this.sphere) { | ||
| + | return this.sphere.geometry.parameters.radius; | ||
| + | } else { | ||
| + | return 0; | ||
| + | } | ||
| + | }; | ||
| + | // select the target node | ||
| + | var target = document.querySelector('# | ||
| - | | + | // create an observer instance |
| - | this.vector.setX(x); | + | var observer |
| - | if (this.sprite) { | + | mutations.forEach(function(mutation) { |
| - | this.sprite.position.setX(x); | + | if (mutation.removedNodes && mutation.removedNodes.length > 0) { |
| + | cancelAnimationFrame(renderId); | ||
| + | | ||
| + | | ||
| } | } | ||
| - | | + | }); |
| - | this.sphere.position.setX(x); | + | }); |
| + | |||
| + | // configuration of the observer: | ||
| + | var config = { childList: true, characterData: | ||
| + | |||
| + | // pass in the target node, as well as the observer options | ||
| + | while (target) { | ||
| + | if (target.className==" | ||
| + | observer.observe(target, | ||
| + | break; | ||
| + | } | ||
| + | | ||
| + | } | ||
| + | |||
| + | // COMMON_CODE_BLOCK_END | ||
| + | |||
| + | var obj0 = new THREE.Object3D(); | ||
| + | obj0.name = " | ||
| + | obj0.userData.explodable = 1; | ||
| + | obj0.userData.points = []; | ||
| + | obj0.userData.points.push(new PMPoint(-1, -1, -1)); | ||
| + | obj0.userData.points.push(new PMPoint(1, -1, -1)); | ||
| + | obj0.userData.points.push(new PMPoint(-1, 1, -1)); | ||
| + | obj0.userData.points.push(new PMPoint(1, 1, -1)); | ||
| + | obj0.userData.points.push(new PMPoint(-1, -1, 1)); | ||
| + | obj0.userData.points.push(new PMPoint(1, -1, 1)); | ||
| + | obj0.userData.points.push(new PMPoint(-1, 1, 1)); | ||
| + | obj0.userData.points.push(new PMPoint(1, 1, 1)); | ||
| + | |||
| + | obj0.userData.pointradii = 0.02; | ||
| + | < | ||
| + | obj0.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, | ||
| + | obj0.userData.pointlabels = [" | ||
| + | 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, 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.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, | ||
| + | init_object(obj0); | ||
| + | scene.add(obj0); | ||
| + | // COMMON_CODE_BLOCK_BEGIN | ||
| + | function textSpriteMaterial(message, | ||
| + | if ( parameters === undefined ) parameters = {}; | ||
| + | var fontface = " | ||
| + | var fontsize = parameters.hasOwnProperty(" | ||
| + | fontsize = fontsize*10; | ||
| + | var lines = message.split(' | ||
| + | var size = 512; | ||
| + | for(var i = 0; i< | ||
| + | var tmp = lines[i].length; | ||
| + | while(tmp*fontsize > size){ | ||
| + | | ||
| + | } | ||
| + | } | ||
| + | |||
| + | var canvas = document.createElement(' | ||
| + | canvas.width = size; | ||
| + | canvas.height = size; | ||
| + | var context = canvas.getContext(' | ||
| + | context.fillStyle = " | ||
| + | context.fill(); | ||
| + | context.font = fontsize + "px " + fontface; | ||
| + | |||
| + | // text color | ||
| + | context.fillStyle = " | ||
| + | | ||
| + | context.fillText(lines[i], | ||
| + | } | ||
| + | |||
| + | // canvas contents will be used for a texture | ||
| + | var texture = new THREE.Texture(canvas); | ||
| + | texture.needsUpdate = true; | ||
| + | |||
| + | var spriteMaterial = new THREE.SpriteMaterial({map: | ||
| + | return spriteMaterial; | ||
| + | } | ||
| + | |||
| + | |||
| + | // ---------------------- INITIALIZING OBJECTS-------------------------------------- | ||
| + | // --------------------------------------------------------------------------------- | ||
| + | |||
| + | function init_object(obj) { | ||
| + | if (obj.userData.hasOwnProperty(" | ||
| + | init_points(obj); | ||
| + | modelContains.points = true; | ||
| + | } | ||
| + | if (obj.userData.hasOwnProperty(" | ||
| + | init_pointlabels(obj); | ||
| + | modelContains.pointlabels = true; | ||
| + | } | ||
| + | if (obj.userData.hasOwnProperty(" | ||
| + | init_lines(obj); | ||
| + | modelContains.lines = true; | ||
| + | } | ||
| + | if (obj.userData.hasOwnProperty(" | ||
| + | init_edgelabels(obj); | ||
| + | modelContains.edgelabels = true; | ||
| + | } | ||
| + | if (obj.userData.hasOwnProperty(" | ||
| + | init_arrowheads(obj); | ||
| + | modelContains.arrowheads = true; | ||
| + | } | ||
| + | if (obj.userData.hasOwnProperty(" | ||
| + | init_faces(obj); | ||
| + | modelContains.faces = true; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | function init_points(obj) { | ||
| + | var pointgroup = new THREE.Group(); | ||
| + | | ||
| + | var points = obj.userData.points; | ||
| + | var radii = obj.userData.pointradii; | ||
| + | var materials = obj.userData.pointmaterial; | ||
| + | var geometry, | ||
| + | if (!Array.isArray(radii)) { | ||
| + | geometry = new THREE.SphereBufferGeometry(radii); | ||
| + | } | ||
| + | if (!Array.isArray(materials)) { | ||
| + | material = materials; | ||
| + | } | ||
| + | for (var i=0; i< | ||
| + | var point = points[i]; | ||
| + | if (Array.isArray(radii)) { | ||
| + | if (radii[i] == 0) { | ||
| + | continue; | ||
| + | } | ||
| + | | ||
| + | } | ||
| + | if (Array.isArray(materials)) { | ||
| + | | ||
| + | } | ||
| + | var sphere | ||
| + | point.addSphere(sphere); | ||
| + | pointgroup.add(sphere); | ||
| + | } | ||
| + | | ||
| + | } | ||
| + | |||
| + | function init_pointlabels(obj) { | ||
| + | var points = obj.userData.points; | ||
| + | var labels = obj.userData.pointlabels; | ||
| + | var pointlabels = new THREE.Group(); | ||
| + | | ||
| + | if (Array.isArray(labels)) { | ||
| + | for (var i=0; i< | ||
| + | var point = points[i]; | ||
| + | var spriteMaterial = textSpriteMaterial( labels[i] ); | ||
| + | var sprite = new THREE.Sprite(spriteMaterial); | ||
| + | | ||
| + | | ||
| } | } | ||
| - | }; | + | |
| - | PMPoint.prototype.setY | + | var spriteMaterial |
| - | | + | |
| - | if (this.sprite) | + | var point = points[i]; |
| - | this.sprite.position.setY(y); | + | var sprite = new THREE.Sprite(spriteMaterial); |
| + | point.addLabel(sprite); | ||
| + | pointlabels.add(sprite); | ||
| } | } | ||
| - | if (this.sphere) { | + | } |
| - | this.sphere.position.setY(y); | + | obj.add(pointlabels); |
| + | } | ||
| + | |||
| + | function init_lines(obj) { | ||
| + | var edgeindices = obj.userData.edgeindices; | ||
| + | var points = obj.userData.points; | ||
| + | var materials = obj.userData.edgematerial; | ||
| + | var geometry = new THREE.BufferGeometry(); | ||
| + | var bufarr = new Float32Array( obj.userData.edgeindices.length * 3 ); | ||
| + | var bufattr = new THREE.Float32BufferAttribute( bufarr, 3 ); | ||
| + | var geometry = new THREE.BufferGeometry(); | ||
| + | | ||
| + | if (Array.isArray(materials)) { | ||
| + | for (var i=0; i< | ||
| + | | ||
| } | } | ||
| - | }; | + | } |
| - | PMPoint.prototype.setZ = function(z) { | + | var lines = new THREE.LineSegments(geometry, |
| - | this.vector.setZ(z); | + | lines.name = " |
| - | if (this.sprite) { | + | |
| - | this.sprite.position.setZ(z); | + | |
| + | } | ||
| + | |||
| + | function | ||
| + | var points = obj.userData.points; | ||
| + | var edgeindices = obj.userData.edgeindices; | ||
| + | var labels = obj.userData.edgelabels; | ||
| + | var edgelabels = new THREE.Group(); | ||
| + | edgelabels.name = " | ||
| + | if (Array.isArray(labels)) { | ||
| + | for (var i=0; i< | ||
| + | var point = points[i]; | ||
| + | var spriteMaterial = textSpriteMaterial( labels[i] ); | ||
| + | var sprite = new THREE.Sprite(spriteMaterial); | ||
| + | sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector, | ||
| + | | ||
| } | } | ||
| - | if (this.sphere) { | + | } else { |
| - | this.sphere.position.setZ(z); | + | var spriteMaterial = textSpriteMaterial( labels ); |
| + | for (var i=0; i<points.length; i++) { | ||
| + | var point = points[i]; | ||
| + | var sprite = new THREE.Sprite(spriteMaterial); | ||
| + | | ||
| + | | ||
| } | } | ||
| - | }; | + | } |
| - | PMPoint.prototype.set = function(x,y,z) { | + | obj.add(edgelabels); |
| - | this.vector.set(x,y,z); | + | } |
| - | if (this.sprite) { | + | |
| - | this.sprite.position.set(x,y,z); | + | function init_arrowheads(obj) { |
| + | var arrowheads = new THREE.Group(); | ||
| + | arrowheads.name | ||
| + | var arrowstyle = obj.userData.arrowstyle; | ||
| + | var edgeindices = obj.userData.edgeindices; | ||
| + | var edgematerials = obj.userData.edgematerial; | ||
| + | var points = obj.userData.points; | ||
| + | var material; | ||
| + | if (!Array.isArray(edgematerials)) { | ||
| + | | ||
| + | } | ||
| + | |||
| + | for (var i=0; i< | ||
| + | var start = points[edgeindices[i]]; | ||
| + | var end = points[edgeindices[i+1]]; | ||
| + | var dist = start.vector.distanceTo( end.vector ) - start.radius() - end.radius(); | ||
| + | if (dist <= 0) { | ||
| + | continue; | ||
| + | } | ||
| + | var dir = new THREE.Vector3().subVectors(end.vector, | ||
| + | dir.normalize(); | ||
| + | var axis = new THREE.Vector3().set(dir.z,0, | ||
| + | axis.normalize(); | ||
| + | var radians = Math.acos( dir.y ); | ||
| + | var radius = dist/25; | ||
| + | var height = dist/5; | ||
| + | var geometry = new THREE.ConeBufferGeometry(radius,height); | ||
| + | var position = new THREE.Vector3().addVectors(start.vector, | ||
| + | | ||
| + | | ||
| + | } | ||
| + | var cone = new THREE.Mesh( geometry, material ); | ||
| + | cone.quaternion.setFromAxisAngle(axis, | ||
| + | cone.position.copy(position);; | ||
| + | arrowheads.add(cone); | ||
| + | } | ||
| + | obj.add(arrowheads); | ||
| + | } | ||
| + | |||
| + | function init_faces(obj) { | ||
| + | var points = obj.userData.points; | ||
| + | var facets = obj.userData.facets; | ||
| + | | ||
| + | for (var i=0; i< | ||
| + | facet = facets[i]; | ||
| + | for (var t=0; t< | ||
| + | | ||
| } | } | ||
| - | if (this.sphere) { | + | } |
| - | this.sphere.position.set(x,y,z); | + | var bufarr = new Float32Array( obj.userData.triangleindices.length * 3 ); |
| - | } | + | var bufattr = new THREE.Float32BufferAttribute(bufarr,3); |
| - | }; | + | |
| - | PMPoint.prototype.add = function(o) { | + | var materials = obj.userData.facetmaterial; |
| - | if (this.sprite) { | + | var geometry = new THREE.BufferGeometry(); |
| - | o.add(this.sprite); | + | |
| - | | + | |
| - | | + | var tricount = 0; |
| - | o.add(this.sphere); | + | |
| + | | ||
| + | facet = facets[i]; | ||
| + | | ||
| + | | ||
| } | } | ||
| - | }; | + | } |
| + | var mesh = new THREE.Mesh(geometry, | ||
| + | | ||
| + | | ||
| + | | ||
| + | } | ||
| + | // // | ||
| - | var controls | + | function updateFacesPosition(obj) { |
| - | controls.zoomSpeed | + | var points |
| - | controls.rotateSpeed | + | var indices = obj.userData.triangleindices; |
| + | var faces = obj.getObjectByName(" | ||
| + | var ba = faces.geometry.getAttribute(" | ||
| + | for (var i=0; i< | ||
| + | ba.setXYZ(i, points[indices[i]].vector.x, | ||
| + | } | ||
| + | | ||
| + | |||
| + | } | ||
| - | var all_objects | + | function updateEdgesPosition(obj) { |
| - | | + | var points |
| - | // select the target node | + | |
| - | | + | var lines = obj.getObjectByName(" |
| + | | ||
| + | for (var i=0; i< | ||
| + | ba.setXYZ(i, | ||
| + | } | ||
| + | | ||
| + | } | ||
| - | // create an observer instance | ||
| - | var observer = new MutationObserver(function(mutations) { | ||
| - | mutations.forEach(function(mutation) { | ||
| - | if (mutation.removedNodes && mutation.removedNodes.length > 0) { | ||
| - | cancelAnimationFrame(renderId); | ||
| - | observer.disconnect(); | ||
| - | console.log(" | ||
| - | } | ||
| - | }); | ||
| - | }); | ||
| - | // configuration of the observer: | ||
| - | var config = { childList: true, characterData: | ||
| - | // pass in the target node, as well as the observer options | + | var xRotationEnabled = false; |
| - | while (target) { | + | var yRotationEnabled = false; |
| - | if (target.className=="output") { | + | var zRotationEnabled = false; |
| - | observer.observe(target, | + | var rotationSpeedFactor = 1; |
| - | break; | + | var settingsShown = false; |
| + | var labelsShown = true; | ||
| + | var intervals = []; | ||
| + | var timeouts = []; | ||
| + | var explodingSpeed = 0.05; | ||
| + | var explodeScale = 0; | ||
| + | var XMLS = new XMLSerializer(); | ||
| + | var svgElement; | ||
| + | var renderId; | ||
| + | |||
| + | var render = function () { | ||
| + | |||
| + | renderId = requestAnimationFrame(render); | ||
| + | |||
| + | // comment | ||
| + | // explode(updateFactor()); | ||
| + | |||
| + | var phi = 0.02 * rotationSpeedFactor; | ||
| + | |||
| + | if (xRotationEnabled) { | ||
| + | | ||
| + | } | ||
| + | | ||
| + | scene.rotation.y += phi; | ||
| + | } | ||
| + | if (zRotationEnabled) { | ||
| + | scene.rotation.z += phi; | ||
| + | } | ||
| + | |||
| + | control.update(); | ||
| + | renderer.render(scene, | ||
| + | }; | ||
| + | |||
| + | if ( THREE.WEBGL.isWebGLAvailable() ) { | ||
| + | render(); | ||
| + | } else { | ||
| + | var warning = WEBGL.getWebGLErrorMessage(); | ||
| + | three.appendChild( warning ); | ||
| + | } | ||
| + | |||
| + | function changeTransparency() { | ||
| + | var opacity = 1-Number(event.currentTarget.value); | ||
| + | for (var i=0; i< | ||
| + | child = scene.children[i]; | ||
| + | if ( child.userData.hasOwnProperty("facetmaterial") ) { | ||
| + | if (Array.isArray(child.userData.facetmaterial)) { | ||
| + | for (var j=0; j< | ||
| + | child.userData.facetmaterial[j].opacity = opacity; | ||
| + | } | ||
| + | } else { | ||
| + | child.userData.facetmaterial.opacity = opacity; | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | |||
| + | function changeRotationX(event){ | ||
| + | xRotationEnabled = event.currentTarget.checked; | ||
| + | } | ||
| + | |||
| + | function changeRotationY(event){ | ||
| + | yRotationEnabled = event.currentTarget.checked; | ||
| + | } | ||
| + | |||
| + | function changeRotationZ(event){ | ||
| + | zRotationEnabled = event.currentTarget.checked; | ||
| + | } | ||
| + | |||
| + | |||
| + | function changeRotationSpeedFactor(event){ | ||
| + | rotationSpeedFactor = Number(event.currentTarget.value); | ||
| + | } | ||
| + | |||
| + | function resetScene(){ | ||
| + | scene.rotation.set(0, | ||
| + | camera.position.set(0, | ||
| + | camera.up.set(0, | ||
| + | } | ||
| + | |||
| + | function showSettings(event){ | ||
| + | document.getElementById(' | ||
| + | document.getElementById(' | ||
| + | document.getElementById(' | ||
| + | settingsShown = true; | ||
| + | } | ||
| + | |||
| + | function hideSettings(event){ | ||
| + | document.getElementById(' | ||
| + | document.getElementById(' | ||
| + | document.getElementById(' | ||
| + | settingsShown = false; | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
| + | var pos = 150* Math.PI; | ||
| + | |||
| + | function updateFactor() { | ||
| + | pos++; | ||
| + | return Math.sin(.01*pos)+1; | ||
| + | } | ||
| + | |||
| + | // ------------------------ 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 | ||
| + | } | ||
| + | |||
| + | function barycenter(obj) { | ||
| + | var center = new THREE.Vector3(0,0,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, | ||
| + | | ||
| } | } | ||
| - | target = target.parentNode; | ||
| } | } | ||
| + | } | ||
| + | |||
| + | 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, | ||
| + | } | ||
| + | |||
| + | | ||
| + | // ---------------------- 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) { | ||
| + | for (var i=0; i< | ||
| + | var obj = scene.children[i]; | ||
| + | if (obj.userData.hasOwnProperty(" | ||
| + | var c = obj.userData.centroid; | ||
| + | obj.position.set(c.x*factor, | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | |||
| + | function triggerExplode(event){ | ||
| + | explodeScale = Number(event.currentTarget.value); | ||
| + | explode(explodeScale); | ||
| + | } | ||
| + | |||
| + | function setExplodingSpeed(event){ | ||
| + | explodingSpeed = Number(event.currentTarget.value); | ||
| + | } | ||
| + | |||
| + | function triggerAutomaticExplode(event){ | ||
| + | if (event.currentTarget.checked){ | ||
| + | startExploding(); | ||
| + | } else { | ||
| + | clearIntervals(); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | function startExploding(){ | ||
| + | intervals.push(setInterval(explodingInterval, | ||
| + | } | ||
| + | |||
| + | |||
| + | function explodingInterval(){ | ||
| + | explodeScale += explodingSpeed; | ||
| + | if (explodeScale <= 6){ | ||
| + | explode(explodeScale); | ||
| + | } | ||
| + | else{ | ||
| + | explode(6); | ||
| + | explodeScale = 6; | ||
| + | clearIntervals(); | ||
| + | timeouts.push(setTimeout(startUnexploding, | ||
| + | } | ||
| + | document.getElementById(' | ||
| + | } | ||
| + | |||
| + | |||
| + | function startUnexploding(){ | ||
| + | intervals.push(setInterval(unexplodingInterval, | ||
| + | } | ||
| + | |||
| + | function unexplodingInterval(){ | ||
| + | explodeScale -= explodingSpeed; | ||
| + | if (explodeScale >= 0){ | ||
| + | explode(explodeScale); | ||
| + | } | ||
| + | else { | ||
| + | explode(0); | ||
| + | explodeScale = 0; | ||
| + | clearIntervals(); | ||
| + | timeouts.push(setTimeout(startExploding, | ||
| + | } | ||
| + | document.getElementById(' | ||
| + | } | ||
| + | |||
| + | function clearIntervals(){ | ||
| + | intervals.forEach(function(interval){ | ||
| + | clearInterval(interval); | ||
| + | }); | ||
| + | intervals = []; | ||
| + | timeouts.forEach(function(timeout){ | ||
| + | clearTimeout(timeout); | ||
| + | }); | ||
| + | timeouts = []; | ||
| + | } | ||
| + | |||
| + | // ---------------------- DISPLAY -------------------------------------------------- | ||
| + | // --------------------------------------------------------------------------------- | ||
| + | |||
| + | const objectTypeInnerHTMLs = { points: " | ||
| + | const objectTypeVisible = {}; | ||
| + | Object.assign(objectTypeVisible, | ||
| + | const sortedObjectTypeKeys = Object.keys(objectTypeInnerHTMLs).sort(); | ||
| + | const shownObjectTypesList = document.getElementById(' | ||
| + | |||
| + | function setVisibility(bool, | ||
| + | for (var i=0; i< | ||
| + | var obj = scene.children[i].getObjectByName(objname); | ||
| + | if (obj) { | ||
| + | obj.visible = bool; | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | |||
| + | function toggleObjectTypeVisibility(event){ | ||
| + | var name = event.currentTarget.name; | ||
| + | var checked = event.currentTarget.checked; | ||
| + | objectTypeVisible[name] = checked; | ||
| + | setVisibility(checked, | ||
| + | } | ||
| + | |||
| + | for (var i=0; i< | ||
| + | var key = sortedObjectTypeKeys[i]; | ||
| + | if (modelContains[key]) { | ||
| + | var objTypeNode = document.createElement(' | ||
| + | objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '< | ||
| + | var checkbox = document.createElement(' | ||
| + | checkbox.type = ' | ||
| + | checkbox.checked = true; | ||
| + | checkbox.name = key; | ||
| + | checkbox.onchange = toggleObjectTypeVisibility; | ||
| + | shownObjectTypesList.appendChild(checkbox); | ||
| + | shownObjectTypesList.appendChild(objTypeNode); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | // ------------------------------------------------------ | ||
| + | |||
| + | function toggleObjectVisibility(event){ | ||
| + | var nr = Number(event.currentTarget.name); | ||
| + | scene.children[nr].visible = event.currentTarget.checked; | ||
| + | } | ||
| + | |||
| + | // append checkboxes for displaying or hiding objects | ||
| + | var shownObjectsList = document.getElementById(' | ||
| + | for (var i=0; i< | ||
| + | obj = scene.children[i]; | ||
| + | var objNode = document.createElement(' | ||
| + | objNode.innerHTML = obj.name + '< | ||
| + | var checkbox = document.createElement(' | ||
| + | checkbox.type = ' | ||
| + | checkbox.checked = true; | ||
| + | checkbox.name = String(i); | ||
| + | checkbox.onchange = toggleObjectVisibility; | ||
| + | shownObjectsList.appendChild(checkbox); | ||
| + | shownObjectsList.appendChild(objNode); | ||
| + | } | ||
| + | |||
| + | // ---------------------- SVG ------------------------------------------------------ | ||
| + | // --------------------------------------------------------------------------------- | ||
| + | |||
| + | 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, | ||
| + | var element = document.createElement(' | ||
| + | element.setAttribute(' | ||
| + | element.setAttribute(' | ||
| + | |||
| + | element.style.display = ' | ||
| + | document.body.appendChild(element); | ||
| + | |||
| + | element.click(); | ||
| + | |||
| + | document.body.removeChild(element); | ||
| + | } | ||
| + | |||
| + | |||
| + | document.getElementById(' | ||
| + | document.getElementById(' | ||
| + | document.getElementById(' | ||
| + | document.getElementById(' | ||
| + | document.getElementById(' | ||
| + | document.getElementById(' | ||
| + | document.getElementById(' | ||
| + | document.getElementById(' | ||
| + | document.getElementById(' | ||
| + | |||
| + | |||
| + | // ------------------ SHORTCUTS -------------------------------------------- | ||
| + | // ------------------------------------------------------------------------- | ||
| + | |||
| + | /** | ||
| + | * http:// | ||
| + | * Version : 2.01.B | ||
| + | * By Binny V A | ||
| + | * License : BSD | ||
| + | */ | ||
| + | shortcut = { | ||
| + | ' | ||
| + | ' | ||
| + | //Provide a set of default options | ||
| + | var default_options = { | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | } | ||
| + | if(!opt) opt = default_options; | ||
| + | else { | ||
| + | for(var dfo in default_options) { | ||
| + | if(typeof opt[dfo] == ' | ||
| + | } | ||
| + | } | ||
| + | |||
| + | var ele = opt.target; | ||
| + | if(typeof opt.target == ' | ||
| + | var ths = this; | ||
| + | shortcut_combination = shortcut_combination.toLowerCase(); | ||
| + | |||
| + | //The function to be called at keypress | ||
| + | var func = function(e) { | ||
| + | e = e || window.event; | ||
| + | |||
| + | if(opt[' | ||
| + | var element; | ||
| + | if(e.target) element=e.target; | ||
| + | else if(e.srcElement) element=e.srcElement; | ||
| + | if(element.nodeType==3) element=element.parentNode; | ||
| + | |||
| + | if(element.tagName == ' | ||
| + | } | ||
| + | |||
| + | //Find Which key is pressed | ||
| + | if (e.keyCode) code = e.keyCode; | ||
| + | else if (e.which) code = e.which; | ||
| + | var character = String.fromCharCode(code).toLowerCase(); | ||
| + | |||
| + | if(code == 188) character=","; | ||
| + | if(code == 190) character=" | ||
| + | |||
| + | var keys = shortcut_combination.split(" | ||
| + | //Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked | ||
| + | var kp = 0; | ||
| + | |||
| + | //Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken | ||
| + | var shift_nums = { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | ";":":", | ||
| + | "'":" | ||
| + | ",":"<", | ||
| + | " | ||
| + | "/":"?", | ||
| + | " | ||
| + | } | ||
| + | // | ||
| + | var special_keys = { | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | |||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | |||
| + | ' | ||
| + | ' | ||
| + | |||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | |||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | |||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | |||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | |||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | } | ||
| + | |||
| + | var modifiers = { | ||
| + | shift: { wanted: | ||
| + | ctrl : { wanted: | ||
| + | alt | ||
| + | meta : { wanted: | ||
| + | }; | ||
| + | | ||
| + | if(e.ctrlKey) modifiers.ctrl.pressed = true; | ||
| + | if(e.shiftKey) modifiers.shift.pressed = true; | ||
| + | if(e.altKey) modifiers.alt.pressed = true; | ||
| + | if(e.metaKey) | ||
| + | | ||
| + | for(var i=0; k=keys[i], | ||
| + | // | ||
| + | if(k == ' | ||
| + | kp++; | ||
| + | modifiers.ctrl.wanted = true; | ||
| + | |||
| + | } else if(k == ' | ||
| + | kp++; | ||
| + | modifiers.shift.wanted = true; | ||
| + | |||
| + | } else if(k == ' | ||
| + | kp++; | ||
| + | modifiers.alt.wanted = true; | ||
| + | } else if(k == ' | ||
| + | kp++; | ||
| + | modifiers.meta.wanted = true; | ||
| + | } else if(k.length > 1) { //If it is a special key | ||
| + | if(special_keys[k] == code) kp++; | ||
| + | |||
| + | } else if(opt[' | ||
| + | if(opt[' | ||
| + | |||
| + | } else { //The special keys did not match | ||
| + | if(character == k) kp++; | ||
| + | else { | ||
| + | if(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase | ||
| + | character = shift_nums[character]; | ||
| + | if(character == k) kp++; | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | |||
| + | if(kp == keys.length && | ||
| + | modifiers.ctrl.pressed == modifiers.ctrl.wanted && | ||
| + | modifiers.shift.pressed == modifiers.shift.wanted && | ||
| + | modifiers.alt.pressed == modifiers.alt.wanted && | ||
| + | modifiers.meta.pressed == modifiers.meta.wanted) { | ||
| + | callback(e); | ||
| + | |||
| + | if(!opt[' | ||
| + | // | ||
| + | e.cancelBubble = true; | ||
| + | e.returnValue = false; | ||
| + | |||
| + | // | ||
| + | if (e.stopPropagation) { | ||
| + | e.stopPropagation(); | ||
| + | e.preventDefault(); | ||
| + | } | ||
| + | return false; | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | this.all_shortcuts[shortcut_combination] = { | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | }; | ||
| + | //Attach the function with the event | ||
| + | if(ele.addEventListener) ele.addEventListener(opt[' | ||
| + | else if(ele.attachEvent) ele.attachEvent(' | ||
| + | else ele[' | ||
| + | }, | ||
| + | |||
| + | //Remove the shortcut - just specify the shortcut and I will remove the binding | ||
| + | ' | ||
| + | shortcut_combination = shortcut_combination.toLowerCase(); | ||
| + | var binding = this.all_shortcuts[shortcut_combination]; | ||
| + | delete(this.all_shortcuts[shortcut_combination]) | ||
| + | if(!binding) return; | ||
| + | var type = binding[' | ||
| + | var ele = binding[' | ||
| + | var callback = binding[' | ||
| + | |||
| + | if(ele.detachEvent) ele.detachEvent(' | ||
| + | else if(ele.removeEventListener) ele.removeEventListener(type, | ||
| + | else ele[' | ||
| + | } | ||
| + | } | ||
| + | |||
| + | shortcut.add(" | ||
| + | var event = new Event(' | ||
| + | if (settingsShown){ | ||
| + | document.getElementById(' | ||
| + | } else { | ||
| + | document.getElementById(' | ||
| + | } | ||
| + | }); | ||
| + | |||
| // COMMON_CODE_BLOCK_END | // COMMON_CODE_BLOCK_END | ||
| - | var objectnames = [" | + | });}); |
| - | var obj = new THREE.Object3D(); | + | </ |
| - | var allpoints = []; | + | </ |
| - | allpoints.push(new PMPoint(0, 0, 0)); | + | </ |
| - | allpoints.push(new PMPoint(1, 0, 0)); | + | </ |
| - | allpoints.push(new PMPoint(0, 1, 0)); | + | <code perl> |
| - | allpoints.push(new PMPoint(0, 0, 1)); | + | > fan:: |
| + | </ | ||
| + | < | ||
| + | <!-- | ||
| + | polymake for knusper | ||
| + | Thu Aug 20 12:35:04 2020 | ||
| + | planar_net_ | ||
| + | --> | ||
| - | < | ||
| - | var points_material = new THREE.MeshBasicMaterial ( {color: 0xFF0000, } ); | ||
| - | | + | < |
| - | points_material.transparent = true; | + | < |
| + | <meta charset=utf-8> | ||
| + | < | ||
| + | < | ||
| + | /* | ||
| + | // COMMON_CODE_BLOCK_BEGIN | ||
| + | */ | ||
| + | html {overflow: scroll;} | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | .group{padding-bottom: | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | # | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | } | ||
| + | | ||
| + | | ||
| + | } | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | box-shadow: 0px 0px 0px #000000; | ||
| + | | ||
| + | | ||
| + | | ||
| + | } | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | } | ||
| + | | ||
| + | | ||
| + | } | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | } | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | } | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | } | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | } | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | } | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | } | ||
| + | | ||
| + | | ||
| + | } | ||
| + | | ||
| + | | ||
| + | } | ||
| + | /* | ||
| + | // COMMON_CODE_BLOCK_END | ||
| + | */ | ||
| + | </ | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | <div id=' | ||
| + | <div class=group id=' | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | |||
| + | <div class=group id=' | ||
| + | < | ||
| + | <div class=indented> | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| - | <!-- POINTS --> | + | <div class=suboption> |
| - | allpoints[0].makesphere(0.02, | + | < |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | for (index = 0; index < allpoints.length; ++index) { | + | </ |
| - | | + | |
| + | |||
| + | <div class=group id=' | ||
| + | < | ||
| + | <div class=indented> | ||
| + | < | ||
| + | </ | ||
| + | <div class=suboption> | ||
| + | <div class=indented> | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | |||
| + | <div class=group id=' | ||
| + | < | ||
| + | <div class=indented> | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | </ | ||
| + | <img id=' | ||
| + | <img id=' | ||
| + | <div id=" | ||
| + | </ | ||
| + | < | ||
| + | requirejs.config({ | ||
| + | paths: { | ||
| + | three: '/ | ||
| + | TrackballControls: | ||
| + | Projector: '/ | ||
| + | SVGRenderer: | ||
| + | WEBGL: '/ | ||
| + | }, | ||
| + | shim: { | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | ' | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | require([' | ||
| + | window.THREE = THREE; | ||
| + | require([' | ||
| + | THREE.TrackballControls = TrackballControls; | ||
| + | THREE.Projector = Projector; | ||
| + | THREE.SVGRenderer = SVGRenderer; | ||
| + | THREE.WEBGL = WEBGL; | ||
| + | |||
| + | // COMMON_CODE_BLOCK_BEGIN | ||
| + | |||
| + | const intervalLength = 25; // for automatic animations | ||
| + | const explodableModel = false; | ||
| + | const modelContains = { points: false, pointlabels: | ||
| + | const foldables = []; | ||
| + | |||
| + | var three = document.getElementById(" | ||
| + | var scene = new THREE.Scene(); | ||
| + | |||
| + | var camera = new THREE.PerspectiveCamera(75, | ||
| + | camera.position.set(0, | ||
| + | camera.lookAt(0, | ||
| + | camera.up.set(0, | ||
| + | |||
| + | var renderer = new THREE.WebGLRenderer( { antialias: true } ); | ||
| + | var svgRenderer = new THREE.SVGRenderer({antialias: | ||
| + | renderer.setPixelRatio( window.devicePixelRatio ); | ||
| + | renderer.setClearColor(0xFFFFFF, | ||
| + | svgRenderer.setClearColor(0xFFFFFF, | ||
| + | three.appendChild(renderer.domElement); | ||
| + | |||
| + | var control = new THREE.TrackballControls(camera, | ||
| + | control.zoomSpeed = 0.2; | ||
| + | control.rotateSpeed = 4; | ||
| + | |||
| + | function onWindowResize() { | ||
| + | var width = three.clientWidth; | ||
| + | var height = three.clientHeight; | ||
| + | renderer.setSize( width, height ); | ||
| + | svgRenderer.setSize( width, height ); | ||
| + | camera.aspect = width / height; | ||
| + | camera.updateProjectionMatrix(); | ||
| + | } | ||
| + | |||
| + | onWindowResize(); | ||
| + | window.addEventListener(' | ||
| + | |||
| + | // class to allow move points together with labels and spheres | ||
| + | var PMPoint = function (x,y,z) { | ||
| + | | ||
| + | | ||
| + | | ||
| + | } | ||
| + | PMPoint.prototype.addLabel = function(labelsprite) { | ||
| + | | ||
| + | | ||
| + | } | ||
| + | PMPoint.prototype.addSphere = function(spheremesh) { | ||
| + | | ||
| + | | ||
| + | } | ||
| + | PMPoint.prototype.set = function(x, | ||
| + | | ||
| + | if (this.sprite) { | ||
| + | | ||
| } | } | ||
| - | | + | if (this.sphere) { |
| + | this.sphere.position.copy(this.vector); | ||
| + | } | ||
| + | } | ||
| + | PMPoint.prototype.radius = function() { | ||
| + | if (this.sphere) { | ||
| + | return this.sphere.geometry.parameters.radius; | ||
| + | } else { | ||
| + | return 0; | ||
| + | } | ||
| + | }; | ||
| + | // select the target node | ||
| + | var target | ||
| - | < | + | // create an observer instance |
| - | faces.vertices.push(allpoints[0].vector); | + | var observer = new MutationObserver(function(mutations) { |
| - | faces.vertices.push(allpoints[1].vector); | + | mutations.forEach(function(mutation) { |
| - | faces.vertices.push(allpoints[2].vector); | + | if (mutation.removedNodes && mutation.removedNodes.length > 0) { |
| - | faces.vertices.push(allpoints[3].vector); | + | |
| + | observer.disconnect(); | ||
| + | console.log(" | ||
| + | } | ||
| + | }); | ||
| + | }); | ||
| - | | + | // configuration of the observer: |
| + | var config = { childList: true, characterData: | ||
| + | // pass in the target node, as well as the observer options | ||
| + | while (target) { | ||
| + | if (target.className==" | ||
| + | observer.observe(target, | ||
| + | break; | ||
| + | } | ||
| + | | ||
| + | } | ||
| + | |||
| + | // COMMON_CODE_BLOCK_END | ||
| + | |||
| + | var obj0 = new THREE.Object3D(); | ||
| + | obj0.name = " | ||
| + | obj0.userData.explodable = 1; | ||
| + | obj0.userData.points = []; | ||
| + | obj0.userData.points.push(new PMPoint(0, 0, 0)); | ||
| + | obj0.userData.points.push(new PMPoint(2, 0, 0)); | ||
| + | obj0.userData.points.push(new PMPoint(2, 2, 0)); | ||
| + | obj0.userData.points.push(new PMPoint(0, 2, 0)); | ||
| + | obj0.userData.points.push(new PMPoint(0, -2, 0)); | ||
| + | obj0.userData.points.push(new PMPoint(2, -2, 0)); | ||
| + | obj0.userData.points.push(new PMPoint(2, 4, 0)); | ||
| + | obj0.userData.points.push(new PMPoint(0, 4, 0)); | ||
| + | obj0.userData.points.push(new PMPoint(-2, 2, 0)); | ||
| + | obj0.userData.points.push(new PMPoint(-2, 0, 0)); | ||
| + | obj0.userData.points.push(new PMPoint(4, 0, 0)); | ||
| + | obj0.userData.points.push(new PMPoint(4, 2, 0)); | ||
| + | obj0.userData.points.push(new PMPoint(0, -4, 0)); | ||
| + | obj0.userData.points.push(new PMPoint(2, -4, 0)); | ||
| + | |||
| + | obj0.userData.pointradii = 0.02; | ||
| + | < | ||
| + | obj0.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, | ||
| + | obj0.userData.pointlabels = [" | ||
| + | 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( { color: 0x000000, depthTest: true, linewidth: 1.5, transparent: | ||
| + | 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]]; | ||
| < | < | ||
| - | var faces_material | + | obj0.userData.facetmaterial |
| + | obj0.userData.axes = [[5,4], | ||
| + | [2,1], | ||
| + | [0,3], | ||
| + | [3,2], | ||
| + | [1,0]]; | ||
| - | | + | obj0.userData.angles |
| - | faces_material.transparent = true; | + | 1.5707963267949, |
| + | 1.5707963267949, | ||
| + | 1.5707963267949, | ||
| + | 1.5707963267949]; | ||
| - | < | + | obj0.userData.subtrees = [[12,13], |
| - | faces.faces.push(new THREE.Face3(2, 3, 1, undefined, undefined, 0)); | + | [10,11], |
| + | [8,9], | ||
| + | [6,7], | ||
| + | [4,5,12,13]]; | ||
| - | faces.faces.push(new THREE.Face3(0, 3, 2, undefined, undefined, 0)); | + | obj0.userData.polytoperoot = [[-1,-1,-1], |
| + | [-1,0,0], | ||
| + | [0,2,0]]; | ||
| - | faces.faces.push(new THREE.Face3(1, 3, 0, undefined, undefined, 0)); | + | obj0.userData.oldscale = 0; |
| + | foldables.push(obj0); | ||
| + | init_object(obj0); | ||
| + | scene.add(obj0); | ||
| + | // COMMON_CODE_BLOCK_BEGIN | ||
| + | function textSpriteMaterial(message, parameters) { | ||
| + | if ( parameters === undefined ) parameters = {}; | ||
| + | var fontface = " | ||
| + | var fontsize = parameters.hasOwnProperty(" | ||
| + | fontsize = fontsize*10; | ||
| + | var lines = message.split(' | ||
| + | var size = 512; | ||
| + | for(var i = 0; i< | ||
| + | var tmp = lines[i].length; | ||
| + | while(tmp*fontsize > size){ | ||
| + | | ||
| + | } | ||
| + | } | ||
| + | |||
| + | var canvas = document.createElement(' | ||
| + | canvas.width = size; | ||
| + | canvas.height = size; | ||
| + | var context = canvas.getContext(' | ||
| + | context.fillStyle = " | ||
| + | context.fill(); | ||
| + | context.font = fontsize + "px " + fontface; | ||
| + | |||
| + | // text color | ||
| + | context.fillStyle = "rgba(0, 0, 0, 1.0)"; | ||
| + | | ||
| + | context.fillText(lines[i], | ||
| + | } | ||
| + | |||
| + | // canvas contents will be used for a texture | ||
| + | var texture = new THREE.Texture(canvas); | ||
| + | texture.needsUpdate = true; | ||
| + | |||
| + | var spriteMaterial = new THREE.SpriteMaterial({map: | ||
| + | return spriteMaterial; | ||
| + | } | ||
| - | | ||
| + | // ---------------------- INITIALIZING OBJECTS-------------------------------------- | ||
| + | // --------------------------------------------------------------------------------- | ||
| - | faces.computeFaceNormals(); | + | function init_object(obj) { |
| - | faces.computeVertexNormals(); | + | if (obj.userData.hasOwnProperty(" |
| + | init_points(obj); | ||
| + | | ||
| + | } | ||
| + | if (obj.userData.hasOwnProperty(" | ||
| + | init_pointlabels(obj); | ||
| + | modelContains.pointlabels = true; | ||
| + | } | ||
| + | if (obj.userData.hasOwnProperty(" | ||
| + | init_lines(obj); | ||
| + | modelContains.lines = true; | ||
| + | } | ||
| + | if (obj.userData.hasOwnProperty(" | ||
| + | init_edgelabels(obj); | ||
| + | modelContains.edgelabels = true; | ||
| + | } | ||
| + | if (obj.userData.hasOwnProperty(" | ||
| + | init_arrowheads(obj); | ||
| + | modelContains.arrowheads = true; | ||
| + | } | ||
| + | if (obj.userData.hasOwnProperty(" | ||
| + | init_faces(obj); | ||
| + | modelContains.faces = true; | ||
| + | } | ||
| + | } | ||
| - | | + | function init_points(obj) { |
| - | | + | var pointgroup = new THREE.Group(); |
| + | | ||
| + | var points = obj.userData.points; | ||
| + | var radii = obj.userData.pointradii; | ||
| + | var materials = obj.userData.pointmaterial; | ||
| + | var geometry, | ||
| + | if (!Array.isArray(radii)) { | ||
| + | geometry = new THREE.SphereBufferGeometry(radii); | ||
| + | } | ||
| + | if (!Array.isArray(materials)) { | ||
| + | material = materials; | ||
| + | } | ||
| + | for (var i=0; i< | ||
| + | var point = points[i]; | ||
| + | if (Array.isArray(radii)) { | ||
| + | if (radii[i] == 0) { | ||
| + | continue; | ||
| + | } | ||
| + | | ||
| + | } | ||
| + | if (Array.isArray(materials)) { | ||
| + | | ||
| + | } | ||
| + | | ||
| + | point.addSphere(sphere); | ||
| + | pointgroup.add(sphere); | ||
| + | } | ||
| + | | ||
| + | } | ||
| - | < | + | function init_pointlabels(obj) { |
| - | | + | |
| + | var labels = obj.userData.pointlabels; | ||
| + | var pointlabels | ||
| + | | ||
| + | if (Array.isArray(labels)) | ||
| + | for (var i=0; i<points.length; i++) { | ||
| + | var point = points[i]; | ||
| + | var spriteMaterial = textSpriteMaterial( labels[i] ); | ||
| + | var sprite = new THREE.Sprite(spriteMaterial); | ||
| + | | ||
| + | | ||
| + | | ||
| + | } else { | ||
| + | var spriteMaterial = textSpriteMaterial( labels | ||
| + | for (var i=0; i< | ||
| + | var point = points[i]; | ||
| + | var sprite = new THREE.Sprite(spriteMaterial); | ||
| + | | ||
| + | | ||
| + | } | ||
| + | } | ||
| + | | ||
| + | } | ||
| - | | + | function init_lines(obj) { |
| - | line_material.transparent | + | var edgeindices = obj.userData.edgeindices; |
| + | var points | ||
| + | var materials = obj.userData.edgematerial; | ||
| + | var geometry = new THREE.BufferGeometry(); | ||
| + | var bufarr = new Float32Array( obj.userData.edgeindices.length * 3 ); | ||
| + | var bufattr | ||
| + | var geometry = new THREE.BufferGeometry(); | ||
| + | | ||
| + | if (Array.isArray(materials)) { | ||
| + | for (var i=0; i< | ||
| + | | ||
| + | } | ||
| + | } | ||
| + | var lines = new THREE.LineSegments(geometry, | ||
| + | | ||
| + | | ||
| + | | ||
| + | } | ||
| - | < | + | function init_edgelabels(obj) { |
| - | | + | var points = obj.userData.points; |
| - | line.vertices.push(allpoints[2].vector); | + | var edgeindices = obj.userData.edgeindices; |
| - | line.vertices.push(allpoints[3].vector); | + | var labels = obj.userData.edgelabels; |
| - | line.vertices.push(allpoints[1].vector); | + | |
| - | line.vertices.push(allpoints[2].vector); | + | edgelabels.name = " |
| - | | + | if (Array.isArray(labels)) { |
| + | for (var i=0; i< | ||
| + | var point = points[i]; | ||
| + | var spriteMaterial = textSpriteMaterial( labels[i] ); | ||
| + | var sprite = new THREE.Sprite(spriteMaterial); | ||
| + | sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector, | ||
| + | edgelabels.add(sprite); | ||
| + | } | ||
| + | } else { | ||
| + | var spriteMaterial = textSpriteMaterial( labels ); | ||
| + | for (var i=0; i< | ||
| + | var point = points[i]; | ||
| + | var sprite = new THREE.Sprite(spriteMaterial); | ||
| + | sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[i]].vector, | ||
| + | | ||
| + | } | ||
| + | } | ||
| + | | ||
| + | } | ||
| - | | + | function init_arrowheads(obj) { |
| - | line.vertices.push(allpoints[0].vector); | + | |
| - | line.vertices.push(allpoints[3].vector); | + | |
| - | line.vertices.push(allpoints[2].vector); | + | var arrowstyle = obj.userData.arrowstyle; |
| - | line.vertices.push(allpoints[0].vector); | + | var edgeindices = obj.userData.edgeindices; |
| - | obj.add(new THREE.Line(line, line_material)); | + | var edgematerials = obj.userData.edgematerial; |
| + | var points = obj.userData.points; | ||
| + | var material; | ||
| + | if (!Array.isArray(edgematerials)) { | ||
| + | material = new THREE.MeshBasicMaterial( {color: edgematerials.color} | ||
| + | } | ||
| - | var line = new THREE.Geometry(); | + | for (var i=0; i< |
| - | line.vertices.push(allpoints[1].vector); | + | var start = points[edgeindices[i]]; |
| - | line.vertices.push(allpoints[3].vector); | + | var end = points[edgeindices[i+1]]; |
| - | line.vertices.push(allpoints[0].vector); | + | var dist = start.vector.distanceTo( end.vector ) - start.radius() - end.radius(); |
| - | line.vertices.push(allpoints[1].vector); | + | if (dist <= 0) { |
| - | | + | continue; |
| + | } | ||
| + | var dir = new THREE.Vector3().subVectors(end.vector, | ||
| + | dir.normalize(); | ||
| + | var axis = new THREE.Vector3().set(dir.z, | ||
| + | axis.normalize(); | ||
| + | var radians = Math.acos( dir.y ); | ||
| + | var radius = dist/25; | ||
| + | var height = dist/5; | ||
| + | var geometry = new THREE.ConeBufferGeometry(radius, | ||
| + | var position = new THREE.Vector3().addVectors(start.vector, | ||
| + | if (Array.isArray(edgematerials)) { | ||
| + | material = new THREE.MeshBasicMaterial( {color: edgematerials[i].color} | ||
| + | } | ||
| + | var cone = new THREE.Mesh( geometry, material ); | ||
| + | cone.quaternion.setFromAxisAngle(axis, | ||
| + | cone.position.copy(position);; | ||
| + | arrowheads.add(cone); | ||
| + | } | ||
| + | obj.add(arrowheads); | ||
| + | } | ||
| + | |||
| + | function init_faces(obj) { | ||
| + | var points = obj.userData.points; | ||
| + | var facets = obj.userData.facets; | ||
| + | | ||
| + | for (var i=0; i< | ||
| + | facet = facets[i]; | ||
| + | for (var t=0; t< | ||
| + | | ||
| + | } | ||
| + | } | ||
| + | var bufarr = new Float32Array( obj.userData.triangleindices.length * 3 ); | ||
| + | var bufattr = new THREE.Float32BufferAttribute(bufarr, | ||
| + | |||
| + | var materials = obj.userData.facetmaterial; | ||
| + | var geometry = new THREE.BufferGeometry(); | ||
| + | | ||
| + | if (Array.isArray(materials)) { | ||
| + | var tricount = 0; | ||
| + | var facet; | ||
| + | for (var i=0; i< | ||
| + | facet = facets[i]; | ||
| + | | ||
| + | | ||
| + | } | ||
| + | } | ||
| + | var mesh = new THREE.Mesh(geometry, | ||
| + | | ||
| + | | ||
| + | | ||
| + | } | ||
| + | // // | ||
| + | |||
| + | |||
| + | function updateFacesPosition(obj) { | ||
| + | var points = obj.userData.points; | ||
| + | var indices = obj.userData.triangleindices; | ||
| + | var faces = obj.getObjectByName(" | ||
| + | var ba = faces.geometry.getAttribute(" | ||
| + | for (var i=0; i< | ||
| + | ba.setXYZ(i, points[indices[i]].vector.x, | ||
| + | } | ||
| + | | ||
| + | |||
| + | } | ||
| + | |||
| + | function updateEdgesPosition(obj) { | ||
| + | var points = obj.userData.points; | ||
| + | var indices = obj.userData.edgeindices; | ||
| + | var lines = obj.getObjectByName(" | ||
| + | var ba = lines.geometry.getAttribute(" | ||
| + | for (var i=0; i< | ||
| + | ba.setXYZ(i, | ||
| + | } | ||
| + | | ||
| + | } | ||
| - | var line = new THREE.Geometry(); | ||
| - | | ||
| - | | ||
| - | | ||
| - | | ||
| - | | ||
| - | | ||
| - | | ||
| - | // COMMON_CODE_BLOCK_BEGIN | ||
| var xRotationEnabled = false; | var xRotationEnabled = false; | ||
| var yRotationEnabled = false; | var yRotationEnabled = false; | ||
| Line 455: | Line 1892: | ||
| var renderId; | var renderId; | ||
| - | var render = function () { | + | var render = function () { |
| - | renderId = requestAnimationFrame(render); | + | renderId = requestAnimationFrame(render); |
| - | // comment in for automatic explosion | + | // comment in for automatic explosion |
| - | // explode(updateFactor()); | + | // |
| - | var phi = 0.02 * rotationSpeedFactor; | + | |
| - | if (xRotationEnabled){ | + | |
| - | scene.rotation.x += phi; | + | scene.rotation.x += phi; |
| - | } | + | } |
| - | if(yRotationEnabled){ | + | if (yRotationEnabled) { |
| - | scene.rotation.y += phi; | + | scene.rotation.y += phi; |
| - | } | + | } |
| - | if(zRotationEnabled){ | + | if (zRotationEnabled) { |
| - | scene.rotation.z += phi; | + | scene.rotation.z += phi; |
| - | } | + | } |
| - | controls.update(); | + | control.update(); |
| - | renderer.render(scene, | + | renderer.render(scene, |
| - | }; | + | }; |
| + | if ( THREE.WEBGL.isWebGLAvailable() ) { | ||
| render(); | render(); | ||
| + | } else { | ||
| + | var warning = WEBGL.getWebGLErrorMessage(); | ||
| + | three.appendChild( warning ); | ||
| + | } | ||
| + | | ||
| + | function changeTransparency() { | ||
| + | var opacity = 1-Number(event.currentTarget.value); | ||
| + | for (var i=0; i< | ||
| + | child = scene.children[i]; | ||
| + | if ( child.userData.hasOwnProperty(" | ||
| + | if (Array.isArray(child.userData.facetmaterial)) { | ||
| + | for (var j=0; j< | ||
| + | child.userData.facetmaterial[j].opacity = opacity; | ||
| + | } | ||
| + | } else { | ||
| + | child.userData.facetmaterial.opacity = opacity; | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | } | ||
| - | function | + | function |
| - | centroid | + | |
| - | geom.vertices.forEach(function(v) { | + | } |
| - | centroid.add(v); | + | |
| - | }); | + | |
| - | centroid.divideScalar(geom.vertices.length); | + | |
| - | return centroid; | + | |
| - | } | + | |
| - | function | + | function |
| - | var opacity | + | |
| - | for (var i=0; i< | + | } |
| - | for (var j=0; j< | + | |
| - | if (all_objects[i].children[j].material.type == " | + | |
| - | for (var k=0; k< | + | |
| - | all_objects[i].children[j].material.materials[k].opacity = opacity; | + | |
| - | all_objects[i].children[j].material.materials[k].depthWrite = opacity < 0.5 ? false : true; | + | |
| - | all_objects[i].children[j].material.materials[k].depthTest = opacity < 0.5 ? false : true; | + | |
| - | } | + | |
| - | } else if (all_objects[i].children[j].material.transparent && | + | |
| - | | + | |
| - | | + | |
| - | all_objects[i].children[j].material.opacity = opacity; | + | |
| - | all_objects[i].children[j].material.depthWrite = opacity < 0.5 ? false : true; | + | |
| - | all_objects[i].children[j].material.depthTest = opacity < 0.5 ? false : true; | + | |
| - | } | + | |
| - | } | + | |
| - | } | + | |
| - | } | + | |
| - | function | + | function |
| - | xRotationEnabled | + | |
| - | } | + | } |
| - | function changeRotationY(event){ | ||
| - | yRotationEnabled = event.currentTarget.checked; | ||
| - | } | ||
| - | function | + | function |
| - | zRotationEnabled | + | |
| - | } | + | } |
| + | function resetScene(){ | ||
| + | scene.rotation.set(0, | ||
| + | camera.position.set(0, | ||
| + | camera.up.set(0, | ||
| + | } | ||
| - | function | + | function |
| - | rotationSpeedFactor | + | |
| - | } | + | document.getElementById(' |
| + | document.getElementById(' | ||
| + | settingsShown = true; | ||
| + | } | ||
| - | function | + | function |
| - | scene.rotation.set(0,0,0); | + | |
| - | camera.position.set(0,0,5); | + | |
| - | camera.up.set(0,1,0); | + | |
| - | } | + | settingsShown = false; |
| + | } | ||
| - | function showSettings(event){ | ||
| - | event.currentTarget.style.display = ' | ||
| - | document.getElementById(' | ||
| - | document.getElementById(' | ||
| - | document.getElementById(' | ||
| - | document.getElementById(' | ||
| - | settingsShown = true; | ||
| - | } | ||
| - | function hideSettings(event){ | ||
| - | event.currentTarget.style.display = ' | ||
| - | document.getElementById(' | ||
| - | document.getElementById(' | ||
| - | document.getElementById(' | ||
| - | settingsShown = false; | ||
| - | } | ||
| + | var pos = 150* Math.PI; | ||
| + | function updateFactor() { | ||
| + | pos++; | ||
| + | return Math.sin(.01*pos)+1; | ||
| + | } | ||
| - | var pos = 150* Math.PI; | + | // ------------------------ 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; | ||
| - | function updateFactor() { | + | |
| - | pos++; | + | 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))/ |
| - | return Math.sin(.01*pos)+1; | + | 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))/ |
| - | } | + | |
| - | function makelabel(message, | + | |
| - | var spritey = textSprite( message, params ); | + | } |
| - | spritey.position.set(x, | + | |
| - | obj.add(spritey); | + | |
| - | } | + | |
| - | function | + | var fold = function(event){ |
| - | { | + | var obj = foldables[Number(event.currentTarget.name)]; |
| - | if ( parameters === undefined | + | var foldvalue |
| + | var scale = foldvalue - obj.userData.oldscale; | ||
| - | var fontface | + | for (var j=0; j< |
| + | rotateVertices(obj, | ||
| + | } | ||
| + | update(obj); | ||
| + | obj.userData.oldscale += scale; | ||
| + | lookAtBarycenter(obj); | ||
| + | } | ||
| - | var fontsize = parameters.hasOwnProperty(" | + | function lookAtBarycenter(obj){ |
| - | parameters[" | + | |
| - | fontsize | + | } |
| - | var canvas | + | function barycenter(obj) { |
| - | var size = 1024; | + | var center |
| - | canvas.width | + | |
| - | canvas.height = size; | + | for (var i=0; i<points.length; i++){ |
| - | var context = canvas.getContext(' | + | |
| - | context.font = fontsize + "px " + fontface; | + | } |
| + | | ||
| + | | ||
| + | } | ||
| - | // text color | + | function rotateVertices(obj, |
| - | context.fillStyle | + | var axes = obj.userData.axes; |
| + | var subtrees | ||
| + | var points = obj.userData.points; | ||
| + | var angles = obj.userData.angles; | ||
| + | | ||
| + | for (var j=0; j< | ||
| + | var rotP = rotate(points[subtrees[edge][j]].vector, points[axes[edge][0]].vector,points[axes[edge][1]].vector, scale * (Math.PI - angles[edge])); | ||
| + | | ||
| + | } | ||
| + | } | ||
| + | } | ||
| - | context.fillText(message, size/2, size/2); | + | function update(obj) { |
| + | | ||
| + | | ||
| + | } | ||
| - | // canvas contents will be used for a texture | + | if (foldables.length) { |
| - | var texture | + | var settings = document.getElementById(' |
| - | texture.needsUpdate | + | var foldDiv = document.createElement(' |
| + | foldDiv.id = ' | ||
| + | var title = document.createElement(' | ||
| + | title.innerHTML = ' | ||
| + | foldDiv.appendChild(title); | ||
| + | foldDiv.className = ' | ||
| + | | ||
| + | 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 spriteMaterial = new THREE.SpriteMaterial( | + | |
| - | {map: texture, useScreenCoordinates: | + | // ---------------------- EXPLOSION ------------------------------------------------ |
| - | var sprite = new THREE.Sprite(spriteMaterial); | + | // --------------------------------------------------------------------------------- |
| - | return sprite; | + | |
| - | } | + | |
| - | function takeSvgScreenshot(){ | + | if (explodableModel) { |
| - | if (labelsShown){ | + | for (var i=0; i< |
| - | hideLabels(); | + | obj = scene.children[i]; |
| - | } | + | |
| - | svgRenderer.render(scene, | + | |
| - | svgElement = XMLS.serializeToString(svgRenderer.domElement); | + | } |
| - | + | } | |
| - | if (labelsShown){ | + | document.getElementById(' |
| - | displayLabels(); | + | |
| - | } | + | |
| + | } | ||
| - | if (document.getElementById(' | + | function computeCentroid(obj) { |
| - | //show in new tab | + | |
| - | var myWindow | + | obj.userData.points.forEach(function(pmpoint) |
| - | myWindow.document.body.innerHTML = svgElement; | + | |
| - | } else{ | + | }); |
| - | // download svg file | + | centroid.divideScalar(obj.userData.points.length); |
| - | download(" | + | |
| - | } | + | } |
| - | } | + | |
| - | + | ||
| - | function | + | function |
| - | var nr = Number(event.currentTarget.name); | + | for (var i=0; i<scene.children.length; i++) { |
| - | all_objects[nr].visible | + | var obj = scene.children[i]; |
| - | } | + | if (obj.userData.hasOwnProperty(" |
| + | var c = obj.userData.centroid; | ||
| + | obj.position.set(c.x*factor, | ||
| + | } | ||
| + | } | ||
| + | } | ||
| - | function | + | function |
| - | for (var j=0; j< | + | |
| - | var child = obj.children[j]; | + | |
| - | if (child.material===undefined && child) { | + | } |
| - | displayOrHideOptionsRecursive( child ); | + | |
| - | } else { | + | |
| - | if (child.material.type == " | + | |
| - | for (var k=0; k< | + | |
| - | if | + | |
| - | document.getElementById(' | + | |
| - | document.getElementById(' | + | |
| - | child.material.materials[k].opacity; | + | |
| - | return; | + | |
| - | } | + | |
| - | } | + | |
| - | } else if ( child.material.transparent && | + | |
| - | child.material.type == " | + | |
| - | child.geometry.type == " | + | |
| - | document.getElementById(' | + | |
| - | return; | + | |
| - | } | + | |
| - | } | + | |
| - | } | + | |
| - | } | + | |
| - | function | + | function |
| - | for (var i=0; i< | + | |
| - | var obj = all_objects[i]; | + | } |
| - | displayOrHideOptionsRecursive( obj ); | + | |
| - | } | + | |
| - | } | + | |
| - | displayOrHideOptions() | + | function triggerAutomaticExplode(event){ |
| + | if (event.currentTarget.checked){ | ||
| + | startExploding(); | ||
| + | } else { | ||
| + | clearIntervals(); | ||
| + | } | ||
| + | } | ||
| + | function startExploding(){ | ||
| + | intervals.push(setInterval(explodingInterval, | ||
| + | } | ||
| + | function explodingInterval(){ | ||
| + | explodeScale += explodingSpeed; | ||
| + | if (explodeScale <= 6){ | ||
| + | explode(explodeScale); | ||
| + | } | ||
| + | else{ | ||
| + | explode(6); | ||
| + | explodeScale = 6; | ||
| + | clearIntervals(); | ||
| + | timeouts.push(setTimeout(startUnexploding, | ||
| + | } | ||
| + | document.getElementById(' | ||
| + | } | ||
| - | // ---------------------- EXPLOSION ------------------------------------------------ | ||
| - | // --------------------------------------------------------------------------------- | ||
| - | function | + | function |
| - | var obj, c; | + | |
| - | var c0 = centroids[0]; | + | } |
| - | for (var i = 0; i< | + | |
| - | c = centroids[i]; | + | |
| - | obj = all_objects[all_objects.length - centroids.length + i]; | + | |
| - | obj.position.set(c.x*factor, c.y*factor, c.z*factor); | + | |
| - | } | + | |
| - | } | + | |
| - | function | + | function |
| - | explodeScale = Number(event.currentTarget.value); | + | explodeScale |
| - | explode(explodeScale); | + | if (explodeScale >= 0){ |
| - | } | + | explode(explodeScale); |
| + | } | ||
| + | else { | ||
| + | | ||
| + | | ||
| + | clearIntervals(); | ||
| + | timeouts.push(setTimeout(startExploding, | ||
| + | } | ||
| + | document.getElementById(' | ||
| + | } | ||
| - | function | + | function |
| - | explodingSpeed = Number(event.currentTarget.value); | + | |
| - | } | + | clearInterval(interval); |
| + | }); | ||
| + | intervals = []; | ||
| + | timeouts.forEach(function(timeout){ | ||
| + | clearTimeout(timeout); | ||
| + | }); | ||
| + | timeouts = []; | ||
| + | } | ||
| - | function triggerAutomaticExplode(event){ | + | // ---------------------- DISPLAY -------------------------------------------------- |
| - | if (event.currentTarget.checked){ | + | // --------------------------------------------------------------------------------- |
| - | startExploding(); | + | |
| - | } else { | + | |
| - | clearIntervals(); | + | |
| - | } | + | |
| - | } | + | |
| - | function startExploding(){ | + | const objectTypeInnerHTMLs = { points: " |
| - | intervals.push(setInterval(explodingInterval, 25)); | + | const objectTypeVisible = {}; |
| - | } | + | Object.assign(objectTypeVisible,modelContains); |
| + | const sortedObjectTypeKeys = Object.keys(objectTypeInnerHTMLs).sort(); | ||
| + | const shownObjectTypesList = document.getElementById(' | ||
| + | function setVisibility(bool, | ||
| + | for (var i=0; i< | ||
| + | var obj = scene.children[i].getObjectByName(objname); | ||
| + | if (obj) { | ||
| + | obj.visible = bool; | ||
| + | } | ||
| + | } | ||
| + | } | ||
| - | function | + | function |
| - | explodeScale += explodingSpeed; | + | var name = event.currentTarget.name; |
| - | if (explodeScale <= 6){ | + | var checked |
| - | explode(explodeScale); | + | |
| - | } | + | |
| - | else{ | + | } |
| - | explode(6); | + | |
| - | explodeScale | + | |
| - | clearIntervals(); | + | |
| - | timeouts.push(setTimeout(startUnexploding, 3000)); | + | |
| - | } | + | |
| - | document.getElementById(' | + | |
| - | } | + | |
| + | for (var i=0; i< | ||
| + | var key = sortedObjectTypeKeys[i]; | ||
| + | if (modelContains[key]) { | ||
| + | var objTypeNode = document.createElement(' | ||
| + | objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '< | ||
| + | var checkbox = document.createElement(' | ||
| + | checkbox.type = ' | ||
| + | checkbox.checked = true; | ||
| + | checkbox.name = key; | ||
| + | checkbox.onchange = toggleObjectTypeVisibility; | ||
| + | shownObjectTypesList.appendChild(checkbox); | ||
| + | shownObjectTypesList.appendChild(objTypeNode); | ||
| + | } | ||
| + | } | ||
| - | function startUnexploding(){ | + | // ------------------------------------------------------ |
| - | intervals.push(setInterval(unexplodingInterval, | + | |
| - | } | + | |
| - | function | + | function |
| - | explodeScale -= explodingSpeed; | + | var nr = Number(event.currentTarget.name); |
| - | if (explodeScale >= 0){ | + | scene.children[nr].visible |
| - | explode(explodeScale); | + | } |
| - | } | + | |
| - | else { | + | |
| - | explode(0); | + | |
| - | explodeScale = 0; | + | |
| - | clearIntervals(); | + | |
| - | timeouts.push(setTimeout(startExploding, | + | |
| - | } | + | |
| - | document.getElementById(' | + | |
| - | } | + | |
| - | function clearIntervals(){ | + | // append checkboxes for displaying or hiding objects |
| - | intervals.forEach(function(interval){ | + | var shownObjectsList = document.getElementById(' |
| - | clearInterval(interval); | + | for (var i=0; i< |
| - | }); | + | |
| - | intervals | + | var objNode = document.createElement(' |
| - | timeouts.forEach(function(timeout){ | + | |
| - | clearTimeout(timeout); | + | var checkbox = document.createElement(' |
| - | }); | + | |
| - | timeouts | + | checkbox.checked = true; |
| - | } | + | checkbox.name = String(i); |
| + | | ||
| + | shownObjectsList.appendChild(checkbox); | ||
| + | shownObjectsList.appendChild(objNode); | ||
| + | } | ||
| - | + | // ---------------------- SVG ------------------------------------------------------ | |
| + | // --------------------------------------------------------------------------------- | ||
| - | // append checkboxes for displaying or hiding objects | + | function takeSvgScreenshot() { |
| - | var shownObjectsList = document.getElementById(' | + | |
| - | for (var i=0; i< | + | |
| - | var objNode = document.createElement(' | + | } |
| - | objNode.innerHTML = objectnames[i] + '< | + | if (objectTypeVisible[" |
| - | var checkbox = document.createElement(' | + | |
| - | checkbox.type = ' | + | } |
| - | checkbox.checked = true; | + | |
| - | checkbox.name | + | |
| - | checkbox.onchange = showOrHideObject; | + | |
| - | shownObjectsList.appendChild(checkbox); | + | |
| - | shownObjectsList.appendChild(objNode); | + | setVisibility(true," |
| - | } | + | } |
| + | if (objectTypeVisible[" | ||
| + | setVisibility(true," | ||
| + | } | ||
| - | function displayLabels(){ | + | if (document.getElementById(' |
| - | for (var i=0; i< | + | // |
| - | for (var j=0; j< | + | |
| - | var child = all_objects[i].children[j]; | + | |
| - | if (child.type == ' | + | } else{ |
| - | child.visible = true; | + | // download svg file |
| - | } | + | |
| - | } | + | } |
| - | } | + | } |
| - | } | + | |
| - | function | + | function |
| - | for (var i=0; i< | + | var element |
| - | for (var j=0; j< | + | |
| - | var child = all_objects[i].children[j]; | + | |
| - | if | + | |
| - | child.visible = false; | + | |
| - | } | + | |
| - | } | + | |
| - | } | + | |
| - | } | + | |
| - | function displayOrHideLabels(event){ | + | element.style.display |
| - | if (event.currentTarget.checked){ | + | |
| - | displayLabels(); | + | |
| - | labelsShown | + | |
| - | } else { | + | |
| - | hideLabels(); | + | |
| - | labelsShown = false; | + | |
| - | } | + | |
| - | } | + | |
| - | function download(filename, | + | element.click(); |
| - | var element = document.createElement(' | + | |
| - | element.setAttribute(' | + | |
| - | element.setAttribute(' | + | |
| - | element.style.display = ' | + | document.body.removeChild(element); |
| - | document.body.appendChild(element); | + | } |
| - | element.click(); | ||
| - | | + | document.getElementById(' |
| - | } | + | document.getElementById(' |
| + | document.getElementById(' | ||
| + | document.getElementById(' | ||
| + | document.getElementById(' | ||
| + | document.getElementById(' | ||
| + | document.getElementById(' | ||
| + | document.getElementById(' | ||
| + | document.getElementById(' | ||
| - | var tempobj; | ||
| - | tempobj = document.getElementById(' | ||
| - | if (tempobj) { | ||
| - | | ||
| - | | ||
| - | | ||
| - | } | ||
| - | tempobj = document.getElementById(' | ||
| - | if (tempobj) { | ||
| - | | ||
| - | } | ||
| - | document.getElementById(' | ||
| - | document.getElementById(' | ||
| - | document.getElementById(' | ||
| - | document.getElementById(' | ||
| - | document.getElementById(' | ||
| - | document.getElementById(' | ||
| - | document.getElementById(' | ||
| - | document.getElementById(' | ||
| - | document.getElementById(' | ||
| - | document.getElementById(' | ||
| - | |||
| - | |||
| // ------------------ SHORTCUTS -------------------------------------------- | // ------------------ SHORTCUTS -------------------------------------------- | ||
| Line 1055: | Line 2521: | ||
| var event = new Event(' | var event = new Event(' | ||
| if (settingsShown){ | if (settingsShown){ | ||
| - | document.getElementById(' | + | document.getElementById(' |
| - | } else{ | + | } else { |
| - | document.getElementById(' | + | document.getElementById(' |
| } | } | ||
| }); | }); | ||
| - | if (foldable) moveToBaryCenter(); | ||
| + | // COMMON_CODE_BLOCK_END | ||
| });}); | });}); | ||
| - | // COMMON_CODE_BLOCK_END | + | </script> |
| - | </script> | + | </body> |
| + | </html> | ||
| + | </HTML> | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||