user_guide:tutorials:latest:apps_topaz

no way to compare when less than two revisions

Differences

This shows you the differences between two versions of the page.


user_guide:tutorials:latest:apps_topaz [2023/11/06 10:57] (current) – created - external edit 127.0.0.1
Line 1: Line 1:
 +===== Introduction to topaz =====
 +
 +This tutorial tries to give the user a first idea about the features of the ''%%topaz%%'' application of ''%%polymake%%''. We take a look at a variety of small examples.
 +
 +First, we have to make ''%%topaz%%'' the current application. For this you can either start ''%%polymake%%'' with the option ''%%-A topaz%%'',
 +
 +<code>
 +polymake -A topaz
 +</code>
 +or, if you've already started ''%%polymake%%'', type
 +
 +<code perl>
 +> application 'topaz';
 +</code>
 +in the ''%%polymake%%'' shell.
 +
 +==== Simplicial complexes ====
 +
 +The most important object of the ''%%topaz%%'' application is the simplicial complex. There are several ways of obtaining one.
 +
 +=== From faces ===
 +
 +For example, you can specify some faces of the complex. You can pass them as an ''%%Array< Set<Int> >%%'', or ''%%Array< Array<Int> >%%'':
 +
 +<code perl>
 +> # $s = new SimplicialComplex(INPUT_FACES=>[new Set(0), new Set(0,1), new Set(1,2,3)]);
 +> $s = new SimplicialComplex(INPUT_FACES=>[[0],[0,1],[1,2,3]]);
 +</code>
 +As you can see, redundancies are allowed -- ''%%[0]%%'' is not a facet of the complex, and thus not necessary for encoding ''%%$s%%''. You can compute the inclusion maximal faces like this:
 +
 +<code perl>
 +> print $s->FACETS;
 +{0 1}
 +{1 2 3}
 +</code>
 +You can also pass the ''%%FACETS%%'' to the constructor, but be aware that in that case the vertices must be numbered increasingly starting with ''%%0%%'' and redundancies are prohibited.
 +
 +Take a look at your complex using
 +
 +<code perl>
 +> $s->VISUAL;
 +</code>
 +<HTML>
 +<!--
 +polymake for knusper
 +Wed Mar  2 22:30:10 2022
 +s
 +-->
 +
 +
 +<html>
 +   <head>
 +      <meta charset=utf-8>
 +      <title>s</title>
 +      <style>
 +/*
 +// COMMON_CODE_BLOCK_BEGIN
 +*/
 +         html {overflow: scroll;}
 +         strong{font-size: 18px;}
 +         canvas { z-index: 8; }
 +         input[type='radio'] {margin-left:0;}
 +         input[type='checkbox'] {margin-right:7px; margin-left: 0px; padding-left:0px;}
 +         .group{padding-bottom: 15px;}
 +         .settings * {z-index: 11; }
 +         .settings{z-index: 10; font-family: Arial, Helvetica, sans-serif; margin-left: 30px; visibility: hidden; width: 14em; height: 96%; border: solid 1px silver; padding: 2px; overflow-y: scroll; box-sizing: border-box; background-color: white; position: absolute;}
 +         .indented{margin-left: 20px; margin-top: 10px; padding-bottom: 0px;} 
 +         .shownObjectsList{overflow: auto; max-width: 150px; max-height: 150px;}
 +         .showSettingsButton{visibility: visible; z-index: 12; position: absolute }
 +         .hideSettingsButton{visibility: hidden; z-index: 12; position: absolute; opacity: 0.5}
 +         button{margin-left: 0; margin-top: 10px}
 +         img{cursor: pointer;}
 +         .suboption{padding-top: 15px;}
 +         #model28695364747 { width: 100%; height: 100%; }
 +         .threejs_container { width: 100%; height: 75vh;}
 +         .settings{max-height: 74vh} 
 +         input[type=range] {
 +           -webkit-appearance: none;
 +           padding:0; 
 +           width:90%; 
 +           margin-left: auto;
 +           margin-right: auto;
 +           margin-top: 15px;
 +           margin-bottom: 15px;
 +           display: block;
 +         }
 +         input[type=range]:focus {
 +           outline: none;
 +         }
 +         input[type=range]::-webkit-slider-runnable-track {
 +           height: 4px;
 +           cursor: pointer;
 +           animate: 0.2s;
 +           box-shadow: 0px 0px 0px #000000;
 +           background: #E3E3E3;
 +           border-radius: 0px;
 +           border: 0px solid #000000;
 +         }
 +         input[type=range]::-webkit-slider-thumb {
 +           box-shadow: 1px 1px 2px #B8B8B8;
 +           border: 1px solid #ABABAB;
 +           height: 13px;
 +           width: 25px;
 +           border-radius: 20px;
 +           background: #E0E0E0;
 +           cursor: pointer;
 +           -webkit-appearance: none;
 +           margin-top: -5px;
 +         }
 +         input[type=range]:focus::-webkit-slider-runnable-track {
 +           background: #E3E3E3;
 +         }
 +         input[type=range]::-moz-range-track {
 +           height: 4px;
 +           cursor: pointer;
 +           animate: 0.2s;
 +           box-shadow: 0px 0px 0px #000000;
 +           background: #E3E3E3;
 +           border-radius: 0px;
 +           border: 0px solid #000000;
 +         }
 +         input[type=range]::-moz-range-thumb {
 +           box-shadow: 1px 1px 2px #B8B8B8;
 +           border: 1px solid #ABABAB;
 +           height: 13px;
 +           width: 25px;
 +           border-radius: 20px;
 +           background: #E0E0E0;
 +           cursor: pointer;
 +         }
 +         input[type=range]::-ms-track {
 +           height: 4px;
 +           cursor: pointer;
 +           animate: 0.2s;
 +           background: transparent;
 +           border-color: transparent;
 +           color: transparent;
 +         }
 +         input[type=range]::-ms-fill-lower {
 +           background: #E3E3E3;
 +           border: 0px solid #000000;
 +           border-radius: 0px;
 +           box-shadow: 0px 0px 0px #000000;
 +         }
 +         input[type=range]::-ms-fill-upper {
 +           background: #E3E3E3;
 +           border: 0px solid #000000;
 +           border-radius: 0px;
 +           box-shadow: 0px 0px 0px #000000;
 +         }
 +         input[type=range]::-ms-thumb {
 +           box-shadow: 1px 1px 2px #B8B8B8;
 +           border: 1px solid #ABABAB;
 +           height: 13px;
 +           width: 25px;
 +           border-radius: 20px;
 +           background: #E0E0E0;
 +           cursor: pointer;
 +         }
 +         input[type=range]:focus::-ms-fill-lower {
 +           background: #E3E3E3;
 +         }
 +         input[type=range]:focus::-ms-fill-upper {
 +           background: #E3E3E3;
 +         }
 +/*
 +// COMMON_CODE_BLOCK_END
 +*/
 + </style>
 +   </head>
 +<body>
 +   <div class='threejs_container'>
 + <div id='settings_0' class='settings'>
 + <div class=group id='explode_0'>
 + <strong>Explode</strong>
 + <input id='explodeRange_0' type='range' min='0.00001' max=6 step=0.01 value=0.00001>
 + <div class=indented><input id='explodeCheckbox_0' type='checkbox'>Automatic explosion</div>
 + <div class=suboption>Exploding speed</div>
 + <input id='explodingSpeedRange_0' type='range' min=0 max=0.5 step=0.001 value=0.05>
 + </div>
 +
 + <div class=group id='transparency_0' class='transparency'>
 + <strong>Transparency</strong>
 + <input id='transparencyRange_0' type='range' min=0 max=1 step=0.01 value=0>
 +            <div class=indented><input id='depthWriteCheckbox_0' type='checkbox'>depthWrite</div>
 + </div>
 +
 + <div class=group id='rotation_0'>
 + <strong>Rotation</strong>
 + <div class=indented>
 + <div><input type='checkbox' id='changeRotationX_0'> x-axis</div>
 + <div><input type='checkbox' id='changeRotationY_0'> y-axis</div>
 + <div><input type='checkbox' id='changeRotationZ_0'> z-axis</div>
 + <button id='resetButton_0'>Reset</button>
 + </div>
 +
 + <div class=suboption>Rotation speed</div>
 + <input id='rotationSpeedRange_0' type='range' min=0 max=5 step=0.01 value=2>
 + </div>
 +
 +
 + <div class=group id='display_0'>
 + <strong>Display</strong>
 + <div class=indented>
 + <div id='shownObjectTypesList_0' class='shownObjectsList'></div>
 + </div>
 + <div class=suboption>Objects</div>
 + <div class=indented>
 +    <div id='shownObjectsList_0' class='shownObjectsList'></div>
 + </div>
 + </div>
 +         
 +         <div class=group id='camera_0'>
 +            <strong>Camera</strong>
 +            <div class=indented>
 +               <form>
 +                  <select id="cameraType_0">
 +                     <option value='perspective' selected> Perspective<br></option>
 +                     <option value='orthographic' > Orthographic<br></option>
 +                  </select>
 +               </form>
 +            </div>
 +         </div>
 +
 + <div class=group id='svg_0'>
 + <strong>SVG</strong>
 + <div class=indented>
 + <form>
 + <input type="radio" name='screenshotMode' value='download' id='download_0' checked> Download<br>
 + <input type="radio" name='screenshotMode' value='tab' id='tab_0' > New tab<br>
 + </form>
 + <button id='takeScreenshot_0'>Screenshot</button>
 + </div>
 + </div>
 +
 + </div> <!-- end of settings -->
 + <img id='hideSettingsButton_0' class='hideSettingsButton' src='/kernelspecs/r118/polymake/close.svg' width=20px">
 + <img id='showSettingsButton_0' class='showSettingsButton' src='/kernelspecs/r118/polymake/menu.svg' width=20px">
 +<div id="model28695364747"></div>
 +</div>
 +   <script>
 +    requirejs.config({
 +      paths: {
 +        three: '/kernelspecs/r118/polymake/three',
 +        TrackballControls: '/kernelspecs/r118/polymake/TrackballControls',
 +        OrbitControls: '/kernelspecs/r118/polymake/OrbitControls',
 +        Projector: '/kernelspecs/r118/polymake/Projector',
 +        SVGRenderer: '/kernelspecs/r118/polymake/SVGRenderer',
 +        WEBGL: '/kernelspecs/r118/polymake/WebGL',
 +      },
 +      shim: {
 +        'three': { exports: 'THREE'},
 +        'SVGRenderer': { deps: [ 'three' ], exports: 'THREE.SVGRenderer' },
 +        'WEBGL': { deps: [ 'three' ], exports: 'THREE.WEBGL' },
 +        'Projector': { deps: [ 'three' ], exports: 'THREE.Projector' },
 +        'TrackballControls': { deps: [ 'three' ], exports: 'THREE.TrackballControls' },
 +        'OrbitControls': { deps: [ 'three' ], exports: 'THREE.OrbitControls' },
 +      }
 +    });
 +    
 +    require(['three'],function(THREE){
 +        window.THREE = THREE;
 +      require(['TrackballControls', 'OrbitControls', 'Projector', 'SVGRenderer', 'WEBGL'],
 +               function(TrackballControls, OrbitControls, Projector, SVGRenderer, WEBGL) {
 +    THREE.TrackballControls = TrackballControls;
 +    THREE.OrbitControls = OrbitControls;
 +    THREE.Projector = Projector;
 +    THREE.SVGRenderer = SVGRenderer;
 +    THREE.WEBGL = WEBGL;
 +
 +// COMMON_CODE_BLOCK_BEGIN
 +
 +const intervalLength = 25; // for automatic animations
 +const explodableModel = true; 
 +const modelContains = { points: false, pointlabels: false, lines: false, edgelabels: false, faces: false, arrowheads: false };
 +const foldables = [];
 +
 +var three = document.getElementById("model28695364747");
 +var scene = new THREE.Scene();
 +var renderer = new THREE.WebGLRenderer( { antialias: true } );
 +var svgRenderer = new THREE.SVGRenderer( { antialias: true } );
 +renderer.setPixelRatio( window.devicePixelRatio );
 +renderer.setClearColor(0xFFFFFF, 1);
 +svgRenderer.setClearColor(0xFFFFFF, 1);
 +three.appendChild(renderer.domElement);
 +
 +var frustumSize = 4;
 +var cameras = [new THREE.PerspectiveCamera(75, 1, 0.1, 1000), new THREE.OrthographicCamera()];
 +cameras.forEach(function(cam) {
 +    cam.position.set(0, 0, 5);
 +    cam.lookAt(0, 0, 0);  
 +    cam.up.set(0, 1, 0);         
 +});
 +var controls = [new THREE.TrackballControls(cameras[0], three), new THREE.OrbitControls(cameras[1], three)];
 +var camera, control;
 +
 +controls[0].zoomSpeed = 0.2;
 +controls[0].rotateSpeed = 4;
 +
 +
 +// class to allow move points together with labels and spheres
 +var PMPoint = function (x,y,z) {
 +   this.vector = new THREE.Vector3(x,y,z);
 +   this.sprite = null;
 +   this.sphere = null;
 +}
 +PMPoint.prototype.addLabel = function(labelsprite) {
 +   this.sprite = labelsprite;
 +   this.sprite.position.copy(this.vector);
 +}
 +PMPoint.prototype.addSphere = function(spheremesh) {
 +   this.sphere = spheremesh;
 +   this.sphere.position.copy(this.vector);
 +}
 +PMPoint.prototype.set = function(x,y,z) {
 +   this.vector.set(x,y,z);
 +   if (this.sprite) {
 +      this.sprite.position.copy(this.vector);
 +   }
 +   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 = document.querySelector('#model28695364747');
 +
 +// 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("cancelled frame "+renderId);
 +      }
 +   });
 +});
 +
 +// configuration of the observer:
 +var config = { childList: true, characterData: true }
 +
 +// pass in the target node, as well as the observer options
 +while (target) {
 +   if (target.className=="output") {
 +      observer.observe(target, config);
 +      break;
 +   }
 +   target = target.parentNode;
 +}
 +
 +// COMMON_CODE_BLOCK_END
 +
 +var obj0 = new THREE.Object3D();
 +obj0.name = "GRAPH of s";
 +obj0.userData.explodable = 0;
 +obj0.userData.points = [];
 +obj0.userData.points.push(new PMPoint(1.06372, 2.28062, -0.165367));
 +obj0.userData.points.push(new PMPoint(0.0977238, 0.209553, -0.0152252));
 +obj0.userData.points.push(new PMPoint(-0.725235, -1.20838, -0.331436));
 +obj0.userData.points.push(new PMPoint(-0.436206, -1.2818, 0.512028));
 +
 +obj0.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj0.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide, transparent: false } );
 +obj0.userData.pointlabels = ["0", "1", "2", "3"];
 +obj0.userData.edgeindices = [1, 0, 2, 1, 3, 1, 3, 2];
 +   <!-- Edge style -->
 +obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +init_object(obj0);
 +scene.add(obj0);
 +
 +var obj1 = new THREE.Object3D();
 +obj1.name = "0 1";
 +obj1.userData.explodable = 1;
 +obj1.userData.points = [];
 +obj1.userData.points.push(new PMPoint(1.06372, 2.28062, -0.165367));
 +obj1.userData.points.push(new PMPoint(0.0977238, 0.209553, -0.0152252));
 +
 +obj1.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj1.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj1.userData.pointlabels = ["0", "1"];
 +obj1.userData.edgeindices = [1, 0];
 +   <!-- Edge style -->
 +obj1.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +init_object(obj1);
 +scene.add(obj1);
 +
 +var obj2 = new THREE.Object3D();
 +obj2.name = "1 2 3";
 +obj2.userData.explodable = 1;
 +obj2.userData.points = [];
 +obj2.userData.points.push(new PMPoint(0.0977238, 0.209553, -0.0152252));
 +obj2.userData.points.push(new PMPoint(-0.725235, -1.20838, -0.331436));
 +obj2.userData.points.push(new PMPoint(-0.436206, -1.2818, 0.512028));
 +
 +obj2.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj2.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj2.userData.pointlabels = ["1", "2", "3"];
 +obj2.userData.edgeindices = [0, 1, 0, 2, 1, 2];
 +   <!-- Edge style -->
 +obj2.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj2.userData.facets = [[0, 1, 2]];
 +   <!-- Facet style -->
 +obj2.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj2);
 +scene.add(obj2);
 +
 +// COMMON_CODE_BLOCK_BEGIN
 +function textSpriteMaterial(message, parameters) {
 +    if ( parameters === undefined ) parameters = {};
 +    var fontface = "Helvetica";
 +    var fontsize = parameters.hasOwnProperty("fontsize") ? parameters["fontsize"] : 15;
 +    fontsize = fontsize*10;
 +    var lines = message.split('\\n');
 +    var size = 512;
 +    for(var i = 0; i<lines.length; i++){
 +        var tmp = lines[i].length;
 +        while(tmp*fontsize > size){
 +           fontsize--;
 +        }
 +    }
 +    
 +    var canvas = document.createElement('canvas');
 +    canvas.width = size;
 +    canvas.height = size;
 +    var context = canvas.getContext('2d');
 +    context.fillStyle = "rgba(255, 255, 255, 0)";
 +    context.fill();
 +    context.font = fontsize + "px " + fontface;
 +    
 +    // text color
 +    context.fillStyle = "rgba(0, 0, 0, 1.0)";
 +     for(var i = 0; i<lines.length; i++){
 +        context.fillText(lines[i], size/2, size/2+i*fontsize);
 +     }
 +    
 +    // canvas contents will be used for a texture
 +    var texture = new THREE.Texture(canvas);
 +    texture.needsUpdate = true;
 +    
 +    var spriteMaterial = new THREE.SpriteMaterial({map: texture, depthTest: true, depthWrite: false, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: 1 });
 +    return spriteMaterial;
 +}
 +
 +
 +// ---------------------- INITIALIZING OBJECTS--------------------------------------
 +// ---------------------------------------------------------------------------------
 +
 +function init_object(obj) {
 +    if (obj.userData.hasOwnProperty("pointmaterial")) {
 +        init_points(obj);
 +        modelContains.points = true;
 +    }
 +    if (obj.userData.hasOwnProperty("pointlabels")) {
 +        init_pointlabels(obj);
 +        modelContains.pointlabels = true;
 +    }
 +    if (obj.userData.hasOwnProperty("edgematerial")) {
 +        init_lines(obj);
 +        modelContains.lines = true;
 +    }
 +    if (obj.userData.hasOwnProperty("edgelabels")) {
 +        init_edgelabels(obj);
 +        modelContains.edgelabels = true;
 +    }
 +    if (obj.userData.hasOwnProperty("arrowstyle")) {
 +        init_arrowheads(obj);
 +        modelContains.arrowheads = true;
 +    }
 +    if (obj.userData.hasOwnProperty("facetmaterial")) {
 +        init_faces(obj);
 +        modelContains.faces = true;
 +    }
 +}
 +
 +function init_points(obj) {
 +    var pointgroup = new THREE.Group();
 +    pointgroup.name = "points";
 +    var points = obj.userData.points;
 +    var radii = obj.userData.pointradii;
 +    var materials = obj.userData.pointmaterial;
 +    var geometry,material;
 +    if (!Array.isArray(radii)) {
 +        geometry = new THREE.SphereBufferGeometry(radii);  
 +    }
 +    if (!Array.isArray(materials)) {
 +        material = materials;
 +    }
 +    for (var i=0; i<points.length; i++) {
 +        var point = points[i];
 +        if (Array.isArray(radii)) {
 +            if (radii[i] == 0) {
 +                continue;
 +            }
 +            geometry = new THREE.SphereBufferGeometry(radii[i]);  
 +        } 
 +        if (Array.isArray(materials)) {
 +            material = materials[i];     
 +        } 
 +        var sphere = new THREE.Mesh(geometry, material);
 +        point.addSphere(sphere);
 +        pointgroup.add(sphere);
 +    }
 +    obj.add(pointgroup);
 +}
 +
 +function init_pointlabels(obj) {
 +    var points = obj.userData.points;
 +    var labels = obj.userData.pointlabels;
 +    var pointlabels = new THREE.Group();
 +    pointlabels.name = "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);
 +            point.addLabel(sprite);
 +            pointlabels.add(sprite);
 +        }
 +    } else {
 +        var spriteMaterial = textSpriteMaterial( labels );
 +        for (var i=0; i<points.length; i++) {
 +            var point = points[i];
 +         var sprite = new THREE.Sprite(spriteMaterial);
 +            point.addLabel(sprite);
 +            pointlabels.add(sprite);
 +        }
 +    }
 +    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();
 +    geometry.setAttribute('position', bufattr);
 +    if (Array.isArray(materials)) {     
 +        for (var i=0; i<materials.length; i++) {
 +            geometry.addGroup(2*i,2,i);
 +        }
 +    }
 +    var lines = new THREE.LineSegments(geometry, materials);
 +    lines.name = "lines";
 +    obj.add(lines);
 +    updateEdgesPosition(obj);
 +}
 +
 +function init_edgelabels(obj) {
 +    var points = obj.userData.points;
 +    var edgeindices = obj.userData.edgeindices;
 +    var labels = obj.userData.edgelabels;
 +    var edgelabels = new THREE.Group();
 +    edgelabels.name = "edgelabels";
 +    if (Array.isArray(labels)) {
 +        for (var i=0; i<edgeindices.length/2; i++) {
 +            var spriteMaterial = textSpriteMaterial( labels[i] );
 +            var sprite = new THREE.Sprite(spriteMaterial);
 +            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[2*i]].vector,points[edgeindices[2*i+1]].vector).multiplyScalar(0.5));
 +            edgelabels.add(sprite);
 +        }
 +    } else {
 +        var spriteMaterial = textSpriteMaterial( labels );
 +        for (var i=0; i<edgeindices.length/2; i++) {
 +            var sprite = new THREE.Sprite(spriteMaterial);
 +            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[2*i]].vector,points[edgeindices[2*i+1]].vector).multiplyScalar(0.5));
 +            edgelabels.add(sprite);
 +        }
 +    }
 +    obj.add(edgelabels);
 +}
 +
 +function init_arrowheads(obj) {
 +    var arrowheads = new THREE.Group();
 +    arrowheads.name = "arrowheads";
 +    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)) {
 +        material = new THREE.MeshBasicMaterial( {color: edgematerials.color} );
 +    }
 +
 +    for (var i=0; i<edgeindices.length; i=i+2) {
 +        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,start.vector);
 +        dir.normalize();
 +        var axis = new THREE.Vector3().set(dir.z,0,-dir.x);
 +        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,dir.clone().multiplyScalar(start.radius()+dist-height/2));
 +        if (Array.isArray(edgematerials)) {
 +            material = new THREE.MeshBasicMaterial( {color: edgematerials[i].color} );
 +        }
 +        var cone = new THREE.Mesh( geometry, material );
 +        cone.quaternion.setFromAxisAngle(axis,radians);;
 +        cone.position.copy(position);;
 +        arrowheads.add(cone);
 +    }
 +    obj.add(arrowheads);
 +}
 +
 +function init_faces(obj) {
 +    var points = obj.userData.points;
 +    var facets = obj.userData.facets;
 +    obj.userData.triangleindices = [];
 +    for (var i=0; i<facets.length; i++) {
 +        facet = facets[i];
 +        for (var t=0; t<facet.length-2; t++) {
 +            obj.userData.triangleindices.push(facet[0],facet[t+1],facet[t+2]);  
 +        }
 +    }
 +    var bufarr = new Float32Array( obj.userData.triangleindices.length * 3 );
 +    var bufattr = new THREE.Float32BufferAttribute(bufarr,3);
 +    
 +    var materials = obj.userData.facetmaterial;
 +    var geometry = new THREE.BufferGeometry();
 +    var frontmaterials = [];
 +    var backmaterials = [];
 +    geometry.setAttribute('position',bufattr);
 +    if (Array.isArray(materials)) {
 +        var tricount = 0;
 +        var facet;
 +        for (var i=0; i<facets.length; i++) {
 +            facet = facets[i];
 +            geometry.addGroup(tricount,(facet.length-2)*3,i);
 +            tricount += (facet.length-2)*3;
 +        }
 +        for (var j=0; j<materials.length; j++) {
 +            var fmat = materials[j].clone()
 +            fmat.side = THREE.FrontSide;
 +            frontmaterials.push(fmat);
 +            var bmat = materials[j].clone()
 +            bmat.side = THREE.BackSide;
 +            backmaterials.push(bmat);
 +            obj.userData.facetmaterial = frontmaterials.concat(backmaterials);
 +        }
 +    } else if (materials instanceof THREE.Material) {
 +        frontmaterials = materials.clone()
 +        frontmaterials.side = THREE.FrontSide;
 +        backmaterials = materials.clone()
 +        backmaterials.side = THREE.BackSide;
 +        obj.userData.facetmaterial = [frontmaterials, backmaterials];
 +    }
 +    // duplicating the object with front and back should avoid transparency issues
 +    var backmesh = new THREE.Mesh(geometry, backmaterials);
 +    // meshname is used to show/hide objects
 +    backmesh.name = "backfaces";
 +    obj.add(backmesh);
 +    var frontmesh = new THREE.Mesh(geometry, frontmaterials);
 +    frontmesh.name = "frontfaces";
 +    obj.add(frontmesh);
 +    updateFacesPosition(obj);
 +}
 +// //INITIALIZING
 +
 +
 +function updateFacesPosition(obj) {
 +    var points = obj.userData.points;
 +    var indices = obj.userData.triangleindices;
 +    var faces = obj.getObjectByName("frontfaces");
 +    var ba = faces.geometry.getAttribute("position");
 +    for (var i=0; i<indices.length; i++) {
 +        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); 
 +    }
 +    faces.geometry.attributes.position.needsUpdate = true;
 +    
 +}
 +
 +function updateEdgesPosition(obj) {
 +    var points = obj.userData.points;
 +    var indices = obj.userData.edgeindices;
 +    var lines = obj.getObjectByName("lines");
 +    var ba = lines.geometry.getAttribute("position"); 
 +    for (var i=0; i<indices.length; i++) {
 +        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); 
 +    }
 +    lines.geometry.attributes.position.needsUpdate = true;
 +}
 +
 +function onWindowResize() {
 +    renderer.setSize( three.clientWidth, three.clientHeight );
 +    svgRenderer.setSize( three.clientWidth, three.clientHeight );
 +    updateCamera();
 +}
 +
 +function updateCamera() {
 +    var width = three.clientWidth;
 +    var height = three.clientHeight;
 +    var aspect = width / height;
 +    if (camera.type == "OrthographicCamera") {
 +        camera.left = frustumSize * aspect / - 2;
 +        camera.right = frustumSize * aspect / 2;
 +        camera.top = frustumSize / 2;
 +        camera.bottom = - frustumSize / 2;
 +    } else if (camera.type == "PerspectiveCamera") {
 +        camera.aspect = aspect;
 +    }
 +    camera.updateProjectionMatrix();
 +}
 +
 +function changeCamera(event) {
 +    var selindex = event.currentTarget.selectedIndex;
 +    camera = cameras[selindex];
 +    control = controls[selindex];
 +    control.enabled = true; 
 +    for (var i=0; i<controls.length; i++) {
 +        if (i!=selindex) {
 +            controls[i].enabled = false;
 +        }
 +    }
 +    updateCamera();
 +}
 +
 +var camtypenode = document.getElementById('cameraType_0');
 +camtypenode.onchange = changeCamera;
 +camtypenode.dispatchEvent(new Event('change'));
 +
 +onWindowResize();
 +window.addEventListener('resize', onWindowResize);
 +
 +
 +var xRotationEnabled = false;
 +var yRotationEnabled = false;
 +var zRotationEnabled = false;
 +var rotationSpeedFactor = 1;
 +var settingsShown = false;
 +var labelsShown = true;
 +var intervals = [];
 +var timeouts = [];
 +var explodingSpeed = 0.05;
 +var explodeScale = 0.000001;
 +var XMLS = new XMLSerializer();
 +var svgElement;
 +var renderId;
 +
 +var render = function () {
 +
 + renderId = requestAnimationFrame(render);
 +
 +// comment in for automatic explosion
 +// explode(updateFactor());
 +
 +    var phi = 0.02 * rotationSpeedFactor;
 +
 +    if (xRotationEnabled) {
 +        scene.rotation.x += phi;
 +    }
 +    if (yRotationEnabled) {
 +        scene.rotation.y += phi;
 +    }
 +    if (zRotationEnabled) {
 +        scene.rotation.z += phi;
 +    }
 +
 +    control.update();
 +    renderer.render(scene, camera);
 +};
 +
 +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<scene.children.length; i++) {
 +        child = scene.children[i];
 +        if ( child.userData.hasOwnProperty("facetmaterial") ) {
 +            if (Array.isArray(child.userData.facetmaterial)) {
 +                for (var j=0; j<child.userData.facetmaterial.length; j++) {
 +                    child.userData.facetmaterial[j].opacity = opacity;
 +                }
 +            } else {
 +                child.userData.facetmaterial.opacity = opacity;
 +            }    
 +        }
 +    }
 +}
 +
 +function toggleDepthWrite(event) {
 +    depthwrite = event.currentTarget.checked;
 +    for (var i=0; i<scene.children.length; i++) {
 +        child = scene.children[i];
 +        if ( child.userData.hasOwnProperty("facetmaterial") ) {
 +            if (Array.isArray(child.userData.facetmaterial)) {
 +                for (var j=0; j<child.userData.facetmaterial.length; j++) {
 +                    child.userData.facetmaterial[j].depthWrite = depthwrite;
 +                }
 +            } else {
 +                child.userData.facetmaterial.depthWrite = depthWrite;
 +            }    
 +        }
 +    }
 +}
 +
 +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,0,0);
 +    camera.position.set(0,0,5);
 +    camera.up.set(0,1,0);
 +}
 +
 +function showSettings(event){
 +    document.getElementById('settings_0').style.visibility = 'visible';
 +    document.getElementById('showSettingsButton_0').style.visibility = 'hidden';
 +    document.getElementById('hideSettingsButton_0').style.visibility = 'visible';
 +    settingsShown = true;
 +}
 +
 +function hideSettings(event){
 +    document.getElementById('settings_0').style.visibility = 'hidden';
 +    document.getElementById('showSettingsButton_0').style.visibility = 'visible';
 +    document.getElementById('hideSettingsButton_0').style.visibility = 'hidden';
 +    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;
 +
 +    result[0] = ((a*(v*v+w*w)-u*(b*v+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*x*cos(angle)+sqrt(L)*(-c*v+b*w-w*y+v*z)*sin(angle))/L;
 +    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))/L;
 +
 +    return result;
 +}
 +
 +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<obj.userData.axes.length; j++) {
 +        rotateVertices(obj, j, scale);
 +    }
 +    update(obj);
 +    obj.userData.oldscale += scale;
 +    lookAtBarycenter(obj);
 +}
 +
 +function lookAtBarycenter(obj){
 +    control.target = barycenter(obj);
 +}
 +
 +function barycenter(obj) {
 +    var center = new THREE.Vector3(0,0,0);
 +    var points = obj.userData.points;
 +    for (var i=0; i<points.length; i++){
 +        center.add(points[i].vector);
 +    }
 +    center.divideScalar(points.length);
 +    return center;
 +}
 +
 +function rotateVertices(obj, edge, scale) {
 +    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<subtrees[edge].length; j++){
 +            var rotP = rotate(points[subtrees[edge][j]].vector, points[axes[edge][0]].vector,points[axes[edge][1]].vector, scale * (Math.PI - angles[edge]));
 +            points[subtrees[edge][j]].set(rotP[0],rotP[1],rotP[2]);
 +        }
 +    }
 +}
 +
 +function update(obj) {
 +   updateFacesPosition(obj);
 +   updateEdgesPosition(obj);
 +}
 +
 +if (foldables.length) {
 +    var settings = document.getElementById('settings_0');
 +    var foldDiv = document.createElement('div');
 +    foldDiv.id = 'fold_0';
 +    var title = document.createElement('strong');
 +    title.innerHTML = 'Fold';
 +    foldDiv.appendChild(title);
 +    foldDiv.className = 'group';
 +    for (var i=0; i<foldables.length; i++) {
 +        var range = document.createElement('input');
 +        range.type = 'range';
 +        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,settings.childNodes[0]);
 +}
 +
 +    
 +// ---------------------- EXPLOSION ------------------------------------------------
 +// ---------------------------------------------------------------------------------
 +
 +if (explodableModel) {
 +    for (var i=0; i<scene.children.length; i++) {
 +        obj = scene.children[i];
 +        if ( obj.userData.explodable ) {
 +            computeCentroid(obj);
 +        }
 +    }
 +    document.getElementById('explodeRange_0').oninput = triggerExplode;
 +    document.getElementById('explodeCheckbox_0').onchange = triggerAutomaticExplode;
 +    document.getElementById('explodingSpeedRange_0').oninput = setExplodingSpeed;
 +    explode(0.000001);
 +}
 +
 +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<scene.children.length; i++) {
 +        var obj = scene.children[i];
 +        if (obj.userData.hasOwnProperty("centroid")) { 
 +            var c = obj.userData.centroid;
 +            obj.position.set(c.x*factor, c.y*factor, c.z*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, 25));
 +}
 +
 +
 +function explodingInterval(){
 +    explodeScale += explodingSpeed;
 +    if (explodeScale <= 6){ 
 +        explode(explodeScale);
 +    }
 +    else{
 +        explode(6);
 +        explodeScale = 6;
 +        clearIntervals();
 +        timeouts.push(setTimeout(startUnexploding, 3000));
 +    }
 +    document.getElementById('explodeRange_0').value = explodeScale;
 +}
 +
 +
 +function startUnexploding(){
 +    intervals.push(setInterval(unexplodingInterval, 25));
 +}
 +
 +function unexplodingInterval(){
 +    explodeScale -= explodingSpeed;
 +    if (explodeScale >= 0){
 +        explode(explodeScale);
 +    }
 +    else {
 +        explode(0);
 +        explodeScale = 0;
 +        clearIntervals();
 +        timeouts.push(setTimeout(startExploding, 3000));
 +    }
 +    document.getElementById('explodeRange_0').value = explodeScale;
 +}
 +
 +function clearIntervals(){
 +    intervals.forEach(function(interval){
 +        clearInterval(interval);
 +    });
 +    intervals = [];
 +    timeouts.forEach(function(timeout){
 +        clearTimeout(timeout);
 +    });
 +    timeouts = [];
 +}
 +
 +// ---------------------- DISPLAY --------------------------------------------------
 +// ---------------------------------------------------------------------------------
 +
 +const objectTypeInnerHTMLs = { points: "Points", pointlabels: "Point labels", lines: "Edges", edgelabels: "Edge labels", faces: "Faces", arrowheads: "Arrow heads" };
 +const objectTypeVisible = {};
 +Object.assign(objectTypeVisible,modelContains);
 +const sortedObjectTypeKeys = Object.keys(objectTypeInnerHTMLs).sort();
 +const shownObjectTypesList = document.getElementById('shownObjectTypesList_0');
 +
 +function setVisibility(bool,objname) {
 +    for (var i=0; i<scene.children.length; 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;
 +    if (name == "faces") {
 +        setVisibility(checked,"frontfaces");
 +        setVisibility(checked,"backfaces");
 +    } else {
 +        setVisibility(checked,name);
 +    }
 +}
 +
 +for (var i=0; i<sortedObjectTypeKeys.length; i++){
 +    var key = sortedObjectTypeKeys[i];
 +    if (modelContains[key]) {
 +        var objTypeNode = document.createElement('span');
 +        objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '<br>';
 +        var checkbox = document.createElement('input');
 +        checkbox.type = 'checkbox';
 +        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('shownObjectsList_0');
 +for (var i=0; i<scene.children.length; i++){
 +    obj = scene.children[i];
 +    var objNode = document.createElement('span');
 +    objNode.innerHTML = obj.name + '<br>';
 +    var checkbox = document.createElement('input');
 +    checkbox.type = 'checkbox';
 +    checkbox.checked = true;
 +    checkbox.name = String(i);
 +    checkbox.onchange = toggleObjectVisibility;
 +    shownObjectsList.appendChild(checkbox);
 +    shownObjectsList.appendChild(objNode);
 +}
 +
 +// ---------------------- SVG ------------------------------------------------------
 +// ---------------------------------------------------------------------------------
 +
 +function takeSvgScreenshot() {
 +    if (objectTypeVisible["pointlabels"]) {
 +        setVisibility(false,"pointlabels");
 +    }
 +    if (objectTypeVisible["edgelabels"]) {
 +        setVisibility(false,"edgelabels");
 +    }
 +    svgRenderer.render(scene,camera);
 +    svgElement = XMLS.serializeToString(svgRenderer.domElement);
 +    
 +    if (objectTypeVisible["pointlabels"]) {
 +        setVisibility(true,"pointlabels");
 +    }
 +    if (objectTypeVisible["edgelabels"]) {
 +        setVisibility(true,"edgelabels");
 +    }
 +
 +    if (document.getElementById('tab_0').checked){
 +        //show in new tab
 +        var myWindow = window.open("","");
 +        myWindow.document.body.innerHTML = svgElement;
 +    } else{
 +        // download svg file 
 +        download("screenshot.svg", svgElement);
 +    }
 +}
 +
 +function download(filename, text) {
 +    var element = document.createElement('a');
 +    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
 +    element.setAttribute('download', filename);
 +
 +    element.style.display = 'none';
 +    document.body.appendChild(element);
 +
 +    element.click();
 +
 +    document.body.removeChild(element);
 +}
 +
 +
 +document.getElementById('transparencyRange_0').oninput = changeTransparency;
 +document.getElementById('depthWriteCheckbox_0').onchange = toggleDepthWrite;
 +document.getElementById('changeRotationX_0').onchange = changeRotationX;
 +document.getElementById('changeRotationY_0').onchange = changeRotationY;
 +document.getElementById('changeRotationZ_0').onchange = changeRotationZ;
 +document.getElementById('resetButton_0').onclick = resetScene;
 +document.getElementById('rotationSpeedRange_0').oninput = changeRotationSpeedFactor;
 +document.getElementById('takeScreenshot_0').onclick = takeSvgScreenshot;
 +document.getElementById('showSettingsButton_0').onclick = showSettings;
 +document.getElementById('hideSettingsButton_0').onclick = hideSettings;
 +
 +
 +// ------------------ SHORTCUTS --------------------------------------------
 +// -------------------------------------------------------------------------
 +
 +/**
 + * http://www.openjs.com/scripts/events/keyboard_shortcuts/
 + * Version : 2.01.B
 + * By Binny V A
 + * License : BSD
 + */
 +shortcut = {
 + 'all_shortcuts':{},//All the shortcuts are stored in this array
 + 'add': function(shortcut_combination,callback,opt) {
 + //Provide a set of default options
 + var default_options = {
 + 'type':'keydown',
 + 'propagate':false,
 + 'disable_in_input':false,
 + 'target':document,
 + 'keycode':false
 + }
 + if(!opt) opt = default_options;
 + else {
 + for(var dfo in default_options) {
 + if(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];
 + }
 + }
 +
 + var ele = opt.target;
 + if(typeof opt.target == 'string') ele = document.getElementById(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['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields
 + 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 == 'INPUT' || element.tagName == 'TEXTAREA') return;
 + }
 +
 + //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 the user presses , when the type is onkeydown
 + if(code == 190) character="."; //If the user presses , when the type is onkeydown
 +
 + 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 = {
 + "`":"~",
 + "1":"!",
 + "2":"@",
 + "3":"#",
 + "4":"$",
 + "5":"%",
 + "6":"^",
 + "7":"&",
 + "8":"*",
 + "9":"(",
 + "0":")",
 + "-":"_",
 + "=":"+",
 + ";":":",
 + "'":"\"",
 + ",":"<",
 + ".":">",
 + "/":"?",
 + "\\":"|"
 + }
 + //Special Keys - and their codes
 + var special_keys = {
 + 'esc':27,
 + 'escape':27,
 + 'tab':9,
 + 'space':32,
 + 'return':13,
 + 'enter':13,
 + 'backspace':8,
 +
 + 'scrolllock':145,
 + 'scroll_lock':145,
 + 'scroll':145,
 + 'capslock':20,
 + 'caps_lock':20,
 + 'caps':20,
 + 'numlock':144,
 + 'num_lock':144,
 + 'num':144,
 +
 + 'pause':19,
 + 'break':19,
 +
 + 'insert':45,
 + 'home':36,
 + 'delete':46,
 + 'end':35,
 +
 + 'pageup':33,
 + 'page_up':33,
 + 'pu':33,
 +
 + 'pagedown':34,
 + 'page_down':34,
 + 'pd':34,
 +
 + 'left':37,
 + 'up':38,
 + 'right':39,
 + 'down':40,
 +
 + 'f1':112,
 + 'f2':113,
 + 'f3':114,
 + 'f4':115,
 + 'f5':116,
 + 'f6':117,
 + 'f7':118,
 + 'f8':119,
 + 'f9':120,
 + 'f10':121,
 + 'f11':122,
 + 'f12':123
 + }
 +
 + var modifiers = { 
 + shift: { wanted:false, pressed:false},
 + ctrl : { wanted:false, pressed:false},
 + alt  : { wanted:false, pressed:false},
 + meta : { wanted:false, pressed:false} //Meta is Mac specific
 + };
 +                        
 + if(e.ctrlKey) modifiers.ctrl.pressed = true;
 + if(e.shiftKey) modifiers.shift.pressed = true;
 + if(e.altKey) modifiers.alt.pressed = true;
 + if(e.metaKey)   modifiers.meta.pressed = true;
 +                        
 + for(var i=0; k=keys[i],i<keys.length; i++) {
 + //Modifiers
 + if(k == 'ctrl' || k == 'control') {
 + kp++;
 + modifiers.ctrl.wanted = true;
 +
 + } else if(k == 'shift') {
 + kp++;
 + modifiers.shift.wanted = true;
 +
 + } else if(k == 'alt') {
 + kp++;
 + modifiers.alt.wanted = true;
 + } else if(k == 'meta') {
 + 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['keycode']) {
 + if(opt['keycode'] == code) kp++;
 +
 + } 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['propagate']) { //Stop the event
 + //e.cancelBubble is supported by IE - this will kill the bubbling process.
 + e.cancelBubble = true;
 + e.returnValue = false;
 +
 + //e.stopPropagation works in Firefox.
 + if (e.stopPropagation) {
 + e.stopPropagation();
 + e.preventDefault();
 + }
 + return false;
 + }
 + }
 + }
 + this.all_shortcuts[shortcut_combination] = {
 + 'callback':func, 
 + 'target':ele, 
 + 'event': opt['type']
 + };
 + //Attach the function with the event
 + if(ele.addEventListener) ele.addEventListener(opt['type'], func, false);
 + else if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);
 + else ele['on'+opt['type']] = func;
 + },
 +
 + //Remove the shortcut - just specify the shortcut and I will remove the binding
 + 'remove':function(shortcut_combination) {
 + shortcut_combination = shortcut_combination.toLowerCase();
 + var binding = this.all_shortcuts[shortcut_combination];
 + delete(this.all_shortcuts[shortcut_combination])
 + if(!binding) return;
 + var type = binding['event'];
 + var ele = binding['target'];
 + var callback = binding['callback'];
 +
 + if(ele.detachEvent) ele.detachEvent('on'+type, callback);
 + else if(ele.removeEventListener) ele.removeEventListener(type, callback, false);
 + else ele['on'+type] = false;
 + }
 +}
 +
 +shortcut.add("Alt+Left",function() {
 + var event = new Event('click');
 + if (settingsShown){
 + document.getElementById('hideSettingsButton_0').dispatchEvent(event);
 + } else {
 + document.getElementById('showSettingsButton_0').dispatchEvent(event);
 + }
 +});
 +
 +
 +// COMMON_CODE_BLOCK_END
 +
 +});});
 +      </script>
 +   </body>
 +</html>
 +</HTML>
 +For more information on visualizing simplicial complex, see the section below.
 +
 +''%%polymake%%'' can compute the Hasse diagram of a simplicial complex (watch out, this gets really large for large complexes!). To print all the faces of the complex together with their rank in the face lattice, do this:
 +
 +<code perl>
 +> print $s->HASSE_DIAGRAM->DECORATION;
 +({-1} 4)
 +({0 1} 2)
 +({1 2 3} 3)
 +({0} 1)
 +({1} 1)
 +({1 2} 2)
 +({1 3} 2)
 +({2 3} 2)
 +({} 0)
 +({2} 1)
 +({3} 1)
 +</code>
 +The first entry of each pair denotes the face, the second is the rank. The ''%%{-1}%%''-node is a dummy representing the whole complex. the ''%%{}%%''-node is the empty face. If you want to look at a pretty graph representation, try the visualization:
 +
 +<code perl>
 +> $s->VISUAL_FACE_LATTICE;
 +</code>
 +{{ tutorials:release:4.11:apps_topaz:output_0.svg }}
 +=== Using clients ===
 +
 +There are several clients that construct common simplicial complexes (for a comprehensive list, see the [[documentation:latest:topaz|topaz documentation]]). An example is the torus client:
 +
 +<code perl>
 +> $t = torus();
 +</code>
 +Of course, ''%%polymake%%'' can compute the reduced integer homology groups of a simplicial complex, so we can convice ourselves this is a torus:
 +
 +<code perl>
 +> print $t->MANIFOLD;
 +true
 +> print $t->HOMOLOGY;
 +({} 0)
 +({} 2)
 +({} 1)
 +</code>
 +The ''%%i%%''-th line represents the $i$-th homology module. The curly braces contain torsion coefficients with multiplicity, the second pair entry denotes the Betti number. The empty curly braces indicate that ''%%$t%%'' is torsion-free. You can see a non-empty torsion group here (using the ''%%rows_numbered%%'' client for a pretty print with the corresponding dimensions):
 +
 +<code perl>
 +> print rows_numbered( real_projective_plane()->HOMOLOGY );
 +0:{} 0
 +1:{(2 1)} 0
 +2:{} 0
 +</code>
 +As expected, the first homology group has torsion coefficient ''%%2%%'' with multiplicity ''%%1%%'' and all Betti numbers are zero.
 +
 +=== As boundary complex ===
 +
 +If your complex is a pseudo-manifold, you can obtain a new complex from its boundary. For example, this produces a triangulation of the $2$-sphere:
 +
 +<code perl>
 +> $bs = simplex(3)->BOUNDARY;
 +> print $bs->SPHERE;
 +true
 +</code>
 +=== Triangulating polytopes ===
 +
 +The triangulation of a polytope is a simplicial complex, too. The ''%%TRIANGULATION%%'' gets stored in a property of the polytope. We use the ''%%cube%%'' client from the ''%%polytope%%'' application to demonstrate:
 +
 +<code perl>
 +> $c = polytope::cube(3);
 +> $tc = $c->TRIANGULATION;
 +> print $tc->FACETS;
 +{0 1 2 4}
 +{1 2 3 4}
 +{1 3 4 5}
 +{2 3 4 6}
 +{3 4 5 6}
 +{3 5 6 7}
 +</code>
 +==== Geometric realizations ====
 +
 +The ''%%topaz%%'' application is primarily designed to deal with abstract simplicial complexes that do not come with coordinates for an embedding in euclidean space. There is a special object subtype named ''%%GeometricSimplicialComplex%%'' that has extra properties for dealing with coodinates.
 +
 +You can pass the coordinates to the constructor. Take care to choose an embedding without crossings!
 +
 +<code perl>
 +> $s = new GeometricSimplicialComplex(INPUT_FACES=>[[0],[0,1],[1,2,3]], COORDINATES=>[[1,0],[1,1],[0,2],[2,2]]);
 +</code>
 +Some clients produce complexes with geometric realization...
 +
 +<code perl>
 +> $b = ball(3);
 +> # print a dense representation of the sparse matrix
 +> print dense( $b->COORDINATES );
 +0 0 0
 +1 0 0
 +0 1 0
 +0 0 1
 +</code>
 +...some others provide the option ''%%geometric_realization%%'' so you can decide whether to invest the extra computing time.
 +
 +<code perl>
 +> $bs = barycentric_subdivision($b,geometric_realization=>1);
 +</code>
 +Again, see the [[documentation:latest:topaz|topaz documentation]] for a comprehensive list.
 +
 +==== Visualization ====
 +
 +Visualization of simplicial complexes uses the ''%%VISUAL%%'' property. Check out
 +
 +<code perl>
 +> help 'objects/SimplicialComplex/methods/Visualization/VISUAL';
 +VISUAL(Options) -> Visual::SimplicialComplex
 +
 + Visualizes the complex.
 +
 + If __G_DIM__ < 4, the __GRAPH__ and the facets
 + are visualized using the __COORDINATES__.
 +
 + Otherwise, the spring embedder and the __GRAPH__ are used to
 + produce coordinates for the visualization.
 +
 + If __JavaView__ is used to visualize the complex, all faces of
 + one facet build a geometry in the jvx-file, so you may use
 + __Method -> Effect -> Explode Group of Geometries__ in the JavaView menu.
 +
 +Options: 
 +  __mixed_graph__ => Bool use the __MIXED_GRAPH__ for the spring embedder
 +  __seed__ => Int random seed value for the string embedder
 +
 +Options:  Attributes modifying the appearance of filled polygons.
 +  __FacetColor__ => Color filling color of the polygon
 +  __FacetTransparency__ => Float transparency factor of the polygon between 0 (opaque) and 1 (completely translucent)
 +  __FacetStyle__ => String if set to "hidden", the inner area of the polygon is not rendered
 +  __EdgeColor__ => Color color of the boundary lines
 +  __EdgeThickness__ => Float scaling factor for the thickness of the boundary lines
 +  __EdgeStyle__ => String if set to "hidden", the boundary lines are not rendered
 +  __Title__ => String the name of the drawing
 +  __Name__ => String the name of this visual object in the drawing
 +  __Hidden__ => Bool if set to true, the visual object is not rendered
 +    (useful for interactive visualization programs allowing for switching details on and off)
 +  __PointLabels__ => String if set to "hidden", no point labels are displayed
 +  __VertexLabels__ => String alias for PointLabels
 +  __PointColor__ => Flexible<Color> color of the spheres or rectangles representing the points
 +  __VertexColor__ => Flexible<Color> alias for PointColor
 +  __PointThickness__ => Flexible<Float> scaling factor for the size of the spheres or rectangles representing the points
 +  __VertexThickness__ => Flexible<Float> alias for PointThickness
 +  __PointBorderColor__ => Flexible<Color> color of the border line of rectangles representing the points
 +  __VertexBorderColor__ => Flexible<Float> alias for PointBorderColor
 +  __PointBorderThickness__ => Flexible<Float> scaling factor for the thickness of the border line of rectangles representing the points
 +  __VertexBorderThickness__ => Flexible<Float> alias for PointBorderThickness
 +  __PointStyle__ => Flexible<String> if set to "hidden", neither point nor its label is rendered
 +  __VertexStyle__ => Flexible<String> alias for PointStyle
 +  __ViewPoint__ => Vector<Float> ViewPoint for Sketch visualization
 +  __ViewDirection__ => Vector<Float> ViewDirection for Sketch visualization
 +  __ViewUp__ => Vector<Float> ViewUp for Sketch visualization
 +  __Scale__ => Float scale for Sketch visualization
 +  __LabelAlignment__ => Flexible<String> Defines the alignment of the vertex labels: left, right or center
 +
 +Options:  Attributes modifying the appearance of graphs
 +  __Coord__ => Matrix<Float> 2-d or 3-d coordinates of the nodes.
 +    If not specified, a random embedding is generated using a pseudo-physical spring model
 +  __NodeColor__ => Flexible<RGB> alias for PointColor
 +  __NodeThickness__ => Flexible<Float> alias for PointThickness
 +  __NodeBorderColor__ => Flexible<RGB> alias for PointBorderColor
 +  __NodeBorderThickness__ => Flexible<Float> alias for PointBorderThickness
 +  __NodeStyle__ => Flexible<String> alias for PointStyle
 +  __NodeLabels__ => String alias for PointLabels
 +  __ArrowStyle__ => Flexible<Int> How to draw directed edges: 0 (like undirected), 1 (with an arrow pointing towards the edge),
 +    or -1 (with an arrow pointing against the edge).  Default is 1 for directed graphs and lattices.
 +  __EdgeColor__ => Flexible<Color> color of the lines representing the edges
 +  __EdgeThickness__ => Flexible<Float> scaling factor for the thickness of the lines representing the edges
 +  __EdgeLabels__ => EdgeMap<String> textual labels to be placed along the edges
 +  __EdgeStyle__ => Flexible<String> if set to "hidden", neither the edge nor its label is rendered
 +  __Title__ => String the name of the drawing
 +  __Name__ => String the name of this visual object in the drawing
 +  __Hidden__ => Bool if set to true, the visual object is not rendered
 +    (useful for interactive visualization programs allowing for switching details on and off)
 +  __PointLabels__ => String if set to "hidden", no point labels are displayed
 +  __VertexLabels__ => String alias for PointLabels
 +  __PointColor__ => Flexible<Color> color of the spheres or rectangles representing the points
 +  __VertexColor__ => Flexible<Color> alias for PointColor
 +  __PointThickness__ => Flexible<Float> scaling factor for the size of the spheres or rectangles representing the points
 +  __VertexThickness__ => Flexible<Float> alias for PointThickness
 +  __PointBorderColor__ => Flexible<Color> color of the border line of rectangles representing the points
 +  __VertexBorderColor__ => Flexible<Float> alias for PointBorderColor
 +  __PointBorderThickness__ => Flexible<Float> scaling factor for the thickness of the border line of rectangles representing the points
 +  __VertexBorderThickness__ => Flexible<Float> alias for PointBorderThickness
 +  __PointStyle__ => Flexible<String> if set to "hidden", neither point nor its label is rendered
 +  __VertexStyle__ => Flexible<String> alias for PointStyle
 +  __ViewPoint__ => Vector<Float> ViewPoint for Sketch visualization
 +  __ViewDirection__ => Vector<Float> ViewDirection for Sketch visualization
 +  __ViewUp__ => Vector<Float> ViewUp for Sketch visualization
 +  __Scale__ => Float scale for Sketch visualization
 +  __LabelAlignment__ => Flexible<String> Defines the alignment of the vertex labels: left, right or center
 +
 +Returns Visual::SimplicialComplex 
 +
 +</code>
 +{{:tutorials:release:4.11:apps_topaz:ball_triang.png}} for a list of available options and this [[visual_tutorial|tutorial]] for a general intro to visualization in polymake.
 +
 +If your complex is of dimension three or lower, you can visualize a geometric realization together with the ''%%GRAPH%%'' of the complex using the ''%%VISUAL%%'' property. Note that if your complex is not a ''%%GeometricSimplicialComplex%%'', ''%%polymake%%'' will use the spring embedder to find an embedding of the graph of the complex, which is not guaranteed to result in an intersection-free visualization.
 +
 +<code perl>
 +> $bs->VISUAL;
 +</code>
 +<HTML>
 +<!--
 +polymake for knusper
 +Wed Mar  2 22:30:10 2022
 +bs
 +-->
 +
 +
 +<html>
 +   <head>
 +      <meta charset=utf-8>
 +      <title>bs</title>
 +      <style>
 +/*
 +// COMMON_CODE_BLOCK_BEGIN
 +*/
 +         html {overflow: scroll;}
 +         strong{font-size: 18px;}
 +         canvas { z-index: 8; }
 +         input[type='radio'] {margin-left:0;}
 +         input[type='checkbox'] {margin-right:7px; margin-left: 0px; padding-left:0px;}
 +         .group{padding-bottom: 15px;}
 +         .settings * {z-index: 11; }
 +         .settings{z-index: 10; font-family: Arial, Helvetica, sans-serif; margin-left: 30px; visibility: hidden; width: 14em; height: 96%; border: solid 1px silver; padding: 2px; overflow-y: scroll; box-sizing: border-box; background-color: white; position: absolute;}
 +         .indented{margin-left: 20px; margin-top: 10px; padding-bottom: 0px;} 
 +         .shownObjectsList{overflow: auto; max-width: 150px; max-height: 150px;}
 +         .showSettingsButton{visibility: visible; z-index: 12; position: absolute }
 +         .hideSettingsButton{visibility: hidden; z-index: 12; position: absolute; opacity: 0.5}
 +         button{margin-left: 0; margin-top: 10px}
 +         img{cursor: pointer;}
 +         .suboption{padding-top: 15px;}
 +         #model80588152985 { width: 100%; height: 100%; }
 +         .threejs_container { width: 100%; height: 75vh;}
 +         .settings{max-height: 74vh} 
 +         input[type=range] {
 +           -webkit-appearance: none;
 +           padding:0; 
 +           width:90%; 
 +           margin-left: auto;
 +           margin-right: auto;
 +           margin-top: 15px;
 +           margin-bottom: 15px;
 +           display: block;
 +         }
 +         input[type=range]:focus {
 +           outline: none;
 +         }
 +         input[type=range]::-webkit-slider-runnable-track {
 +           height: 4px;
 +           cursor: pointer;
 +           animate: 0.2s;
 +           box-shadow: 0px 0px 0px #000000;
 +           background: #E3E3E3;
 +           border-radius: 0px;
 +           border: 0px solid #000000;
 +         }
 +         input[type=range]::-webkit-slider-thumb {
 +           box-shadow: 1px 1px 2px #B8B8B8;
 +           border: 1px solid #ABABAB;
 +           height: 13px;
 +           width: 25px;
 +           border-radius: 20px;
 +           background: #E0E0E0;
 +           cursor: pointer;
 +           -webkit-appearance: none;
 +           margin-top: -5px;
 +         }
 +         input[type=range]:focus::-webkit-slider-runnable-track {
 +           background: #E3E3E3;
 +         }
 +         input[type=range]::-moz-range-track {
 +           height: 4px;
 +           cursor: pointer;
 +           animate: 0.2s;
 +           box-shadow: 0px 0px 0px #000000;
 +           background: #E3E3E3;
 +           border-radius: 0px;
 +           border: 0px solid #000000;
 +         }
 +         input[type=range]::-moz-range-thumb {
 +           box-shadow: 1px 1px 2px #B8B8B8;
 +           border: 1px solid #ABABAB;
 +           height: 13px;
 +           width: 25px;
 +           border-radius: 20px;
 +           background: #E0E0E0;
 +           cursor: pointer;
 +         }
 +         input[type=range]::-ms-track {
 +           height: 4px;
 +           cursor: pointer;
 +           animate: 0.2s;
 +           background: transparent;
 +           border-color: transparent;
 +           color: transparent;
 +         }
 +         input[type=range]::-ms-fill-lower {
 +           background: #E3E3E3;
 +           border: 0px solid #000000;
 +           border-radius: 0px;
 +           box-shadow: 0px 0px 0px #000000;
 +         }
 +         input[type=range]::-ms-fill-upper {
 +           background: #E3E3E3;
 +           border: 0px solid #000000;
 +           border-radius: 0px;
 +           box-shadow: 0px 0px 0px #000000;
 +         }
 +         input[type=range]::-ms-thumb {
 +           box-shadow: 1px 1px 2px #B8B8B8;
 +           border: 1px solid #ABABAB;
 +           height: 13px;
 +           width: 25px;
 +           border-radius: 20px;
 +           background: #E0E0E0;
 +           cursor: pointer;
 +         }
 +         input[type=range]:focus::-ms-fill-lower {
 +           background: #E3E3E3;
 +         }
 +         input[type=range]:focus::-ms-fill-upper {
 +           background: #E3E3E3;
 +         }
 +/*
 +// COMMON_CODE_BLOCK_END
 +*/
 + </style>
 +   </head>
 +<body>
 +   <div class='threejs_container'>
 + <div id='settings_1' class='settings'>
 + <div class=group id='explode_1'>
 + <strong>Explode</strong>
 + <input id='explodeRange_1' type='range' min='0.00001' max=6 step=0.01 value=0.00001>
 + <div class=indented><input id='explodeCheckbox_1' type='checkbox'>Automatic explosion</div>
 + <div class=suboption>Exploding speed</div>
 + <input id='explodingSpeedRange_1' type='range' min=0 max=0.5 step=0.001 value=0.05>
 + </div>
 +
 + <div class=group id='transparency_1' class='transparency'>
 + <strong>Transparency</strong>
 + <input id='transparencyRange_1' type='range' min=0 max=1 step=0.01 value=0>
 +            <div class=indented><input id='depthWriteCheckbox_1' type='checkbox'>depthWrite</div>
 + </div>
 +
 + <div class=group id='rotation_1'>
 + <strong>Rotation</strong>
 + <div class=indented>
 + <div><input type='checkbox' id='changeRotationX_1'> x-axis</div>
 + <div><input type='checkbox' id='changeRotationY_1'> y-axis</div>
 + <div><input type='checkbox' id='changeRotationZ_1'> z-axis</div>
 + <button id='resetButton_1'>Reset</button>
 + </div>
 +
 + <div class=suboption>Rotation speed</div>
 + <input id='rotationSpeedRange_1' type='range' min=0 max=5 step=0.01 value=2>
 + </div>
 +
 +
 + <div class=group id='display_1'>
 + <strong>Display</strong>
 + <div class=indented>
 + <div id='shownObjectTypesList_1' class='shownObjectsList'></div>
 + </div>
 + <div class=suboption>Objects</div>
 + <div class=indented>
 +    <div id='shownObjectsList_1' class='shownObjectsList'></div>
 + </div>
 + </div>
 +         
 +         <div class=group id='camera_1'>
 +            <strong>Camera</strong>
 +            <div class=indented>
 +               <form>
 +                  <select id="cameraType_1">
 +                     <option value='perspective' selected> Perspective<br></option>
 +                     <option value='orthographic' > Orthographic<br></option>
 +                  </select>
 +               </form>
 +            </div>
 +         </div>
 +
 + <div class=group id='svg_1'>
 + <strong>SVG</strong>
 + <div class=indented>
 + <form>
 + <input type="radio" name='screenshotMode' value='download' id='download_1' checked> Download<br>
 + <input type="radio" name='screenshotMode' value='tab' id='tab_1' > New tab<br>
 + </form>
 + <button id='takeScreenshot_1'>Screenshot</button>
 + </div>
 + </div>
 +
 + </div> <!-- end of settings -->
 + <img id='hideSettingsButton_1' class='hideSettingsButton' src='/kernelspecs/r118/polymake/close.svg' width=20px">
 + <img id='showSettingsButton_1' class='showSettingsButton' src='/kernelspecs/r118/polymake/menu.svg' width=20px">
 +<div id="model80588152985"></div>
 +</div>
 +   <script>
 +    requirejs.config({
 +      paths: {
 +        three: '/kernelspecs/r118/polymake/three',
 +        TrackballControls: '/kernelspecs/r118/polymake/TrackballControls',
 +        OrbitControls: '/kernelspecs/r118/polymake/OrbitControls',
 +        Projector: '/kernelspecs/r118/polymake/Projector',
 +        SVGRenderer: '/kernelspecs/r118/polymake/SVGRenderer',
 +        WEBGL: '/kernelspecs/r118/polymake/WebGL',
 +      },
 +      shim: {
 +        'three': { exports: 'THREE'},
 +        'SVGRenderer': { deps: [ 'three' ], exports: 'THREE.SVGRenderer' },
 +        'WEBGL': { deps: [ 'three' ], exports: 'THREE.WEBGL' },
 +        'Projector': { deps: [ 'three' ], exports: 'THREE.Projector' },
 +        'TrackballControls': { deps: [ 'three' ], exports: 'THREE.TrackballControls' },
 +        'OrbitControls': { deps: [ 'three' ], exports: 'THREE.OrbitControls' },
 +      }
 +    });
 +    
 +    require(['three'],function(THREE){
 +        window.THREE = THREE;
 +      require(['TrackballControls', 'OrbitControls', 'Projector', 'SVGRenderer', 'WEBGL'],
 +               function(TrackballControls, OrbitControls, Projector, SVGRenderer, WEBGL) {
 +    THREE.TrackballControls = TrackballControls;
 +    THREE.OrbitControls = OrbitControls;
 +    THREE.Projector = Projector;
 +    THREE.SVGRenderer = SVGRenderer;
 +    THREE.WEBGL = WEBGL;
 +
 +// COMMON_CODE_BLOCK_BEGIN
 +
 +const intervalLength = 25; // for automatic animations
 +const explodableModel = true; 
 +const modelContains = { points: false, pointlabels: false, lines: false, edgelabels: false, faces: false, arrowheads: false };
 +const foldables = [];
 +
 +var three = document.getElementById("model80588152985");
 +var scene = new THREE.Scene();
 +var renderer = new THREE.WebGLRenderer( { antialias: true } );
 +var svgRenderer = new THREE.SVGRenderer( { antialias: true } );
 +renderer.setPixelRatio( window.devicePixelRatio );
 +renderer.setClearColor(0xFFFFFF, 1);
 +svgRenderer.setClearColor(0xFFFFFF, 1);
 +three.appendChild(renderer.domElement);
 +
 +var frustumSize = 4;
 +var cameras = [new THREE.PerspectiveCamera(75, 1, 0.1, 1000), new THREE.OrthographicCamera()];
 +cameras.forEach(function(cam) {
 +    cam.position.set(0, 0, 5);
 +    cam.lookAt(0, 0, 0);  
 +    cam.up.set(0, 1, 0);         
 +});
 +var controls = [new THREE.TrackballControls(cameras[0], three), new THREE.OrbitControls(cameras[1], three)];
 +var camera, control;
 +
 +controls[0].zoomSpeed = 0.2;
 +controls[0].rotateSpeed = 4;
 +
 +
 +// class to allow move points together with labels and spheres
 +var PMPoint = function (x,y,z) {
 +   this.vector = new THREE.Vector3(x,y,z);
 +   this.sprite = null;
 +   this.sphere = null;
 +}
 +PMPoint.prototype.addLabel = function(labelsprite) {
 +   this.sprite = labelsprite;
 +   this.sprite.position.copy(this.vector);
 +}
 +PMPoint.prototype.addSphere = function(spheremesh) {
 +   this.sphere = spheremesh;
 +   this.sphere.position.copy(this.vector);
 +}
 +PMPoint.prototype.set = function(x,y,z) {
 +   this.vector.set(x,y,z);
 +   if (this.sprite) {
 +      this.sprite.position.copy(this.vector);
 +   }
 +   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 = document.querySelector('#model80588152985');
 +
 +// 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("cancelled frame "+renderId);
 +      }
 +   });
 +});
 +
 +// configuration of the observer:
 +var config = { childList: true, characterData: true }
 +
 +// pass in the target node, as well as the observer options
 +while (target) {
 +   if (target.className=="output") {
 +      observer.observe(target, config);
 +      break;
 +   }
 +   target = target.parentNode;
 +}
 +
 +// COMMON_CODE_BLOCK_END
 +
 +var obj0 = new THREE.Object3D();
 +obj0.name = "GRAPH of bs";
 +obj0.userData.explodable = 0;
 +obj0.userData.points = [];
 +obj0.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj0.userData.points.push(new PMPoint(0.333333, 0.333333, 0));
 +obj0.userData.points.push(new PMPoint(0.333333, 0, 0.333333));
 +obj0.userData.points.push(new PMPoint(0, 0.333333, 0.333333));
 +obj0.userData.points.push(new PMPoint(0.333333, 0.333333, 0.333333));
 +obj0.userData.points.push(new PMPoint(0.5, 0, 0));
 +obj0.userData.points.push(new PMPoint(0, 0.5, 0));
 +obj0.userData.points.push(new PMPoint(0.5, 0.5, 0));
 +obj0.userData.points.push(new PMPoint(0, 0, 0.5));
 +obj0.userData.points.push(new PMPoint(0.5, 0, 0.5));
 +obj0.userData.points.push(new PMPoint(0, 0.5, 0.5));
 +obj0.userData.points.push(new PMPoint(0, 0, 0));
 +obj0.userData.points.push(new PMPoint(1, 0, 0));
 +obj0.userData.points.push(new PMPoint(0, 1, 0));
 +obj0.userData.points.push(new PMPoint(0, 0, 1));
 +
 +obj0.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj0.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide, transparent: false } );
 +obj0.userData.pointlabels = ["{0 1 2 3}", "{0 1 2}", "{0 1 3}", "{0 2 3}", "{1 2 3}", "{0 1}", "{0 2}", "{1 2}", "{0 3}", "{1 3}", "{2 3}", "{0}", "{1}", "{2}", "{3}"];
 +obj0.userData.edgeindices = [1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 5, 1, 5, 2, 6, 0, 6, 1, 6, 3, 7, 0, 7, 1, 7, 4, 8, 0, 8, 2, 8, 3, 9, 0, 9, 2, 9, 4, 10, 0, 10, 3, 10, 4, 11, 0, 11, 1, 11, 2, 11, 3, 11, 5, 11, 6, 11, 8, 12, 0, 12, 1, 12, 2, 12, 4, 12, 5, 12, 7, 12, 9, 13, 0, 13, 1, 13, 3, 13, 4, 13, 6, 13, 7, 13, 10, 14, 0, 14, 2, 14, 3, 14, 4, 14, 8, 14, 9, 14, 10];
 +   <!-- Edge style -->
 +obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +init_object(obj0);
 +scene.add(obj0);
 +
 +var obj1 = new THREE.Object3D();
 +obj1.name = "{0 1 2 3} {0 1 2} {0 1} {0}";
 +obj1.userData.explodable = 1;
 +obj1.userData.points = [];
 +obj1.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj1.userData.points.push(new PMPoint(0.333333, 0.333333, 0));
 +obj1.userData.points.push(new PMPoint(0.5, 0, 0));
 +obj1.userData.points.push(new PMPoint(0, 0, 0));
 +
 +obj1.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj1.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj1.userData.pointlabels = ["{0 1 2 3}", "{0 1 2}", "{0 1}", "{0}"];
 +obj1.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj1.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj1.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj1.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj1);
 +scene.add(obj1);
 +
 +var obj2 = new THREE.Object3D();
 +obj2.name = "{0 1 2 3} {0 1 3} {0 1} {0}";
 +obj2.userData.explodable = 1;
 +obj2.userData.points = [];
 +obj2.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj2.userData.points.push(new PMPoint(0.333333, 0, 0.333333));
 +obj2.userData.points.push(new PMPoint(0.5, 0, 0));
 +obj2.userData.points.push(new PMPoint(0, 0, 0));
 +
 +obj2.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj2.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj2.userData.pointlabels = ["{0 1 2 3}", "{0 1 3}", "{0 1}", "{0}"];
 +obj2.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj2.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj2.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj2.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj2);
 +scene.add(obj2);
 +
 +var obj3 = new THREE.Object3D();
 +obj3.name = "{0 1 2 3} {0 1 2} {0 2} {0}";
 +obj3.userData.explodable = 1;
 +obj3.userData.points = [];
 +obj3.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj3.userData.points.push(new PMPoint(0.333333, 0.333333, 0));
 +obj3.userData.points.push(new PMPoint(0, 0.5, 0));
 +obj3.userData.points.push(new PMPoint(0, 0, 0));
 +
 +obj3.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj3.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj3.userData.pointlabels = ["{0 1 2 3}", "{0 1 2}", "{0 2}", "{0}"];
 +obj3.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj3.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj3.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj3.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj3);
 +scene.add(obj3);
 +
 +var obj4 = new THREE.Object3D();
 +obj4.name = "{0 1 2 3} {0 2 3} {0 2} {0}";
 +obj4.userData.explodable = 1;
 +obj4.userData.points = [];
 +obj4.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj4.userData.points.push(new PMPoint(0, 0.333333, 0.333333));
 +obj4.userData.points.push(new PMPoint(0, 0.5, 0));
 +obj4.userData.points.push(new PMPoint(0, 0, 0));
 +
 +obj4.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj4.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj4.userData.pointlabels = ["{0 1 2 3}", "{0 2 3}", "{0 2}", "{0}"];
 +obj4.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj4.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj4.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj4.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj4);
 +scene.add(obj4);
 +
 +var obj5 = new THREE.Object3D();
 +obj5.name = "{0 1 2 3} {0 1 3} {0 3} {0}";
 +obj5.userData.explodable = 1;
 +obj5.userData.points = [];
 +obj5.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj5.userData.points.push(new PMPoint(0.333333, 0, 0.333333));
 +obj5.userData.points.push(new PMPoint(0, 0, 0.5));
 +obj5.userData.points.push(new PMPoint(0, 0, 0));
 +
 +obj5.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj5.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj5.userData.pointlabels = ["{0 1 2 3}", "{0 1 3}", "{0 3}", "{0}"];
 +obj5.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj5.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj5.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj5.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj5);
 +scene.add(obj5);
 +
 +var obj6 = new THREE.Object3D();
 +obj6.name = "{0 1 2 3} {0 2 3} {0 3} {0}";
 +obj6.userData.explodable = 1;
 +obj6.userData.points = [];
 +obj6.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj6.userData.points.push(new PMPoint(0, 0.333333, 0.333333));
 +obj6.userData.points.push(new PMPoint(0, 0, 0.5));
 +obj6.userData.points.push(new PMPoint(0, 0, 0));
 +
 +obj6.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj6.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj6.userData.pointlabels = ["{0 1 2 3}", "{0 2 3}", "{0 3}", "{0}"];
 +obj6.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj6.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj6.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj6.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj6);
 +scene.add(obj6);
 +
 +var obj7 = new THREE.Object3D();
 +obj7.name = "{0 1 2 3} {0 1 2} {0 1} {1}";
 +obj7.userData.explodable = 1;
 +obj7.userData.points = [];
 +obj7.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj7.userData.points.push(new PMPoint(0.333333, 0.333333, 0));
 +obj7.userData.points.push(new PMPoint(0.5, 0, 0));
 +obj7.userData.points.push(new PMPoint(1, 0, 0));
 +
 +obj7.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj7.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj7.userData.pointlabels = ["{0 1 2 3}", "{0 1 2}", "{0 1}", "{1}"];
 +obj7.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj7.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj7.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj7.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj7);
 +scene.add(obj7);
 +
 +var obj8 = new THREE.Object3D();
 +obj8.name = "{0 1 2 3} {0 1 3} {0 1} {1}";
 +obj8.userData.explodable = 1;
 +obj8.userData.points = [];
 +obj8.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj8.userData.points.push(new PMPoint(0.333333, 0, 0.333333));
 +obj8.userData.points.push(new PMPoint(0.5, 0, 0));
 +obj8.userData.points.push(new PMPoint(1, 0, 0));
 +
 +obj8.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj8.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj8.userData.pointlabels = ["{0 1 2 3}", "{0 1 3}", "{0 1}", "{1}"];
 +obj8.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj8.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj8.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj8.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj8);
 +scene.add(obj8);
 +
 +var obj9 = new THREE.Object3D();
 +obj9.name = "{0 1 2 3} {0 1 2} {1 2} {1}";
 +obj9.userData.explodable = 1;
 +obj9.userData.points = [];
 +obj9.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj9.userData.points.push(new PMPoint(0.333333, 0.333333, 0));
 +obj9.userData.points.push(new PMPoint(0.5, 0.5, 0));
 +obj9.userData.points.push(new PMPoint(1, 0, 0));
 +
 +obj9.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj9.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj9.userData.pointlabels = ["{0 1 2 3}", "{0 1 2}", "{1 2}", "{1}"];
 +obj9.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj9.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj9.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj9.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj9);
 +scene.add(obj9);
 +
 +var obj10 = new THREE.Object3D();
 +obj10.name = "{0 1 2 3} {1 2 3} {1 2} {1}";
 +obj10.userData.explodable = 1;
 +obj10.userData.points = [];
 +obj10.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj10.userData.points.push(new PMPoint(0.333333, 0.333333, 0.333333));
 +obj10.userData.points.push(new PMPoint(0.5, 0.5, 0));
 +obj10.userData.points.push(new PMPoint(1, 0, 0));
 +
 +obj10.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj10.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj10.userData.pointlabels = ["{0 1 2 3}", "{1 2 3}", "{1 2}", "{1}"];
 +obj10.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj10.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj10.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj10.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj10);
 +scene.add(obj10);
 +
 +var obj11 = new THREE.Object3D();
 +obj11.name = "{0 1 2 3} {0 1 3} {1 3} {1}";
 +obj11.userData.explodable = 1;
 +obj11.userData.points = [];
 +obj11.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj11.userData.points.push(new PMPoint(0.333333, 0, 0.333333));
 +obj11.userData.points.push(new PMPoint(0.5, 0, 0.5));
 +obj11.userData.points.push(new PMPoint(1, 0, 0));
 +
 +obj11.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj11.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj11.userData.pointlabels = ["{0 1 2 3}", "{0 1 3}", "{1 3}", "{1}"];
 +obj11.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj11.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj11.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj11.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj11);
 +scene.add(obj11);
 +
 +var obj12 = new THREE.Object3D();
 +obj12.name = "{0 1 2 3} {1 2 3} {1 3} {1}";
 +obj12.userData.explodable = 1;
 +obj12.userData.points = [];
 +obj12.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj12.userData.points.push(new PMPoint(0.333333, 0.333333, 0.333333));
 +obj12.userData.points.push(new PMPoint(0.5, 0, 0.5));
 +obj12.userData.points.push(new PMPoint(1, 0, 0));
 +
 +obj12.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj12.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj12.userData.pointlabels = ["{0 1 2 3}", "{1 2 3}", "{1 3}", "{1}"];
 +obj12.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj12.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj12.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj12.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj12);
 +scene.add(obj12);
 +
 +var obj13 = new THREE.Object3D();
 +obj13.name = "{0 1 2 3} {0 1 2} {0 2} {2}";
 +obj13.userData.explodable = 1;
 +obj13.userData.points = [];
 +obj13.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj13.userData.points.push(new PMPoint(0.333333, 0.333333, 0));
 +obj13.userData.points.push(new PMPoint(0, 0.5, 0));
 +obj13.userData.points.push(new PMPoint(0, 1, 0));
 +
 +obj13.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj13.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj13.userData.pointlabels = ["{0 1 2 3}", "{0 1 2}", "{0 2}", "{2}"];
 +obj13.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj13.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj13.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj13.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj13);
 +scene.add(obj13);
 +
 +var obj14 = new THREE.Object3D();
 +obj14.name = "{0 1 2 3} {0 2 3} {0 2} {2}";
 +obj14.userData.explodable = 1;
 +obj14.userData.points = [];
 +obj14.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj14.userData.points.push(new PMPoint(0, 0.333333, 0.333333));
 +obj14.userData.points.push(new PMPoint(0, 0.5, 0));
 +obj14.userData.points.push(new PMPoint(0, 1, 0));
 +
 +obj14.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj14.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj14.userData.pointlabels = ["{0 1 2 3}", "{0 2 3}", "{0 2}", "{2}"];
 +obj14.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj14.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj14.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj14.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj14);
 +scene.add(obj14);
 +
 +var obj15 = new THREE.Object3D();
 +obj15.name = "{0 1 2 3} {0 1 2} {1 2} {2}";
 +obj15.userData.explodable = 1;
 +obj15.userData.points = [];
 +obj15.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj15.userData.points.push(new PMPoint(0.333333, 0.333333, 0));
 +obj15.userData.points.push(new PMPoint(0.5, 0.5, 0));
 +obj15.userData.points.push(new PMPoint(0, 1, 0));
 +
 +obj15.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj15.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj15.userData.pointlabels = ["{0 1 2 3}", "{0 1 2}", "{1 2}", "{2}"];
 +obj15.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj15.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj15.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj15.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj15);
 +scene.add(obj15);
 +
 +var obj16 = new THREE.Object3D();
 +obj16.name = "{0 1 2 3} {1 2 3} {1 2} {2}";
 +obj16.userData.explodable = 1;
 +obj16.userData.points = [];
 +obj16.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj16.userData.points.push(new PMPoint(0.333333, 0.333333, 0.333333));
 +obj16.userData.points.push(new PMPoint(0.5, 0.5, 0));
 +obj16.userData.points.push(new PMPoint(0, 1, 0));
 +
 +obj16.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj16.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj16.userData.pointlabels = ["{0 1 2 3}", "{1 2 3}", "{1 2}", "{2}"];
 +obj16.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj16.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj16.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj16.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj16);
 +scene.add(obj16);
 +
 +var obj17 = new THREE.Object3D();
 +obj17.name = "{0 1 2 3} {0 2 3} {2 3} {2}";
 +obj17.userData.explodable = 1;
 +obj17.userData.points = [];
 +obj17.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj17.userData.points.push(new PMPoint(0, 0.333333, 0.333333));
 +obj17.userData.points.push(new PMPoint(0, 0.5, 0.5));
 +obj17.userData.points.push(new PMPoint(0, 1, 0));
 +
 +obj17.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj17.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj17.userData.pointlabels = ["{0 1 2 3}", "{0 2 3}", "{2 3}", "{2}"];
 +obj17.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj17.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj17.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj17.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj17);
 +scene.add(obj17);
 +
 +var obj18 = new THREE.Object3D();
 +obj18.name = "{0 1 2 3} {1 2 3} {2 3} {2}";
 +obj18.userData.explodable = 1;
 +obj18.userData.points = [];
 +obj18.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj18.userData.points.push(new PMPoint(0.333333, 0.333333, 0.333333));
 +obj18.userData.points.push(new PMPoint(0, 0.5, 0.5));
 +obj18.userData.points.push(new PMPoint(0, 1, 0));
 +
 +obj18.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj18.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj18.userData.pointlabels = ["{0 1 2 3}", "{1 2 3}", "{2 3}", "{2}"];
 +obj18.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj18.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj18.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj18.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj18);
 +scene.add(obj18);
 +
 +var obj19 = new THREE.Object3D();
 +obj19.name = "{0 1 2 3} {0 1 3} {0 3} {3}";
 +obj19.userData.explodable = 1;
 +obj19.userData.points = [];
 +obj19.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj19.userData.points.push(new PMPoint(0.333333, 0, 0.333333));
 +obj19.userData.points.push(new PMPoint(0, 0, 0.5));
 +obj19.userData.points.push(new PMPoint(0, 0, 1));
 +
 +obj19.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj19.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj19.userData.pointlabels = ["{0 1 2 3}", "{0 1 3}", "{0 3}", "{3}"];
 +obj19.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj19.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj19.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj19.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj19);
 +scene.add(obj19);
 +
 +var obj20 = new THREE.Object3D();
 +obj20.name = "{0 1 2 3} {0 2 3} {0 3} {3}";
 +obj20.userData.explodable = 1;
 +obj20.userData.points = [];
 +obj20.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj20.userData.points.push(new PMPoint(0, 0.333333, 0.333333));
 +obj20.userData.points.push(new PMPoint(0, 0, 0.5));
 +obj20.userData.points.push(new PMPoint(0, 0, 1));
 +
 +obj20.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj20.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj20.userData.pointlabels = ["{0 1 2 3}", "{0 2 3}", "{0 3}", "{3}"];
 +obj20.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj20.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj20.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj20.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj20);
 +scene.add(obj20);
 +
 +var obj21 = new THREE.Object3D();
 +obj21.name = "{0 1 2 3} {0 1 3} {1 3} {3}";
 +obj21.userData.explodable = 1;
 +obj21.userData.points = [];
 +obj21.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj21.userData.points.push(new PMPoint(0.333333, 0, 0.333333));
 +obj21.userData.points.push(new PMPoint(0.5, 0, 0.5));
 +obj21.userData.points.push(new PMPoint(0, 0, 1));
 +
 +obj21.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj21.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj21.userData.pointlabels = ["{0 1 2 3}", "{0 1 3}", "{1 3}", "{3}"];
 +obj21.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj21.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj21.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj21.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj21);
 +scene.add(obj21);
 +
 +var obj22 = new THREE.Object3D();
 +obj22.name = "{0 1 2 3} {1 2 3} {1 3} {3}";
 +obj22.userData.explodable = 1;
 +obj22.userData.points = [];
 +obj22.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj22.userData.points.push(new PMPoint(0.333333, 0.333333, 0.333333));
 +obj22.userData.points.push(new PMPoint(0.5, 0, 0.5));
 +obj22.userData.points.push(new PMPoint(0, 0, 1));
 +
 +obj22.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj22.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj22.userData.pointlabels = ["{0 1 2 3}", "{1 2 3}", "{1 3}", "{3}"];
 +obj22.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj22.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj22.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj22.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj22);
 +scene.add(obj22);
 +
 +var obj23 = new THREE.Object3D();
 +obj23.name = "{0 1 2 3} {0 2 3} {2 3} {3}";
 +obj23.userData.explodable = 1;
 +obj23.userData.points = [];
 +obj23.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj23.userData.points.push(new PMPoint(0, 0.333333, 0.333333));
 +obj23.userData.points.push(new PMPoint(0, 0.5, 0.5));
 +obj23.userData.points.push(new PMPoint(0, 0, 1));
 +
 +obj23.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj23.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj23.userData.pointlabels = ["{0 1 2 3}", "{0 2 3}", "{2 3}", "{3}"];
 +obj23.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj23.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj23.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj23.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj23);
 +scene.add(obj23);
 +
 +var obj24 = new THREE.Object3D();
 +obj24.name = "{0 1 2 3} {1 2 3} {2 3} {3}";
 +obj24.userData.explodable = 1;
 +obj24.userData.points = [];
 +obj24.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj24.userData.points.push(new PMPoint(0.333333, 0.333333, 0.333333));
 +obj24.userData.points.push(new PMPoint(0, 0.5, 0.5));
 +obj24.userData.points.push(new PMPoint(0, 0, 1));
 +
 +obj24.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj24.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj24.userData.pointlabels = ["{0 1 2 3}", "{1 2 3}", "{2 3}", "{3}"];
 +obj24.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj24.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj24.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj24.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj24);
 +scene.add(obj24);
 +
 +// COMMON_CODE_BLOCK_BEGIN
 +function textSpriteMaterial(message, parameters) {
 +    if ( parameters === undefined ) parameters = {};
 +    var fontface = "Helvetica";
 +    var fontsize = parameters.hasOwnProperty("fontsize") ? parameters["fontsize"] : 15;
 +    fontsize = fontsize*10;
 +    var lines = message.split('\\n');
 +    var size = 512;
 +    for(var i = 0; i<lines.length; i++){
 +        var tmp = lines[i].length;
 +        while(tmp*fontsize > size){
 +           fontsize--;
 +        }
 +    }
 +    
 +    var canvas = document.createElement('canvas');
 +    canvas.width = size;
 +    canvas.height = size;
 +    var context = canvas.getContext('2d');
 +    context.fillStyle = "rgba(255, 255, 255, 0)";
 +    context.fill();
 +    context.font = fontsize + "px " + fontface;
 +    
 +    // text color
 +    context.fillStyle = "rgba(0, 0, 0, 1.0)";
 +     for(var i = 0; i<lines.length; i++){
 +        context.fillText(lines[i], size/2, size/2+i*fontsize);
 +     }
 +    
 +    // canvas contents will be used for a texture
 +    var texture = new THREE.Texture(canvas);
 +    texture.needsUpdate = true;
 +    
 +    var spriteMaterial = new THREE.SpriteMaterial({map: texture, depthTest: true, depthWrite: false, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: 1 });
 +    return spriteMaterial;
 +}
 +
 +
 +// ---------------------- INITIALIZING OBJECTS--------------------------------------
 +// ---------------------------------------------------------------------------------
 +
 +function init_object(obj) {
 +    if (obj.userData.hasOwnProperty("pointmaterial")) {
 +        init_points(obj);
 +        modelContains.points = true;
 +    }
 +    if (obj.userData.hasOwnProperty("pointlabels")) {
 +        init_pointlabels(obj);
 +        modelContains.pointlabels = true;
 +    }
 +    if (obj.userData.hasOwnProperty("edgematerial")) {
 +        init_lines(obj);
 +        modelContains.lines = true;
 +    }
 +    if (obj.userData.hasOwnProperty("edgelabels")) {
 +        init_edgelabels(obj);
 +        modelContains.edgelabels = true;
 +    }
 +    if (obj.userData.hasOwnProperty("arrowstyle")) {
 +        init_arrowheads(obj);
 +        modelContains.arrowheads = true;
 +    }
 +    if (obj.userData.hasOwnProperty("facetmaterial")) {
 +        init_faces(obj);
 +        modelContains.faces = true;
 +    }
 +}
 +
 +function init_points(obj) {
 +    var pointgroup = new THREE.Group();
 +    pointgroup.name = "points";
 +    var points = obj.userData.points;
 +    var radii = obj.userData.pointradii;
 +    var materials = obj.userData.pointmaterial;
 +    var geometry,material;
 +    if (!Array.isArray(radii)) {
 +        geometry = new THREE.SphereBufferGeometry(radii);  
 +    }
 +    if (!Array.isArray(materials)) {
 +        material = materials;
 +    }
 +    for (var i=0; i<points.length; i++) {
 +        var point = points[i];
 +        if (Array.isArray(radii)) {
 +            if (radii[i] == 0) {
 +                continue;
 +            }
 +            geometry = new THREE.SphereBufferGeometry(radii[i]);  
 +        } 
 +        if (Array.isArray(materials)) {
 +            material = materials[i];     
 +        } 
 +        var sphere = new THREE.Mesh(geometry, material);
 +        point.addSphere(sphere);
 +        pointgroup.add(sphere);
 +    }
 +    obj.add(pointgroup);
 +}
 +
 +function init_pointlabels(obj) {
 +    var points = obj.userData.points;
 +    var labels = obj.userData.pointlabels;
 +    var pointlabels = new THREE.Group();
 +    pointlabels.name = "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);
 +            point.addLabel(sprite);
 +            pointlabels.add(sprite);
 +        }
 +    } else {
 +        var spriteMaterial = textSpriteMaterial( labels );
 +        for (var i=0; i<points.length; i++) {
 +            var point = points[i];
 +         var sprite = new THREE.Sprite(spriteMaterial);
 +            point.addLabel(sprite);
 +            pointlabels.add(sprite);
 +        }
 +    }
 +    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();
 +    geometry.setAttribute('position', bufattr);
 +    if (Array.isArray(materials)) {     
 +        for (var i=0; i<materials.length; i++) {
 +            geometry.addGroup(2*i,2,i);
 +        }
 +    }
 +    var lines = new THREE.LineSegments(geometry, materials);
 +    lines.name = "lines";
 +    obj.add(lines);
 +    updateEdgesPosition(obj);
 +}
 +
 +function init_edgelabels(obj) {
 +    var points = obj.userData.points;
 +    var edgeindices = obj.userData.edgeindices;
 +    var labels = obj.userData.edgelabels;
 +    var edgelabels = new THREE.Group();
 +    edgelabels.name = "edgelabels";
 +    if (Array.isArray(labels)) {
 +        for (var i=0; i<edgeindices.length/2; i++) {
 +            var spriteMaterial = textSpriteMaterial( labels[i] );
 +            var sprite = new THREE.Sprite(spriteMaterial);
 +            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[2*i]].vector,points[edgeindices[2*i+1]].vector).multiplyScalar(0.5));
 +            edgelabels.add(sprite);
 +        }
 +    } else {
 +        var spriteMaterial = textSpriteMaterial( labels );
 +        for (var i=0; i<edgeindices.length/2; i++) {
 +            var sprite = new THREE.Sprite(spriteMaterial);
 +            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[2*i]].vector,points[edgeindices[2*i+1]].vector).multiplyScalar(0.5));
 +            edgelabels.add(sprite);
 +        }
 +    }
 +    obj.add(edgelabels);
 +}
 +
 +function init_arrowheads(obj) {
 +    var arrowheads = new THREE.Group();
 +    arrowheads.name = "arrowheads";
 +    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)) {
 +        material = new THREE.MeshBasicMaterial( {color: edgematerials.color} );
 +    }
 +
 +    for (var i=0; i<edgeindices.length; i=i+2) {
 +        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,start.vector);
 +        dir.normalize();
 +        var axis = new THREE.Vector3().set(dir.z,0,-dir.x);
 +        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,dir.clone().multiplyScalar(start.radius()+dist-height/2));
 +        if (Array.isArray(edgematerials)) {
 +            material = new THREE.MeshBasicMaterial( {color: edgematerials[i].color} );
 +        }
 +        var cone = new THREE.Mesh( geometry, material );
 +        cone.quaternion.setFromAxisAngle(axis,radians);;
 +        cone.position.copy(position);;
 +        arrowheads.add(cone);
 +    }
 +    obj.add(arrowheads);
 +}
 +
 +function init_faces(obj) {
 +    var points = obj.userData.points;
 +    var facets = obj.userData.facets;
 +    obj.userData.triangleindices = [];
 +    for (var i=0; i<facets.length; i++) {
 +        facet = facets[i];
 +        for (var t=0; t<facet.length-2; t++) {
 +            obj.userData.triangleindices.push(facet[0],facet[t+1],facet[t+2]);  
 +        }
 +    }
 +    var bufarr = new Float32Array( obj.userData.triangleindices.length * 3 );
 +    var bufattr = new THREE.Float32BufferAttribute(bufarr,3);
 +    
 +    var materials = obj.userData.facetmaterial;
 +    var geometry = new THREE.BufferGeometry();
 +    var frontmaterials = [];
 +    var backmaterials = [];
 +    geometry.setAttribute('position',bufattr);
 +    if (Array.isArray(materials)) {
 +        var tricount = 0;
 +        var facet;
 +        for (var i=0; i<facets.length; i++) {
 +            facet = facets[i];
 +            geometry.addGroup(tricount,(facet.length-2)*3,i);
 +            tricount += (facet.length-2)*3;
 +        }
 +        for (var j=0; j<materials.length; j++) {
 +            var fmat = materials[j].clone()
 +            fmat.side = THREE.FrontSide;
 +            frontmaterials.push(fmat);
 +            var bmat = materials[j].clone()
 +            bmat.side = THREE.BackSide;
 +            backmaterials.push(bmat);
 +            obj.userData.facetmaterial = frontmaterials.concat(backmaterials);
 +        }
 +    } else if (materials instanceof THREE.Material) {
 +        frontmaterials = materials.clone()
 +        frontmaterials.side = THREE.FrontSide;
 +        backmaterials = materials.clone()
 +        backmaterials.side = THREE.BackSide;
 +        obj.userData.facetmaterial = [frontmaterials, backmaterials];
 +    }
 +    // duplicating the object with front and back should avoid transparency issues
 +    var backmesh = new THREE.Mesh(geometry, backmaterials);
 +    // meshname is used to show/hide objects
 +    backmesh.name = "backfaces";
 +    obj.add(backmesh);
 +    var frontmesh = new THREE.Mesh(geometry, frontmaterials);
 +    frontmesh.name = "frontfaces";
 +    obj.add(frontmesh);
 +    updateFacesPosition(obj);
 +}
 +// //INITIALIZING
 +
 +
 +function updateFacesPosition(obj) {
 +    var points = obj.userData.points;
 +    var indices = obj.userData.triangleindices;
 +    var faces = obj.getObjectByName("frontfaces");
 +    var ba = faces.geometry.getAttribute("position");
 +    for (var i=0; i<indices.length; i++) {
 +        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); 
 +    }
 +    faces.geometry.attributes.position.needsUpdate = true;
 +    
 +}
 +
 +function updateEdgesPosition(obj) {
 +    var points = obj.userData.points;
 +    var indices = obj.userData.edgeindices;
 +    var lines = obj.getObjectByName("lines");
 +    var ba = lines.geometry.getAttribute("position"); 
 +    for (var i=0; i<indices.length; i++) {
 +        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); 
 +    }
 +    lines.geometry.attributes.position.needsUpdate = true;
 +}
 +
 +function onWindowResize() {
 +    renderer.setSize( three.clientWidth, three.clientHeight );
 +    svgRenderer.setSize( three.clientWidth, three.clientHeight );
 +    updateCamera();
 +}
 +
 +function updateCamera() {
 +    var width = three.clientWidth;
 +    var height = three.clientHeight;
 +    var aspect = width / height;
 +    if (camera.type == "OrthographicCamera") {
 +        camera.left = frustumSize * aspect / - 2;
 +        camera.right = frustumSize * aspect / 2;
 +        camera.top = frustumSize / 2;
 +        camera.bottom = - frustumSize / 2;
 +    } else if (camera.type == "PerspectiveCamera") {
 +        camera.aspect = aspect;
 +    }
 +    camera.updateProjectionMatrix();
 +}
 +
 +function changeCamera(event) {
 +    var selindex = event.currentTarget.selectedIndex;
 +    camera = cameras[selindex];
 +    control = controls[selindex];
 +    control.enabled = true; 
 +    for (var i=0; i<controls.length; i++) {
 +        if (i!=selindex) {
 +            controls[i].enabled = false;
 +        }
 +    }
 +    updateCamera();
 +}
 +
 +var camtypenode = document.getElementById('cameraType_1');
 +camtypenode.onchange = changeCamera;
 +camtypenode.dispatchEvent(new Event('change'));
 +
 +onWindowResize();
 +window.addEventListener('resize', onWindowResize);
 +
 +
 +var xRotationEnabled = false;
 +var yRotationEnabled = false;
 +var zRotationEnabled = false;
 +var rotationSpeedFactor = 1;
 +var settingsShown = false;
 +var labelsShown = true;
 +var intervals = [];
 +var timeouts = [];
 +var explodingSpeed = 0.05;
 +var explodeScale = 0.000001;
 +var XMLS = new XMLSerializer();
 +var svgElement;
 +var renderId;
 +
 +var render = function () {
 +
 + renderId = requestAnimationFrame(render);
 +
 +// comment in for automatic explosion
 +// explode(updateFactor());
 +
 +    var phi = 0.02 * rotationSpeedFactor;
 +
 +    if (xRotationEnabled) {
 +        scene.rotation.x += phi;
 +    }
 +    if (yRotationEnabled) {
 +        scene.rotation.y += phi;
 +    }
 +    if (zRotationEnabled) {
 +        scene.rotation.z += phi;
 +    }
 +
 +    control.update();
 +    renderer.render(scene, camera);
 +};
 +
 +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<scene.children.length; i++) {
 +        child = scene.children[i];
 +        if ( child.userData.hasOwnProperty("facetmaterial") ) {
 +            if (Array.isArray(child.userData.facetmaterial)) {
 +                for (var j=0; j<child.userData.facetmaterial.length; j++) {
 +                    child.userData.facetmaterial[j].opacity = opacity;
 +                }
 +            } else {
 +                child.userData.facetmaterial.opacity = opacity;
 +            }    
 +        }
 +    }
 +}
 +
 +function toggleDepthWrite(event) {
 +    depthwrite = event.currentTarget.checked;
 +    for (var i=0; i<scene.children.length; i++) {
 +        child = scene.children[i];
 +        if ( child.userData.hasOwnProperty("facetmaterial") ) {
 +            if (Array.isArray(child.userData.facetmaterial)) {
 +                for (var j=0; j<child.userData.facetmaterial.length; j++) {
 +                    child.userData.facetmaterial[j].depthWrite = depthwrite;
 +                }
 +            } else {
 +                child.userData.facetmaterial.depthWrite = depthWrite;
 +            }    
 +        }
 +    }
 +}
 +
 +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,0,0);
 +    camera.position.set(0,0,5);
 +    camera.up.set(0,1,0);
 +}
 +
 +function showSettings(event){
 +    document.getElementById('settings_1').style.visibility = 'visible';
 +    document.getElementById('showSettingsButton_1').style.visibility = 'hidden';
 +    document.getElementById('hideSettingsButton_1').style.visibility = 'visible';
 +    settingsShown = true;
 +}
 +
 +function hideSettings(event){
 +    document.getElementById('settings_1').style.visibility = 'hidden';
 +    document.getElementById('showSettingsButton_1').style.visibility = 'visible';
 +    document.getElementById('hideSettingsButton_1').style.visibility = 'hidden';
 +    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;
 +
 +    result[0] = ((a*(v*v+w*w)-u*(b*v+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*x*cos(angle)+sqrt(L)*(-c*v+b*w-w*y+v*z)*sin(angle))/L;
 +    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))/L;
 +
 +    return result;
 +}
 +
 +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<obj.userData.axes.length; j++) {
 +        rotateVertices(obj, j, scale);
 +    }
 +    update(obj);
 +    obj.userData.oldscale += scale;
 +    lookAtBarycenter(obj);
 +}
 +
 +function lookAtBarycenter(obj){
 +    control.target = barycenter(obj);
 +}
 +
 +function barycenter(obj) {
 +    var center = new THREE.Vector3(0,0,0);
 +    var points = obj.userData.points;
 +    for (var i=0; i<points.length; i++){
 +        center.add(points[i].vector);
 +    }
 +    center.divideScalar(points.length);
 +    return center;
 +}
 +
 +function rotateVertices(obj, edge, scale) {
 +    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<subtrees[edge].length; j++){
 +            var rotP = rotate(points[subtrees[edge][j]].vector, points[axes[edge][0]].vector,points[axes[edge][1]].vector, scale * (Math.PI - angles[edge]));
 +            points[subtrees[edge][j]].set(rotP[0],rotP[1],rotP[2]);
 +        }
 +    }
 +}
 +
 +function update(obj) {
 +   updateFacesPosition(obj);
 +   updateEdgesPosition(obj);
 +}
 +
 +if (foldables.length) {
 +    var settings = document.getElementById('settings_1');
 +    var foldDiv = document.createElement('div');
 +    foldDiv.id = 'fold_1';
 +    var title = document.createElement('strong');
 +    title.innerHTML = 'Fold';
 +    foldDiv.appendChild(title);
 +    foldDiv.className = 'group';
 +    for (var i=0; i<foldables.length; i++) {
 +        var range = document.createElement('input');
 +        range.type = 'range';
 +        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,settings.childNodes[0]);
 +}
 +
 +    
 +// ---------------------- EXPLOSION ------------------------------------------------
 +// ---------------------------------------------------------------------------------
 +
 +if (explodableModel) {
 +    for (var i=0; i<scene.children.length; i++) {
 +        obj = scene.children[i];
 +        if ( obj.userData.explodable ) {
 +            computeCentroid(obj);
 +        }
 +    }
 +    document.getElementById('explodeRange_1').oninput = triggerExplode;
 +    document.getElementById('explodeCheckbox_1').onchange = triggerAutomaticExplode;
 +    document.getElementById('explodingSpeedRange_1').oninput = setExplodingSpeed;
 +    explode(0.000001);
 +}
 +
 +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<scene.children.length; i++) {
 +        var obj = scene.children[i];
 +        if (obj.userData.hasOwnProperty("centroid")) { 
 +            var c = obj.userData.centroid;
 +            obj.position.set(c.x*factor, c.y*factor, c.z*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, 25));
 +}
 +
 +
 +function explodingInterval(){
 +    explodeScale += explodingSpeed;
 +    if (explodeScale <= 6){ 
 +        explode(explodeScale);
 +    }
 +    else{
 +        explode(6);
 +        explodeScale = 6;
 +        clearIntervals();
 +        timeouts.push(setTimeout(startUnexploding, 3000));
 +    }
 +    document.getElementById('explodeRange_1').value = explodeScale;
 +}
 +
 +
 +function startUnexploding(){
 +    intervals.push(setInterval(unexplodingInterval, 25));
 +}
 +
 +function unexplodingInterval(){
 +    explodeScale -= explodingSpeed;
 +    if (explodeScale >= 0){
 +        explode(explodeScale);
 +    }
 +    else {
 +        explode(0);
 +        explodeScale = 0;
 +        clearIntervals();
 +        timeouts.push(setTimeout(startExploding, 3000));
 +    }
 +    document.getElementById('explodeRange_1').value = explodeScale;
 +}
 +
 +function clearIntervals(){
 +    intervals.forEach(function(interval){
 +        clearInterval(interval);
 +    });
 +    intervals = [];
 +    timeouts.forEach(function(timeout){
 +        clearTimeout(timeout);
 +    });
 +    timeouts = [];
 +}
 +
 +// ---------------------- DISPLAY --------------------------------------------------
 +// ---------------------------------------------------------------------------------
 +
 +const objectTypeInnerHTMLs = { points: "Points", pointlabels: "Point labels", lines: "Edges", edgelabels: "Edge labels", faces: "Faces", arrowheads: "Arrow heads" };
 +const objectTypeVisible = {};
 +Object.assign(objectTypeVisible,modelContains);
 +const sortedObjectTypeKeys = Object.keys(objectTypeInnerHTMLs).sort();
 +const shownObjectTypesList = document.getElementById('shownObjectTypesList_1');
 +
 +function setVisibility(bool,objname) {
 +    for (var i=0; i<scene.children.length; 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;
 +    if (name == "faces") {
 +        setVisibility(checked,"frontfaces");
 +        setVisibility(checked,"backfaces");
 +    } else {
 +        setVisibility(checked,name);
 +    }
 +}
 +
 +for (var i=0; i<sortedObjectTypeKeys.length; i++){
 +    var key = sortedObjectTypeKeys[i];
 +    if (modelContains[key]) {
 +        var objTypeNode = document.createElement('span');
 +        objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '<br>';
 +        var checkbox = document.createElement('input');
 +        checkbox.type = 'checkbox';
 +        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('shownObjectsList_1');
 +for (var i=0; i<scene.children.length; i++){
 +    obj = scene.children[i];
 +    var objNode = document.createElement('span');
 +    objNode.innerHTML = obj.name + '<br>';
 +    var checkbox = document.createElement('input');
 +    checkbox.type = 'checkbox';
 +    checkbox.checked = true;
 +    checkbox.name = String(i);
 +    checkbox.onchange = toggleObjectVisibility;
 +    shownObjectsList.appendChild(checkbox);
 +    shownObjectsList.appendChild(objNode);
 +}
 +
 +// ---------------------- SVG ------------------------------------------------------
 +// ---------------------------------------------------------------------------------
 +
 +function takeSvgScreenshot() {
 +    if (objectTypeVisible["pointlabels"]) {
 +        setVisibility(false,"pointlabels");
 +    }
 +    if (objectTypeVisible["edgelabels"]) {
 +        setVisibility(false,"edgelabels");
 +    }
 +    svgRenderer.render(scene,camera);
 +    svgElement = XMLS.serializeToString(svgRenderer.domElement);
 +    
 +    if (objectTypeVisible["pointlabels"]) {
 +        setVisibility(true,"pointlabels");
 +    }
 +    if (objectTypeVisible["edgelabels"]) {
 +        setVisibility(true,"edgelabels");
 +    }
 +
 +    if (document.getElementById('tab_1').checked){
 +        //show in new tab
 +        var myWindow = window.open("","");
 +        myWindow.document.body.innerHTML = svgElement;
 +    } else{
 +        // download svg file 
 +        download("screenshot.svg", svgElement);
 +    }
 +}
 +
 +function download(filename, text) {
 +    var element = document.createElement('a');
 +    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
 +    element.setAttribute('download', filename);
 +
 +    element.style.display = 'none';
 +    document.body.appendChild(element);
 +
 +    element.click();
 +
 +    document.body.removeChild(element);
 +}
 +
 +
 +document.getElementById('transparencyRange_1').oninput = changeTransparency;
 +document.getElementById('depthWriteCheckbox_1').onchange = toggleDepthWrite;
 +document.getElementById('changeRotationX_1').onchange = changeRotationX;
 +document.getElementById('changeRotationY_1').onchange = changeRotationY;
 +document.getElementById('changeRotationZ_1').onchange = changeRotationZ;
 +document.getElementById('resetButton_1').onclick = resetScene;
 +document.getElementById('rotationSpeedRange_1').oninput = changeRotationSpeedFactor;
 +document.getElementById('takeScreenshot_1').onclick = takeSvgScreenshot;
 +document.getElementById('showSettingsButton_1').onclick = showSettings;
 +document.getElementById('hideSettingsButton_1').onclick = hideSettings;
 +
 +
 +// ------------------ SHORTCUTS --------------------------------------------
 +// -------------------------------------------------------------------------
 +
 +/**
 + * http://www.openjs.com/scripts/events/keyboard_shortcuts/
 + * Version : 2.01.B
 + * By Binny V A
 + * License : BSD
 + */
 +shortcut = {
 + 'all_shortcuts':{},//All the shortcuts are stored in this array
 + 'add': function(shortcut_combination,callback,opt) {
 + //Provide a set of default options
 + var default_options = {
 + 'type':'keydown',
 + 'propagate':false,
 + 'disable_in_input':false,
 + 'target':document,
 + 'keycode':false
 + }
 + if(!opt) opt = default_options;
 + else {
 + for(var dfo in default_options) {
 + if(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];
 + }
 + }
 +
 + var ele = opt.target;
 + if(typeof opt.target == 'string') ele = document.getElementById(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['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields
 + 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 == 'INPUT' || element.tagName == 'TEXTAREA') return;
 + }
 +
 + //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 the user presses , when the type is onkeydown
 + if(code == 190) character="."; //If the user presses , when the type is onkeydown
 +
 + 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 = {
 + "`":"~",
 + "1":"!",
 + "2":"@",
 + "3":"#",
 + "4":"$",
 + "5":"%",
 + "6":"^",
 + "7":"&",
 + "8":"*",
 + "9":"(",
 + "0":")",
 + "-":"_",
 + "=":"+",
 + ";":":",
 + "'":"\"",
 + ",":"<",
 + ".":">",
 + "/":"?",
 + "\\":"|"
 + }
 + //Special Keys - and their codes
 + var special_keys = {
 + 'esc':27,
 + 'escape':27,
 + 'tab':9,
 + 'space':32,
 + 'return':13,
 + 'enter':13,
 + 'backspace':8,
 +
 + 'scrolllock':145,
 + 'scroll_lock':145,
 + 'scroll':145,
 + 'capslock':20,
 + 'caps_lock':20,
 + 'caps':20,
 + 'numlock':144,
 + 'num_lock':144,
 + 'num':144,
 +
 + 'pause':19,
 + 'break':19,
 +
 + 'insert':45,
 + 'home':36,
 + 'delete':46,
 + 'end':35,
 +
 + 'pageup':33,
 + 'page_up':33,
 + 'pu':33,
 +
 + 'pagedown':34,
 + 'page_down':34,
 + 'pd':34,
 +
 + 'left':37,
 + 'up':38,
 + 'right':39,
 + 'down':40,
 +
 + 'f1':112,
 + 'f2':113,
 + 'f3':114,
 + 'f4':115,
 + 'f5':116,
 + 'f6':117,
 + 'f7':118,
 + 'f8':119,
 + 'f9':120,
 + 'f10':121,
 + 'f11':122,
 + 'f12':123
 + }
 +
 + var modifiers = { 
 + shift: { wanted:false, pressed:false},
 + ctrl : { wanted:false, pressed:false},
 + alt  : { wanted:false, pressed:false},
 + meta : { wanted:false, pressed:false} //Meta is Mac specific
 + };
 +                        
 + if(e.ctrlKey) modifiers.ctrl.pressed = true;
 + if(e.shiftKey) modifiers.shift.pressed = true;
 + if(e.altKey) modifiers.alt.pressed = true;
 + if(e.metaKey)   modifiers.meta.pressed = true;
 +                        
 + for(var i=0; k=keys[i],i<keys.length; i++) {
 + //Modifiers
 + if(k == 'ctrl' || k == 'control') {
 + kp++;
 + modifiers.ctrl.wanted = true;
 +
 + } else if(k == 'shift') {
 + kp++;
 + modifiers.shift.wanted = true;
 +
 + } else if(k == 'alt') {
 + kp++;
 + modifiers.alt.wanted = true;
 + } else if(k == 'meta') {
 + 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['keycode']) {
 + if(opt['keycode'] == code) kp++;
 +
 + } 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['propagate']) { //Stop the event
 + //e.cancelBubble is supported by IE - this will kill the bubbling process.
 + e.cancelBubble = true;
 + e.returnValue = false;
 +
 + //e.stopPropagation works in Firefox.
 + if (e.stopPropagation) {
 + e.stopPropagation();
 + e.preventDefault();
 + }
 + return false;
 + }
 + }
 + }
 + this.all_shortcuts[shortcut_combination] = {
 + 'callback':func, 
 + 'target':ele, 
 + 'event': opt['type']
 + };
 + //Attach the function with the event
 + if(ele.addEventListener) ele.addEventListener(opt['type'], func, false);
 + else if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);
 + else ele['on'+opt['type']] = func;
 + },
 +
 + //Remove the shortcut - just specify the shortcut and I will remove the binding
 + 'remove':function(shortcut_combination) {
 + shortcut_combination = shortcut_combination.toLowerCase();
 + var binding = this.all_shortcuts[shortcut_combination];
 + delete(this.all_shortcuts[shortcut_combination])
 + if(!binding) return;
 + var type = binding['event'];
 + var ele = binding['target'];
 + var callback = binding['callback'];
 +
 + if(ele.detachEvent) ele.detachEvent('on'+type, callback);
 + else if(ele.removeEventListener) ele.removeEventListener(type, callback, false);
 + else ele['on'+type] = false;
 + }
 +}
 +
 +shortcut.add("Alt+Left",function() {
 + var event = new Event('click');
 + if (settingsShown){
 + document.getElementById('hideSettingsButton_1').dispatchEvent(event);
 + } else {
 + document.getElementById('showSettingsButton_1').dispatchEvent(event);
 + }
 +});
 +
 +
 +// COMMON_CODE_BLOCK_END
 +
 +});});
 +      </script>
 +   </body>
 +</html>
 +</HTML>
 +You should give the ''%%explode%%'' feature of jReality a try -- it gives a good (and pretty!) overview of the object. You can find it in the left slot of the jReality interface.
 +
 +{{:tutorials:release:4.11:apps_topaz:ball_triang_pink.png}} ''%%topaz%%'' may also visualize distinguished subcomplexes or just sets of faces with different decorations (colors, styles, etc.). For example, to highlight the fourth facet of ''%%$bs%%'' in pink, do this:
 +
 +<code perl>
 +> $a = new Array<Set<Int>>(1); $a->[0] = $bs->FACETS->[4];
 +> $bs->VISUAL->FACES($a, FacetColor => 'pink');
 +</code>
 +<HTML>
 +<!--
 +polymake for knusper
 +Wed Mar  2 22:30:10 2022
 +bs
 +-->
 +
 +
 +<html>
 +   <head>
 +      <meta charset=utf-8>
 +      <title>bs</title>
 +      <style>
 +/*
 +// COMMON_CODE_BLOCK_BEGIN
 +*/
 +         html {overflow: scroll;}
 +         strong{font-size: 18px;}
 +         canvas { z-index: 8; }
 +         input[type='radio'] {margin-left:0;}
 +         input[type='checkbox'] {margin-right:7px; margin-left: 0px; padding-left:0px;}
 +         .group{padding-bottom: 15px;}
 +         .settings * {z-index: 11; }
 +         .settings{z-index: 10; font-family: Arial, Helvetica, sans-serif; margin-left: 30px; visibility: hidden; width: 14em; height: 96%; border: solid 1px silver; padding: 2px; overflow-y: scroll; box-sizing: border-box; background-color: white; position: absolute;}
 +         .indented{margin-left: 20px; margin-top: 10px; padding-bottom: 0px;} 
 +         .shownObjectsList{overflow: auto; max-width: 150px; max-height: 150px;}
 +         .showSettingsButton{visibility: visible; z-index: 12; position: absolute }
 +         .hideSettingsButton{visibility: hidden; z-index: 12; position: absolute; opacity: 0.5}
 +         button{margin-left: 0; margin-top: 10px}
 +         img{cursor: pointer;}
 +         .suboption{padding-top: 15px;}
 +         #model70202495259 { width: 100%; height: 100%; }
 +         .threejs_container { width: 100%; height: 75vh;}
 +         .settings{max-height: 74vh} 
 +         input[type=range] {
 +           -webkit-appearance: none;
 +           padding:0; 
 +           width:90%; 
 +           margin-left: auto;
 +           margin-right: auto;
 +           margin-top: 15px;
 +           margin-bottom: 15px;
 +           display: block;
 +         }
 +         input[type=range]:focus {
 +           outline: none;
 +         }
 +         input[type=range]::-webkit-slider-runnable-track {
 +           height: 4px;
 +           cursor: pointer;
 +           animate: 0.2s;
 +           box-shadow: 0px 0px 0px #000000;
 +           background: #E3E3E3;
 +           border-radius: 0px;
 +           border: 0px solid #000000;
 +         }
 +         input[type=range]::-webkit-slider-thumb {
 +           box-shadow: 1px 1px 2px #B8B8B8;
 +           border: 1px solid #ABABAB;
 +           height: 13px;
 +           width: 25px;
 +           border-radius: 20px;
 +           background: #E0E0E0;
 +           cursor: pointer;
 +           -webkit-appearance: none;
 +           margin-top: -5px;
 +         }
 +         input[type=range]:focus::-webkit-slider-runnable-track {
 +           background: #E3E3E3;
 +         }
 +         input[type=range]::-moz-range-track {
 +           height: 4px;
 +           cursor: pointer;
 +           animate: 0.2s;
 +           box-shadow: 0px 0px 0px #000000;
 +           background: #E3E3E3;
 +           border-radius: 0px;
 +           border: 0px solid #000000;
 +         }
 +         input[type=range]::-moz-range-thumb {
 +           box-shadow: 1px 1px 2px #B8B8B8;
 +           border: 1px solid #ABABAB;
 +           height: 13px;
 +           width: 25px;
 +           border-radius: 20px;
 +           background: #E0E0E0;
 +           cursor: pointer;
 +         }
 +         input[type=range]::-ms-track {
 +           height: 4px;
 +           cursor: pointer;
 +           animate: 0.2s;
 +           background: transparent;
 +           border-color: transparent;
 +           color: transparent;
 +         }
 +         input[type=range]::-ms-fill-lower {
 +           background: #E3E3E3;
 +           border: 0px solid #000000;
 +           border-radius: 0px;
 +           box-shadow: 0px 0px 0px #000000;
 +         }
 +         input[type=range]::-ms-fill-upper {
 +           background: #E3E3E3;
 +           border: 0px solid #000000;
 +           border-radius: 0px;
 +           box-shadow: 0px 0px 0px #000000;
 +         }
 +         input[type=range]::-ms-thumb {
 +           box-shadow: 1px 1px 2px #B8B8B8;
 +           border: 1px solid #ABABAB;
 +           height: 13px;
 +           width: 25px;
 +           border-radius: 20px;
 +           background: #E0E0E0;
 +           cursor: pointer;
 +         }
 +         input[type=range]:focus::-ms-fill-lower {
 +           background: #E3E3E3;
 +         }
 +         input[type=range]:focus::-ms-fill-upper {
 +           background: #E3E3E3;
 +         }
 +/*
 +// COMMON_CODE_BLOCK_END
 +*/
 + </style>
 +   </head>
 +<body>
 +   <div class='threejs_container'>
 + <div id='settings_2' class='settings'>
 + <div class=group id='explode_2'>
 + <strong>Explode</strong>
 + <input id='explodeRange_2' type='range' min='0.00001' max=6 step=0.01 value=0.00001>
 + <div class=indented><input id='explodeCheckbox_2' type='checkbox'>Automatic explosion</div>
 + <div class=suboption>Exploding speed</div>
 + <input id='explodingSpeedRange_2' type='range' min=0 max=0.5 step=0.001 value=0.05>
 + </div>
 +
 + <div class=group id='transparency_2' class='transparency'>
 + <strong>Transparency</strong>
 + <input id='transparencyRange_2' type='range' min=0 max=1 step=0.01 value=0>
 +            <div class=indented><input id='depthWriteCheckbox_2' type='checkbox'>depthWrite</div>
 + </div>
 +
 + <div class=group id='rotation_2'>
 + <strong>Rotation</strong>
 + <div class=indented>
 + <div><input type='checkbox' id='changeRotationX_2'> x-axis</div>
 + <div><input type='checkbox' id='changeRotationY_2'> y-axis</div>
 + <div><input type='checkbox' id='changeRotationZ_2'> z-axis</div>
 + <button id='resetButton_2'>Reset</button>
 + </div>
 +
 + <div class=suboption>Rotation speed</div>
 + <input id='rotationSpeedRange_2' type='range' min=0 max=5 step=0.01 value=2>
 + </div>
 +
 +
 + <div class=group id='display_2'>
 + <strong>Display</strong>
 + <div class=indented>
 + <div id='shownObjectTypesList_2' class='shownObjectsList'></div>
 + </div>
 + <div class=suboption>Objects</div>
 + <div class=indented>
 +    <div id='shownObjectsList_2' class='shownObjectsList'></div>
 + </div>
 + </div>
 +         
 +         <div class=group id='camera_2'>
 +            <strong>Camera</strong>
 +            <div class=indented>
 +               <form>
 +                  <select id="cameraType_2">
 +                     <option value='perspective' selected> Perspective<br></option>
 +                     <option value='orthographic' > Orthographic<br></option>
 +                  </select>
 +               </form>
 +            </div>
 +         </div>
 +
 + <div class=group id='svg_2'>
 + <strong>SVG</strong>
 + <div class=indented>
 + <form>
 + <input type="radio" name='screenshotMode' value='download' id='download_2' checked> Download<br>
 + <input type="radio" name='screenshotMode' value='tab' id='tab_2' > New tab<br>
 + </form>
 + <button id='takeScreenshot_2'>Screenshot</button>
 + </div>
 + </div>
 +
 + </div> <!-- end of settings -->
 + <img id='hideSettingsButton_2' class='hideSettingsButton' src='/kernelspecs/r118/polymake/close.svg' width=20px">
 + <img id='showSettingsButton_2' class='showSettingsButton' src='/kernelspecs/r118/polymake/menu.svg' width=20px">
 +<div id="model70202495259"></div>
 +</div>
 +   <script>
 +    requirejs.config({
 +      paths: {
 +        three: '/kernelspecs/r118/polymake/three',
 +        TrackballControls: '/kernelspecs/r118/polymake/TrackballControls',
 +        OrbitControls: '/kernelspecs/r118/polymake/OrbitControls',
 +        Projector: '/kernelspecs/r118/polymake/Projector',
 +        SVGRenderer: '/kernelspecs/r118/polymake/SVGRenderer',
 +        WEBGL: '/kernelspecs/r118/polymake/WebGL',
 +      },
 +      shim: {
 +        'three': { exports: 'THREE'},
 +        'SVGRenderer': { deps: [ 'three' ], exports: 'THREE.SVGRenderer' },
 +        'WEBGL': { deps: [ 'three' ], exports: 'THREE.WEBGL' },
 +        'Projector': { deps: [ 'three' ], exports: 'THREE.Projector' },
 +        'TrackballControls': { deps: [ 'three' ], exports: 'THREE.TrackballControls' },
 +        'OrbitControls': { deps: [ 'three' ], exports: 'THREE.OrbitControls' },
 +      }
 +    });
 +    
 +    require(['three'],function(THREE){
 +        window.THREE = THREE;
 +      require(['TrackballControls', 'OrbitControls', 'Projector', 'SVGRenderer', 'WEBGL'],
 +               function(TrackballControls, OrbitControls, Projector, SVGRenderer, WEBGL) {
 +    THREE.TrackballControls = TrackballControls;
 +    THREE.OrbitControls = OrbitControls;
 +    THREE.Projector = Projector;
 +    THREE.SVGRenderer = SVGRenderer;
 +    THREE.WEBGL = WEBGL;
 +
 +// COMMON_CODE_BLOCK_BEGIN
 +
 +const intervalLength = 25; // for automatic animations
 +const explodableModel = true; 
 +const modelContains = { points: false, pointlabels: false, lines: false, edgelabels: false, faces: false, arrowheads: false };
 +const foldables = [];
 +
 +var three = document.getElementById("model70202495259");
 +var scene = new THREE.Scene();
 +var renderer = new THREE.WebGLRenderer( { antialias: true } );
 +var svgRenderer = new THREE.SVGRenderer( { antialias: true } );
 +renderer.setPixelRatio( window.devicePixelRatio );
 +renderer.setClearColor(0xFFFFFF, 1);
 +svgRenderer.setClearColor(0xFFFFFF, 1);
 +three.appendChild(renderer.domElement);
 +
 +var frustumSize = 4;
 +var cameras = [new THREE.PerspectiveCamera(75, 1, 0.1, 1000), new THREE.OrthographicCamera()];
 +cameras.forEach(function(cam) {
 +    cam.position.set(0, 0, 5);
 +    cam.lookAt(0, 0, 0);  
 +    cam.up.set(0, 1, 0);         
 +});
 +var controls = [new THREE.TrackballControls(cameras[0], three), new THREE.OrbitControls(cameras[1], three)];
 +var camera, control;
 +
 +controls[0].zoomSpeed = 0.2;
 +controls[0].rotateSpeed = 4;
 +
 +
 +// class to allow move points together with labels and spheres
 +var PMPoint = function (x,y,z) {
 +   this.vector = new THREE.Vector3(x,y,z);
 +   this.sprite = null;
 +   this.sphere = null;
 +}
 +PMPoint.prototype.addLabel = function(labelsprite) {
 +   this.sprite = labelsprite;
 +   this.sprite.position.copy(this.vector);
 +}
 +PMPoint.prototype.addSphere = function(spheremesh) {
 +   this.sphere = spheremesh;
 +   this.sphere.position.copy(this.vector);
 +}
 +PMPoint.prototype.set = function(x,y,z) {
 +   this.vector.set(x,y,z);
 +   if (this.sprite) {
 +      this.sprite.position.copy(this.vector);
 +   }
 +   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 = document.querySelector('#model70202495259');
 +
 +// 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("cancelled frame "+renderId);
 +      }
 +   });
 +});
 +
 +// configuration of the observer:
 +var config = { childList: true, characterData: true }
 +
 +// pass in the target node, as well as the observer options
 +while (target) {
 +   if (target.className=="output") {
 +      observer.observe(target, config);
 +      break;
 +   }
 +   target = target.parentNode;
 +}
 +
 +// COMMON_CODE_BLOCK_END
 +
 +var obj0 = new THREE.Object3D();
 +obj0.name = "GRAPH of bs";
 +obj0.userData.explodable = 0;
 +obj0.userData.points = [];
 +obj0.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj0.userData.points.push(new PMPoint(0.333333, 0.333333, 0));
 +obj0.userData.points.push(new PMPoint(0.333333, 0, 0.333333));
 +obj0.userData.points.push(new PMPoint(0, 0.333333, 0.333333));
 +obj0.userData.points.push(new PMPoint(0.333333, 0.333333, 0.333333));
 +obj0.userData.points.push(new PMPoint(0.5, 0, 0));
 +obj0.userData.points.push(new PMPoint(0, 0.5, 0));
 +obj0.userData.points.push(new PMPoint(0.5, 0.5, 0));
 +obj0.userData.points.push(new PMPoint(0, 0, 0.5));
 +obj0.userData.points.push(new PMPoint(0.5, 0, 0.5));
 +obj0.userData.points.push(new PMPoint(0, 0.5, 0.5));
 +obj0.userData.points.push(new PMPoint(0, 0, 0));
 +obj0.userData.points.push(new PMPoint(1, 0, 0));
 +obj0.userData.points.push(new PMPoint(0, 1, 0));
 +obj0.userData.points.push(new PMPoint(0, 0, 1));
 +
 +obj0.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj0.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide, transparent: false } );
 +obj0.userData.pointlabels = ["{0 1 2 3}", "{0 1 2}", "{0 1 3}", "{0 2 3}", "{1 2 3}", "{0 1}", "{0 2}", "{1 2}", "{0 3}", "{1 3}", "{2 3}", "{0}", "{1}", "{2}", "{3}"];
 +obj0.userData.edgeindices = [1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 5, 1, 5, 2, 6, 0, 6, 1, 6, 3, 7, 0, 7, 1, 7, 4, 8, 0, 8, 2, 8, 3, 9, 0, 9, 2, 9, 4, 10, 0, 10, 3, 10, 4, 11, 0, 11, 1, 11, 2, 11, 3, 11, 5, 11, 6, 11, 8, 12, 0, 12, 1, 12, 2, 12, 4, 12, 5, 12, 7, 12, 9, 13, 0, 13, 1, 13, 3, 13, 4, 13, 6, 13, 7, 13, 10, 14, 0, 14, 2, 14, 3, 14, 4, 14, 8, 14, 9, 14, 10];
 +   <!-- Edge style -->
 +obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +init_object(obj0);
 +scene.add(obj0);
 +
 +var obj1 = new THREE.Object3D();
 +obj1.name = "{0 1 2 3} {0 1 2} {0 1} {0}";
 +obj1.userData.explodable = 1;
 +obj1.userData.points = [];
 +obj1.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj1.userData.points.push(new PMPoint(0.333333, 0.333333, 0));
 +obj1.userData.points.push(new PMPoint(0.5, 0, 0));
 +obj1.userData.points.push(new PMPoint(0, 0, 0));
 +
 +obj1.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj1.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj1.userData.pointlabels = ["{0 1 2 3}", "{0 1 2}", "{0 1}", "{0}"];
 +obj1.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj1.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj1.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj1.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj1);
 +scene.add(obj1);
 +
 +var obj2 = new THREE.Object3D();
 +obj2.name = "{0 1 2 3} {0 1 3} {0 1} {0}";
 +obj2.userData.explodable = 1;
 +obj2.userData.points = [];
 +obj2.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj2.userData.points.push(new PMPoint(0.333333, 0, 0.333333));
 +obj2.userData.points.push(new PMPoint(0.5, 0, 0));
 +obj2.userData.points.push(new PMPoint(0, 0, 0));
 +
 +obj2.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj2.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj2.userData.pointlabels = ["{0 1 2 3}", "{0 1 3}", "{0 1}", "{0}"];
 +obj2.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj2.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj2.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj2.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj2);
 +scene.add(obj2);
 +
 +var obj3 = new THREE.Object3D();
 +obj3.name = "{0 1 2 3} {0 1 2} {0 2} {0}";
 +obj3.userData.explodable = 1;
 +obj3.userData.points = [];
 +obj3.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj3.userData.points.push(new PMPoint(0.333333, 0.333333, 0));
 +obj3.userData.points.push(new PMPoint(0, 0.5, 0));
 +obj3.userData.points.push(new PMPoint(0, 0, 0));
 +
 +obj3.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj3.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj3.userData.pointlabels = ["{0 1 2 3}", "{0 1 2}", "{0 2}", "{0}"];
 +obj3.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj3.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj3.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj3.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj3);
 +scene.add(obj3);
 +
 +var obj4 = new THREE.Object3D();
 +obj4.name = "{0 1 2 3} {0 2 3} {0 2} {0}";
 +obj4.userData.explodable = 1;
 +obj4.userData.points = [];
 +obj4.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj4.userData.points.push(new PMPoint(0, 0.333333, 0.333333));
 +obj4.userData.points.push(new PMPoint(0, 0.5, 0));
 +obj4.userData.points.push(new PMPoint(0, 0, 0));
 +
 +obj4.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj4.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj4.userData.pointlabels = ["{0 1 2 3}", "{0 2 3}", "{0 2}", "{0}"];
 +obj4.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj4.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj4.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj4.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj4);
 +scene.add(obj4);
 +
 +var obj5 = new THREE.Object3D();
 +obj5.name = "{0 1 2 3} {0 1 3} {0 3} {0}";
 +obj5.userData.explodable = 1;
 +obj5.userData.points = [];
 +obj5.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj5.userData.points.push(new PMPoint(0.333333, 0, 0.333333));
 +obj5.userData.points.push(new PMPoint(0, 0, 0.5));
 +obj5.userData.points.push(new PMPoint(0, 0, 0));
 +
 +obj5.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj5.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj5.userData.pointlabels = ["{0 1 2 3}", "{0 1 3}", "{0 3}", "{0}"];
 +obj5.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj5.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj5.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj5.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj5);
 +scene.add(obj5);
 +
 +var obj6 = new THREE.Object3D();
 +obj6.name = "{0 1 2 3} {0 2 3} {0 3} {0}";
 +obj6.userData.explodable = 1;
 +obj6.userData.points = [];
 +obj6.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj6.userData.points.push(new PMPoint(0, 0.333333, 0.333333));
 +obj6.userData.points.push(new PMPoint(0, 0, 0.5));
 +obj6.userData.points.push(new PMPoint(0, 0, 0));
 +
 +obj6.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj6.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj6.userData.pointlabels = ["{0 1 2 3}", "{0 2 3}", "{0 3}", "{0}"];
 +obj6.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj6.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj6.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj6.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj6);
 +scene.add(obj6);
 +
 +var obj7 = new THREE.Object3D();
 +obj7.name = "{0 1 2 3} {0 1 2} {0 1} {1}";
 +obj7.userData.explodable = 1;
 +obj7.userData.points = [];
 +obj7.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj7.userData.points.push(new PMPoint(0.333333, 0.333333, 0));
 +obj7.userData.points.push(new PMPoint(0.5, 0, 0));
 +obj7.userData.points.push(new PMPoint(1, 0, 0));
 +
 +obj7.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj7.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj7.userData.pointlabels = ["{0 1 2 3}", "{0 1 2}", "{0 1}", "{1}"];
 +obj7.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj7.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj7.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj7.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj7);
 +scene.add(obj7);
 +
 +var obj8 = new THREE.Object3D();
 +obj8.name = "{0 1 2 3} {0 1 3} {0 1} {1}";
 +obj8.userData.explodable = 1;
 +obj8.userData.points = [];
 +obj8.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj8.userData.points.push(new PMPoint(0.333333, 0, 0.333333));
 +obj8.userData.points.push(new PMPoint(0.5, 0, 0));
 +obj8.userData.points.push(new PMPoint(1, 0, 0));
 +
 +obj8.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj8.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj8.userData.pointlabels = ["{0 1 2 3}", "{0 1 3}", "{0 1}", "{1}"];
 +obj8.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj8.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj8.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj8.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj8);
 +scene.add(obj8);
 +
 +var obj9 = new THREE.Object3D();
 +obj9.name = "{0 1 2 3} {0 1 2} {1 2} {1}";
 +obj9.userData.explodable = 1;
 +obj9.userData.points = [];
 +obj9.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj9.userData.points.push(new PMPoint(0.333333, 0.333333, 0));
 +obj9.userData.points.push(new PMPoint(0.5, 0.5, 0));
 +obj9.userData.points.push(new PMPoint(1, 0, 0));
 +
 +obj9.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj9.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj9.userData.pointlabels = ["{0 1 2 3}", "{0 1 2}", "{1 2}", "{1}"];
 +obj9.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj9.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj9.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj9.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj9);
 +scene.add(obj9);
 +
 +var obj10 = new THREE.Object3D();
 +obj10.name = "{0 1 2 3} {1 2 3} {1 2} {1}";
 +obj10.userData.explodable = 1;
 +obj10.userData.points = [];
 +obj10.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj10.userData.points.push(new PMPoint(0.333333, 0.333333, 0.333333));
 +obj10.userData.points.push(new PMPoint(0.5, 0.5, 0));
 +obj10.userData.points.push(new PMPoint(1, 0, 0));
 +
 +obj10.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj10.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj10.userData.pointlabels = ["{0 1 2 3}", "{1 2 3}", "{1 2}", "{1}"];
 +obj10.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj10.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj10.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj10.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj10);
 +scene.add(obj10);
 +
 +var obj11 = new THREE.Object3D();
 +obj11.name = "{0 1 2 3} {0 1 3} {1 3} {1}";
 +obj11.userData.explodable = 1;
 +obj11.userData.points = [];
 +obj11.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj11.userData.points.push(new PMPoint(0.333333, 0, 0.333333));
 +obj11.userData.points.push(new PMPoint(0.5, 0, 0.5));
 +obj11.userData.points.push(new PMPoint(1, 0, 0));
 +
 +obj11.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj11.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj11.userData.pointlabels = ["{0 1 2 3}", "{0 1 3}", "{1 3}", "{1}"];
 +obj11.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj11.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj11.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj11.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj11);
 +scene.add(obj11);
 +
 +var obj12 = new THREE.Object3D();
 +obj12.name = "{0 1 2 3} {1 2 3} {1 3} {1}";
 +obj12.userData.explodable = 1;
 +obj12.userData.points = [];
 +obj12.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj12.userData.points.push(new PMPoint(0.333333, 0.333333, 0.333333));
 +obj12.userData.points.push(new PMPoint(0.5, 0, 0.5));
 +obj12.userData.points.push(new PMPoint(1, 0, 0));
 +
 +obj12.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj12.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj12.userData.pointlabels = ["{0 1 2 3}", "{1 2 3}", "{1 3}", "{1}"];
 +obj12.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj12.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj12.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj12.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj12);
 +scene.add(obj12);
 +
 +var obj13 = new THREE.Object3D();
 +obj13.name = "{0 1 2 3} {0 1 2} {0 2} {2}";
 +obj13.userData.explodable = 1;
 +obj13.userData.points = [];
 +obj13.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj13.userData.points.push(new PMPoint(0.333333, 0.333333, 0));
 +obj13.userData.points.push(new PMPoint(0, 0.5, 0));
 +obj13.userData.points.push(new PMPoint(0, 1, 0));
 +
 +obj13.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj13.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj13.userData.pointlabels = ["{0 1 2 3}", "{0 1 2}", "{0 2}", "{2}"];
 +obj13.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj13.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj13.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj13.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj13);
 +scene.add(obj13);
 +
 +var obj14 = new THREE.Object3D();
 +obj14.name = "{0 1 2 3} {0 2 3} {0 2} {2}";
 +obj14.userData.explodable = 1;
 +obj14.userData.points = [];
 +obj14.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj14.userData.points.push(new PMPoint(0, 0.333333, 0.333333));
 +obj14.userData.points.push(new PMPoint(0, 0.5, 0));
 +obj14.userData.points.push(new PMPoint(0, 1, 0));
 +
 +obj14.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj14.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj14.userData.pointlabels = ["{0 1 2 3}", "{0 2 3}", "{0 2}", "{2}"];
 +obj14.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj14.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj14.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj14.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj14);
 +scene.add(obj14);
 +
 +var obj15 = new THREE.Object3D();
 +obj15.name = "{0 1 2 3} {0 1 2} {1 2} {2}";
 +obj15.userData.explodable = 1;
 +obj15.userData.points = [];
 +obj15.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj15.userData.points.push(new PMPoint(0.333333, 0.333333, 0));
 +obj15.userData.points.push(new PMPoint(0.5, 0.5, 0));
 +obj15.userData.points.push(new PMPoint(0, 1, 0));
 +
 +obj15.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj15.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj15.userData.pointlabels = ["{0 1 2 3}", "{0 1 2}", "{1 2}", "{2}"];
 +obj15.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj15.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj15.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj15.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj15);
 +scene.add(obj15);
 +
 +var obj16 = new THREE.Object3D();
 +obj16.name = "{0 1 2 3} {1 2 3} {1 2} {2}";
 +obj16.userData.explodable = 1;
 +obj16.userData.points = [];
 +obj16.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj16.userData.points.push(new PMPoint(0.333333, 0.333333, 0.333333));
 +obj16.userData.points.push(new PMPoint(0.5, 0.5, 0));
 +obj16.userData.points.push(new PMPoint(0, 1, 0));
 +
 +obj16.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj16.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj16.userData.pointlabels = ["{0 1 2 3}", "{1 2 3}", "{1 2}", "{2}"];
 +obj16.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj16.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj16.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj16.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj16);
 +scene.add(obj16);
 +
 +var obj17 = new THREE.Object3D();
 +obj17.name = "{0 1 2 3} {0 2 3} {2 3} {2}";
 +obj17.userData.explodable = 1;
 +obj17.userData.points = [];
 +obj17.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj17.userData.points.push(new PMPoint(0, 0.333333, 0.333333));
 +obj17.userData.points.push(new PMPoint(0, 0.5, 0.5));
 +obj17.userData.points.push(new PMPoint(0, 1, 0));
 +
 +obj17.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj17.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj17.userData.pointlabels = ["{0 1 2 3}", "{0 2 3}", "{2 3}", "{2}"];
 +obj17.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj17.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj17.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj17.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj17);
 +scene.add(obj17);
 +
 +var obj18 = new THREE.Object3D();
 +obj18.name = "{0 1 2 3} {1 2 3} {2 3} {2}";
 +obj18.userData.explodable = 1;
 +obj18.userData.points = [];
 +obj18.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj18.userData.points.push(new PMPoint(0.333333, 0.333333, 0.333333));
 +obj18.userData.points.push(new PMPoint(0, 0.5, 0.5));
 +obj18.userData.points.push(new PMPoint(0, 1, 0));
 +
 +obj18.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj18.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj18.userData.pointlabels = ["{0 1 2 3}", "{1 2 3}", "{2 3}", "{2}"];
 +obj18.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj18.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj18.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj18.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj18);
 +scene.add(obj18);
 +
 +var obj19 = new THREE.Object3D();
 +obj19.name = "{0 1 2 3} {0 1 3} {0 3} {3}";
 +obj19.userData.explodable = 1;
 +obj19.userData.points = [];
 +obj19.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj19.userData.points.push(new PMPoint(0.333333, 0, 0.333333));
 +obj19.userData.points.push(new PMPoint(0, 0, 0.5));
 +obj19.userData.points.push(new PMPoint(0, 0, 1));
 +
 +obj19.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj19.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj19.userData.pointlabels = ["{0 1 2 3}", "{0 1 3}", "{0 3}", "{3}"];
 +obj19.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj19.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj19.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj19.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj19);
 +scene.add(obj19);
 +
 +var obj20 = new THREE.Object3D();
 +obj20.name = "{0 1 2 3} {0 2 3} {0 3} {3}";
 +obj20.userData.explodable = 1;
 +obj20.userData.points = [];
 +obj20.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj20.userData.points.push(new PMPoint(0, 0.333333, 0.333333));
 +obj20.userData.points.push(new PMPoint(0, 0, 0.5));
 +obj20.userData.points.push(new PMPoint(0, 0, 1));
 +
 +obj20.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj20.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj20.userData.pointlabels = ["{0 1 2 3}", "{0 2 3}", "{0 3}", "{3}"];
 +obj20.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj20.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj20.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj20.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj20);
 +scene.add(obj20);
 +
 +var obj21 = new THREE.Object3D();
 +obj21.name = "{0 1 2 3} {0 1 3} {1 3} {3}";
 +obj21.userData.explodable = 1;
 +obj21.userData.points = [];
 +obj21.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj21.userData.points.push(new PMPoint(0.333333, 0, 0.333333));
 +obj21.userData.points.push(new PMPoint(0.5, 0, 0.5));
 +obj21.userData.points.push(new PMPoint(0, 0, 1));
 +
 +obj21.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj21.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj21.userData.pointlabels = ["{0 1 2 3}", "{0 1 3}", "{1 3}", "{3}"];
 +obj21.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj21.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj21.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj21.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj21);
 +scene.add(obj21);
 +
 +var obj22 = new THREE.Object3D();
 +obj22.name = "{0 1 2 3} {1 2 3} {1 3} {3}";
 +obj22.userData.explodable = 1;
 +obj22.userData.points = [];
 +obj22.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj22.userData.points.push(new PMPoint(0.333333, 0.333333, 0.333333));
 +obj22.userData.points.push(new PMPoint(0.5, 0, 0.5));
 +obj22.userData.points.push(new PMPoint(0, 0, 1));
 +
 +obj22.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj22.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj22.userData.pointlabels = ["{0 1 2 3}", "{1 2 3}", "{1 3}", "{3}"];
 +obj22.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj22.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj22.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj22.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj22);
 +scene.add(obj22);
 +
 +var obj23 = new THREE.Object3D();
 +obj23.name = "{0 1 2 3} {0 2 3} {2 3} {3}";
 +obj23.userData.explodable = 1;
 +obj23.userData.points = [];
 +obj23.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj23.userData.points.push(new PMPoint(0, 0.333333, 0.333333));
 +obj23.userData.points.push(new PMPoint(0, 0.5, 0.5));
 +obj23.userData.points.push(new PMPoint(0, 0, 1));
 +
 +obj23.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj23.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj23.userData.pointlabels = ["{0 1 2 3}", "{0 2 3}", "{2 3}", "{3}"];
 +obj23.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj23.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj23.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj23.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj23);
 +scene.add(obj23);
 +
 +var obj24 = new THREE.Object3D();
 +obj24.name = "{0 1 2 3} {1 2 3} {2 3} {3}";
 +obj24.userData.explodable = 1;
 +obj24.userData.points = [];
 +obj24.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj24.userData.points.push(new PMPoint(0.333333, 0.333333, 0.333333));
 +obj24.userData.points.push(new PMPoint(0, 0.5, 0.5));
 +obj24.userData.points.push(new PMPoint(0, 0, 1));
 +
 +obj24.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj24.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFF0000, side: THREE.DoubleSide, transparent: false } );
 +obj24.userData.pointlabels = ["{0 1 2 3}", "{1 2 3}", "{2 3}", "{3}"];
 +obj24.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +   <!-- Edge style -->
 +obj24.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1.5, transparent: false } );
 +obj24.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj24.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj24);
 +scene.add(obj24);
 +
 +var obj25 = new THREE.Object3D();
 +obj25.name = "{0 1 2 3} {0 1 3} {0 3} {0}";
 +obj25.userData.explodable = 1;
 +obj25.userData.points = [];
 +obj25.userData.points.push(new PMPoint(0.25, 0.25, 0.25));
 +obj25.userData.points.push(new PMPoint(0.333333, 0, 0.333333));
 +obj25.userData.points.push(new PMPoint(0, 0, 0.5));
 +obj25.userData.points.push(new PMPoint(0, 0, 0));
 +
 +obj25.userData.edgeindices = [0, 1, 0, 2, 1, 2, 0, 3, 1, 3, 2, 3];
 +obj25.userData.facets = [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]];
 +   <!-- Facet style -->
 +obj25.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0xFFC0CB, depthFunc: THREE.LessDepth, depthWrite: false, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 0.5, side: THREE.DoubleSide, transparent: true } );
 +init_object(obj25);
 +scene.add(obj25);
 +
 +// COMMON_CODE_BLOCK_BEGIN
 +function textSpriteMaterial(message, parameters) {
 +    if ( parameters === undefined ) parameters = {};
 +    var fontface = "Helvetica";
 +    var fontsize = parameters.hasOwnProperty("fontsize") ? parameters["fontsize"] : 15;
 +    fontsize = fontsize*10;
 +    var lines = message.split('\\n');
 +    var size = 512;
 +    for(var i = 0; i<lines.length; i++){
 +        var tmp = lines[i].length;
 +        while(tmp*fontsize > size){
 +           fontsize--;
 +        }
 +    }
 +    
 +    var canvas = document.createElement('canvas');
 +    canvas.width = size;
 +    canvas.height = size;
 +    var context = canvas.getContext('2d');
 +    context.fillStyle = "rgba(255, 255, 255, 0)";
 +    context.fill();
 +    context.font = fontsize + "px " + fontface;
 +    
 +    // text color
 +    context.fillStyle = "rgba(0, 0, 0, 1.0)";
 +     for(var i = 0; i<lines.length; i++){
 +        context.fillText(lines[i], size/2, size/2+i*fontsize);
 +     }
 +    
 +    // canvas contents will be used for a texture
 +    var texture = new THREE.Texture(canvas);
 +    texture.needsUpdate = true;
 +    
 +    var spriteMaterial = new THREE.SpriteMaterial({map: texture, depthTest: true, depthWrite: false, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: 1 });
 +    return spriteMaterial;
 +}
 +
 +
 +// ---------------------- INITIALIZING OBJECTS--------------------------------------
 +// ---------------------------------------------------------------------------------
 +
 +function init_object(obj) {
 +    if (obj.userData.hasOwnProperty("pointmaterial")) {
 +        init_points(obj);
 +        modelContains.points = true;
 +    }
 +    if (obj.userData.hasOwnProperty("pointlabels")) {
 +        init_pointlabels(obj);
 +        modelContains.pointlabels = true;
 +    }
 +    if (obj.userData.hasOwnProperty("edgematerial")) {
 +        init_lines(obj);
 +        modelContains.lines = true;
 +    }
 +    if (obj.userData.hasOwnProperty("edgelabels")) {
 +        init_edgelabels(obj);
 +        modelContains.edgelabels = true;
 +    }
 +    if (obj.userData.hasOwnProperty("arrowstyle")) {
 +        init_arrowheads(obj);
 +        modelContains.arrowheads = true;
 +    }
 +    if (obj.userData.hasOwnProperty("facetmaterial")) {
 +        init_faces(obj);
 +        modelContains.faces = true;
 +    }
 +}
 +
 +function init_points(obj) {
 +    var pointgroup = new THREE.Group();
 +    pointgroup.name = "points";
 +    var points = obj.userData.points;
 +    var radii = obj.userData.pointradii;
 +    var materials = obj.userData.pointmaterial;
 +    var geometry,material;
 +    if (!Array.isArray(radii)) {
 +        geometry = new THREE.SphereBufferGeometry(radii);  
 +    }
 +    if (!Array.isArray(materials)) {
 +        material = materials;
 +    }
 +    for (var i=0; i<points.length; i++) {
 +        var point = points[i];
 +        if (Array.isArray(radii)) {
 +            if (radii[i] == 0) {
 +                continue;
 +            }
 +            geometry = new THREE.SphereBufferGeometry(radii[i]);  
 +        } 
 +        if (Array.isArray(materials)) {
 +            material = materials[i];     
 +        } 
 +        var sphere = new THREE.Mesh(geometry, material);
 +        point.addSphere(sphere);
 +        pointgroup.add(sphere);
 +    }
 +    obj.add(pointgroup);
 +}
 +
 +function init_pointlabels(obj) {
 +    var points = obj.userData.points;
 +    var labels = obj.userData.pointlabels;
 +    var pointlabels = new THREE.Group();
 +    pointlabels.name = "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);
 +            point.addLabel(sprite);
 +            pointlabels.add(sprite);
 +        }
 +    } else {
 +        var spriteMaterial = textSpriteMaterial( labels );
 +        for (var i=0; i<points.length; i++) {
 +            var point = points[i];
 +         var sprite = new THREE.Sprite(spriteMaterial);
 +            point.addLabel(sprite);
 +            pointlabels.add(sprite);
 +        }
 +    }
 +    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();
 +    geometry.setAttribute('position', bufattr);
 +    if (Array.isArray(materials)) {     
 +        for (var i=0; i<materials.length; i++) {
 +            geometry.addGroup(2*i,2,i);
 +        }
 +    }
 +    var lines = new THREE.LineSegments(geometry, materials);
 +    lines.name = "lines";
 +    obj.add(lines);
 +    updateEdgesPosition(obj);
 +}
 +
 +function init_edgelabels(obj) {
 +    var points = obj.userData.points;
 +    var edgeindices = obj.userData.edgeindices;
 +    var labels = obj.userData.edgelabels;
 +    var edgelabels = new THREE.Group();
 +    edgelabels.name = "edgelabels";
 +    if (Array.isArray(labels)) {
 +        for (var i=0; i<edgeindices.length/2; i++) {
 +            var spriteMaterial = textSpriteMaterial( labels[i] );
 +            var sprite = new THREE.Sprite(spriteMaterial);
 +            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[2*i]].vector,points[edgeindices[2*i+1]].vector).multiplyScalar(0.5));
 +            edgelabels.add(sprite);
 +        }
 +    } else {
 +        var spriteMaterial = textSpriteMaterial( labels );
 +        for (var i=0; i<edgeindices.length/2; i++) {
 +            var sprite = new THREE.Sprite(spriteMaterial);
 +            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[2*i]].vector,points[edgeindices[2*i+1]].vector).multiplyScalar(0.5));
 +            edgelabels.add(sprite);
 +        }
 +    }
 +    obj.add(edgelabels);
 +}
 +
 +function init_arrowheads(obj) {
 +    var arrowheads = new THREE.Group();
 +    arrowheads.name = "arrowheads";
 +    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)) {
 +        material = new THREE.MeshBasicMaterial( {color: edgematerials.color} );
 +    }
 +
 +    for (var i=0; i<edgeindices.length; i=i+2) {
 +        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,start.vector);
 +        dir.normalize();
 +        var axis = new THREE.Vector3().set(dir.z,0,-dir.x);
 +        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,dir.clone().multiplyScalar(start.radius()+dist-height/2));
 +        if (Array.isArray(edgematerials)) {
 +            material = new THREE.MeshBasicMaterial( {color: edgematerials[i].color} );
 +        }
 +        var cone = new THREE.Mesh( geometry, material );
 +        cone.quaternion.setFromAxisAngle(axis,radians);;
 +        cone.position.copy(position);;
 +        arrowheads.add(cone);
 +    }
 +    obj.add(arrowheads);
 +}
 +
 +function init_faces(obj) {
 +    var points = obj.userData.points;
 +    var facets = obj.userData.facets;
 +    obj.userData.triangleindices = [];
 +    for (var i=0; i<facets.length; i++) {
 +        facet = facets[i];
 +        for (var t=0; t<facet.length-2; t++) {
 +            obj.userData.triangleindices.push(facet[0],facet[t+1],facet[t+2]);  
 +        }
 +    }
 +    var bufarr = new Float32Array( obj.userData.triangleindices.length * 3 );
 +    var bufattr = new THREE.Float32BufferAttribute(bufarr,3);
 +    
 +    var materials = obj.userData.facetmaterial;
 +    var geometry = new THREE.BufferGeometry();
 +    var frontmaterials = [];
 +    var backmaterials = [];
 +    geometry.setAttribute('position',bufattr);
 +    if (Array.isArray(materials)) {
 +        var tricount = 0;
 +        var facet;
 +        for (var i=0; i<facets.length; i++) {
 +            facet = facets[i];
 +            geometry.addGroup(tricount,(facet.length-2)*3,i);
 +            tricount += (facet.length-2)*3;
 +        }
 +        for (var j=0; j<materials.length; j++) {
 +            var fmat = materials[j].clone()
 +            fmat.side = THREE.FrontSide;
 +            frontmaterials.push(fmat);
 +            var bmat = materials[j].clone()
 +            bmat.side = THREE.BackSide;
 +            backmaterials.push(bmat);
 +            obj.userData.facetmaterial = frontmaterials.concat(backmaterials);
 +        }
 +    } else if (materials instanceof THREE.Material) {
 +        frontmaterials = materials.clone()
 +        frontmaterials.side = THREE.FrontSide;
 +        backmaterials = materials.clone()
 +        backmaterials.side = THREE.BackSide;
 +        obj.userData.facetmaterial = [frontmaterials, backmaterials];
 +    }
 +    // duplicating the object with front and back should avoid transparency issues
 +    var backmesh = new THREE.Mesh(geometry, backmaterials);
 +    // meshname is used to show/hide objects
 +    backmesh.name = "backfaces";
 +    obj.add(backmesh);
 +    var frontmesh = new THREE.Mesh(geometry, frontmaterials);
 +    frontmesh.name = "frontfaces";
 +    obj.add(frontmesh);
 +    updateFacesPosition(obj);
 +}
 +// //INITIALIZING
 +
 +
 +function updateFacesPosition(obj) {
 +    var points = obj.userData.points;
 +    var indices = obj.userData.triangleindices;
 +    var faces = obj.getObjectByName("frontfaces");
 +    var ba = faces.geometry.getAttribute("position");
 +    for (var i=0; i<indices.length; i++) {
 +        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); 
 +    }
 +    faces.geometry.attributes.position.needsUpdate = true;
 +    
 +}
 +
 +function updateEdgesPosition(obj) {
 +    var points = obj.userData.points;
 +    var indices = obj.userData.edgeindices;
 +    var lines = obj.getObjectByName("lines");
 +    var ba = lines.geometry.getAttribute("position"); 
 +    for (var i=0; i<indices.length; i++) {
 +        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); 
 +    }
 +    lines.geometry.attributes.position.needsUpdate = true;
 +}
 +
 +function onWindowResize() {
 +    renderer.setSize( three.clientWidth, three.clientHeight );
 +    svgRenderer.setSize( three.clientWidth, three.clientHeight );
 +    updateCamera();
 +}
 +
 +function updateCamera() {
 +    var width = three.clientWidth;
 +    var height = three.clientHeight;
 +    var aspect = width / height;
 +    if (camera.type == "OrthographicCamera") {
 +        camera.left = frustumSize * aspect / - 2;
 +        camera.right = frustumSize * aspect / 2;
 +        camera.top = frustumSize / 2;
 +        camera.bottom = - frustumSize / 2;
 +    } else if (camera.type == "PerspectiveCamera") {
 +        camera.aspect = aspect;
 +    }
 +    camera.updateProjectionMatrix();
 +}
 +
 +function changeCamera(event) {
 +    var selindex = event.currentTarget.selectedIndex;
 +    camera = cameras[selindex];
 +    control = controls[selindex];
 +    control.enabled = true; 
 +    for (var i=0; i<controls.length; i++) {
 +        if (i!=selindex) {
 +            controls[i].enabled = false;
 +        }
 +    }
 +    updateCamera();
 +}
 +
 +var camtypenode = document.getElementById('cameraType_2');
 +camtypenode.onchange = changeCamera;
 +camtypenode.dispatchEvent(new Event('change'));
 +
 +onWindowResize();
 +window.addEventListener('resize', onWindowResize);
 +
 +
 +var xRotationEnabled = false;
 +var yRotationEnabled = false;
 +var zRotationEnabled = false;
 +var rotationSpeedFactor = 1;
 +var settingsShown = false;
 +var labelsShown = true;
 +var intervals = [];
 +var timeouts = [];
 +var explodingSpeed = 0.05;
 +var explodeScale = 0.000001;
 +var XMLS = new XMLSerializer();
 +var svgElement;
 +var renderId;
 +
 +var render = function () {
 +
 + renderId = requestAnimationFrame(render);
 +
 +// comment in for automatic explosion
 +// explode(updateFactor());
 +
 +    var phi = 0.02 * rotationSpeedFactor;
 +
 +    if (xRotationEnabled) {
 +        scene.rotation.x += phi;
 +    }
 +    if (yRotationEnabled) {
 +        scene.rotation.y += phi;
 +    }
 +    if (zRotationEnabled) {
 +        scene.rotation.z += phi;
 +    }
 +
 +    control.update();
 +    renderer.render(scene, camera);
 +};
 +
 +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<scene.children.length; i++) {
 +        child = scene.children[i];
 +        if ( child.userData.hasOwnProperty("facetmaterial") ) {
 +            if (Array.isArray(child.userData.facetmaterial)) {
 +                for (var j=0; j<child.userData.facetmaterial.length; j++) {
 +                    child.userData.facetmaterial[j].opacity = opacity;
 +                }
 +            } else {
 +                child.userData.facetmaterial.opacity = opacity;
 +            }    
 +        }
 +    }
 +}
 +
 +function toggleDepthWrite(event) {
 +    depthwrite = event.currentTarget.checked;
 +    for (var i=0; i<scene.children.length; i++) {
 +        child = scene.children[i];
 +        if ( child.userData.hasOwnProperty("facetmaterial") ) {
 +            if (Array.isArray(child.userData.facetmaterial)) {
 +                for (var j=0; j<child.userData.facetmaterial.length; j++) {
 +                    child.userData.facetmaterial[j].depthWrite = depthwrite;
 +                }
 +            } else {
 +                child.userData.facetmaterial.depthWrite = depthWrite;
 +            }    
 +        }
 +    }
 +}
 +
 +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,0,0);
 +    camera.position.set(0,0,5);
 +    camera.up.set(0,1,0);
 +}
 +
 +function showSettings(event){
 +    document.getElementById('settings_2').style.visibility = 'visible';
 +    document.getElementById('showSettingsButton_2').style.visibility = 'hidden';
 +    document.getElementById('hideSettingsButton_2').style.visibility = 'visible';
 +    settingsShown = true;
 +}
 +
 +function hideSettings(event){
 +    document.getElementById('settings_2').style.visibility = 'hidden';
 +    document.getElementById('showSettingsButton_2').style.visibility = 'visible';
 +    document.getElementById('hideSettingsButton_2').style.visibility = 'hidden';
 +    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;
 +
 +    result[0] = ((a*(v*v+w*w)-u*(b*v+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*x*cos(angle)+sqrt(L)*(-c*v+b*w-w*y+v*z)*sin(angle))/L;
 +    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))/L;
 +
 +    return result;
 +}
 +
 +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<obj.userData.axes.length; j++) {
 +        rotateVertices(obj, j, scale);
 +    }
 +    update(obj);
 +    obj.userData.oldscale += scale;
 +    lookAtBarycenter(obj);
 +}
 +
 +function lookAtBarycenter(obj){
 +    control.target = barycenter(obj);
 +}
 +
 +function barycenter(obj) {
 +    var center = new THREE.Vector3(0,0,0);
 +    var points = obj.userData.points;
 +    for (var i=0; i<points.length; i++){
 +        center.add(points[i].vector);
 +    }
 +    center.divideScalar(points.length);
 +    return center;
 +}
 +
 +function rotateVertices(obj, edge, scale) {
 +    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<subtrees[edge].length; j++){
 +            var rotP = rotate(points[subtrees[edge][j]].vector, points[axes[edge][0]].vector,points[axes[edge][1]].vector, scale * (Math.PI - angles[edge]));
 +            points[subtrees[edge][j]].set(rotP[0],rotP[1],rotP[2]);
 +        }
 +    }
 +}
 +
 +function update(obj) {
 +   updateFacesPosition(obj);
 +   updateEdgesPosition(obj);
 +}
 +
 +if (foldables.length) {
 +    var settings = document.getElementById('settings_2');
 +    var foldDiv = document.createElement('div');
 +    foldDiv.id = 'fold_2';
 +    var title = document.createElement('strong');
 +    title.innerHTML = 'Fold';
 +    foldDiv.appendChild(title);
 +    foldDiv.className = 'group';
 +    for (var i=0; i<foldables.length; i++) {
 +        var range = document.createElement('input');
 +        range.type = 'range';
 +        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,settings.childNodes[0]);
 +}
 +
 +    
 +// ---------------------- EXPLOSION ------------------------------------------------
 +// ---------------------------------------------------------------------------------
 +
 +if (explodableModel) {
 +    for (var i=0; i<scene.children.length; i++) {
 +        obj = scene.children[i];
 +        if ( obj.userData.explodable ) {
 +            computeCentroid(obj);
 +        }
 +    }
 +    document.getElementById('explodeRange_2').oninput = triggerExplode;
 +    document.getElementById('explodeCheckbox_2').onchange = triggerAutomaticExplode;
 +    document.getElementById('explodingSpeedRange_2').oninput = setExplodingSpeed;
 +    explode(0.000001);
 +}
 +
 +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<scene.children.length; i++) {
 +        var obj = scene.children[i];
 +        if (obj.userData.hasOwnProperty("centroid")) { 
 +            var c = obj.userData.centroid;
 +            obj.position.set(c.x*factor, c.y*factor, c.z*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, 25));
 +}
 +
 +
 +function explodingInterval(){
 +    explodeScale += explodingSpeed;
 +    if (explodeScale <= 6){ 
 +        explode(explodeScale);
 +    }
 +    else{
 +        explode(6);
 +        explodeScale = 6;
 +        clearIntervals();
 +        timeouts.push(setTimeout(startUnexploding, 3000));
 +    }
 +    document.getElementById('explodeRange_2').value = explodeScale;
 +}
 +
 +
 +function startUnexploding(){
 +    intervals.push(setInterval(unexplodingInterval, 25));
 +}
 +
 +function unexplodingInterval(){
 +    explodeScale -= explodingSpeed;
 +    if (explodeScale >= 0){
 +        explode(explodeScale);
 +    }
 +    else {
 +        explode(0);
 +        explodeScale = 0;
 +        clearIntervals();
 +        timeouts.push(setTimeout(startExploding, 3000));
 +    }
 +    document.getElementById('explodeRange_2').value = explodeScale;
 +}
 +
 +function clearIntervals(){
 +    intervals.forEach(function(interval){
 +        clearInterval(interval);
 +    });
 +    intervals = [];
 +    timeouts.forEach(function(timeout){
 +        clearTimeout(timeout);
 +    });
 +    timeouts = [];
 +}
 +
 +// ---------------------- DISPLAY --------------------------------------------------
 +// ---------------------------------------------------------------------------------
 +
 +const objectTypeInnerHTMLs = { points: "Points", pointlabels: "Point labels", lines: "Edges", edgelabels: "Edge labels", faces: "Faces", arrowheads: "Arrow heads" };
 +const objectTypeVisible = {};
 +Object.assign(objectTypeVisible,modelContains);
 +const sortedObjectTypeKeys = Object.keys(objectTypeInnerHTMLs).sort();
 +const shownObjectTypesList = document.getElementById('shownObjectTypesList_2');
 +
 +function setVisibility(bool,objname) {
 +    for (var i=0; i<scene.children.length; 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;
 +    if (name == "faces") {
 +        setVisibility(checked,"frontfaces");
 +        setVisibility(checked,"backfaces");
 +    } else {
 +        setVisibility(checked,name);
 +    }
 +}
 +
 +for (var i=0; i<sortedObjectTypeKeys.length; i++){
 +    var key = sortedObjectTypeKeys[i];
 +    if (modelContains[key]) {
 +        var objTypeNode = document.createElement('span');
 +        objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '<br>';
 +        var checkbox = document.createElement('input');
 +        checkbox.type = 'checkbox';
 +        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('shownObjectsList_2');
 +for (var i=0; i<scene.children.length; i++){
 +    obj = scene.children[i];
 +    var objNode = document.createElement('span');
 +    objNode.innerHTML = obj.name + '<br>';
 +    var checkbox = document.createElement('input');
 +    checkbox.type = 'checkbox';
 +    checkbox.checked = true;
 +    checkbox.name = String(i);
 +    checkbox.onchange = toggleObjectVisibility;
 +    shownObjectsList.appendChild(checkbox);
 +    shownObjectsList.appendChild(objNode);
 +}
 +
 +// ---------------------- SVG ------------------------------------------------------
 +// ---------------------------------------------------------------------------------
 +
 +function takeSvgScreenshot() {
 +    if (objectTypeVisible["pointlabels"]) {
 +        setVisibility(false,"pointlabels");
 +    }
 +    if (objectTypeVisible["edgelabels"]) {
 +        setVisibility(false,"edgelabels");
 +    }
 +    svgRenderer.render(scene,camera);
 +    svgElement = XMLS.serializeToString(svgRenderer.domElement);
 +    
 +    if (objectTypeVisible["pointlabels"]) {
 +        setVisibility(true,"pointlabels");
 +    }
 +    if (objectTypeVisible["edgelabels"]) {
 +        setVisibility(true,"edgelabels");
 +    }
 +
 +    if (document.getElementById('tab_2').checked){
 +        //show in new tab
 +        var myWindow = window.open("","");
 +        myWindow.document.body.innerHTML = svgElement;
 +    } else{
 +        // download svg file 
 +        download("screenshot.svg", svgElement);
 +    }
 +}
 +
 +function download(filename, text) {
 +    var element = document.createElement('a');
 +    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
 +    element.setAttribute('download', filename);
 +
 +    element.style.display = 'none';
 +    document.body.appendChild(element);
 +
 +    element.click();
 +
 +    document.body.removeChild(element);
 +}
 +
 +
 +document.getElementById('transparencyRange_2').oninput = changeTransparency;
 +document.getElementById('depthWriteCheckbox_2').onchange = toggleDepthWrite;
 +document.getElementById('changeRotationX_2').onchange = changeRotationX;
 +document.getElementById('changeRotationY_2').onchange = changeRotationY;
 +document.getElementById('changeRotationZ_2').onchange = changeRotationZ;
 +document.getElementById('resetButton_2').onclick = resetScene;
 +document.getElementById('rotationSpeedRange_2').oninput = changeRotationSpeedFactor;
 +document.getElementById('takeScreenshot_2').onclick = takeSvgScreenshot;
 +document.getElementById('showSettingsButton_2').onclick = showSettings;
 +document.getElementById('hideSettingsButton_2').onclick = hideSettings;
 +
 +
 +// ------------------ SHORTCUTS --------------------------------------------
 +// -------------------------------------------------------------------------
 +
 +/**
 + * http://www.openjs.com/scripts/events/keyboard_shortcuts/
 + * Version : 2.01.B
 + * By Binny V A
 + * License : BSD
 + */
 +shortcut = {
 + 'all_shortcuts':{},//All the shortcuts are stored in this array
 + 'add': function(shortcut_combination,callback,opt) {
 + //Provide a set of default options
 + var default_options = {
 + 'type':'keydown',
 + 'propagate':false,
 + 'disable_in_input':false,
 + 'target':document,
 + 'keycode':false
 + }
 + if(!opt) opt = default_options;
 + else {
 + for(var dfo in default_options) {
 + if(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];
 + }
 + }
 +
 + var ele = opt.target;
 + if(typeof opt.target == 'string') ele = document.getElementById(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['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields
 + 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 == 'INPUT' || element.tagName == 'TEXTAREA') return;
 + }
 +
 + //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 the user presses , when the type is onkeydown
 + if(code == 190) character="."; //If the user presses , when the type is onkeydown
 +
 + 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 = {
 + "`":"~",
 + "1":"!",
 + "2":"@",
 + "3":"#",
 + "4":"$",
 + "5":"%",
 + "6":"^",
 + "7":"&",
 + "8":"*",
 + "9":"(",
 + "0":")",
 + "-":"_",
 + "=":"+",
 + ";":":",
 + "'":"\"",
 + ",":"<",
 + ".":">",
 + "/":"?",
 + "\\":"|"
 + }
 + //Special Keys - and their codes
 + var special_keys = {
 + 'esc':27,
 + 'escape':27,
 + 'tab':9,
 + 'space':32,
 + 'return':13,
 + 'enter':13,
 + 'backspace':8,
 +
 + 'scrolllock':145,
 + 'scroll_lock':145,
 + 'scroll':145,
 + 'capslock':20,
 + 'caps_lock':20,
 + 'caps':20,
 + 'numlock':144,
 + 'num_lock':144,
 + 'num':144,
 +
 + 'pause':19,
 + 'break':19,
 +
 + 'insert':45,
 + 'home':36,
 + 'delete':46,
 + 'end':35,
 +
 + 'pageup':33,
 + 'page_up':33,
 + 'pu':33,
 +
 + 'pagedown':34,
 + 'page_down':34,
 + 'pd':34,
 +
 + 'left':37,
 + 'up':38,
 + 'right':39,
 + 'down':40,
 +
 + 'f1':112,
 + 'f2':113,
 + 'f3':114,
 + 'f4':115,
 + 'f5':116,
 + 'f6':117,
 + 'f7':118,
 + 'f8':119,
 + 'f9':120,
 + 'f10':121,
 + 'f11':122,
 + 'f12':123
 + }
 +
 + var modifiers = { 
 + shift: { wanted:false, pressed:false},
 + ctrl : { wanted:false, pressed:false},
 + alt  : { wanted:false, pressed:false},
 + meta : { wanted:false, pressed:false} //Meta is Mac specific
 + };
 +                        
 + if(e.ctrlKey) modifiers.ctrl.pressed = true;
 + if(e.shiftKey) modifiers.shift.pressed = true;
 + if(e.altKey) modifiers.alt.pressed = true;
 + if(e.metaKey)   modifiers.meta.pressed = true;
 +                        
 + for(var i=0; k=keys[i],i<keys.length; i++) {
 + //Modifiers
 + if(k == 'ctrl' || k == 'control') {
 + kp++;
 + modifiers.ctrl.wanted = true;
 +
 + } else if(k == 'shift') {
 + kp++;
 + modifiers.shift.wanted = true;
 +
 + } else if(k == 'alt') {
 + kp++;
 + modifiers.alt.wanted = true;
 + } else if(k == 'meta') {
 + 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['keycode']) {
 + if(opt['keycode'] == code) kp++;
 +
 + } 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['propagate']) { //Stop the event
 + //e.cancelBubble is supported by IE - this will kill the bubbling process.
 + e.cancelBubble = true;
 + e.returnValue = false;
 +
 + //e.stopPropagation works in Firefox.
 + if (e.stopPropagation) {
 + e.stopPropagation();
 + e.preventDefault();
 + }
 + return false;
 + }
 + }
 + }
 + this.all_shortcuts[shortcut_combination] = {
 + 'callback':func, 
 + 'target':ele, 
 + 'event': opt['type']
 + };
 + //Attach the function with the event
 + if(ele.addEventListener) ele.addEventListener(opt['type'], func, false);
 + else if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);
 + else ele['on'+opt['type']] = func;
 + },
 +
 + //Remove the shortcut - just specify the shortcut and I will remove the binding
 + 'remove':function(shortcut_combination) {
 + shortcut_combination = shortcut_combination.toLowerCase();
 + var binding = this.all_shortcuts[shortcut_combination];
 + delete(this.all_shortcuts[shortcut_combination])
 + if(!binding) return;
 + var type = binding['event'];
 + var ele = binding['target'];
 + var callback = binding['callback'];
 +
 + if(ele.detachEvent) ele.detachEvent('on'+type, callback);
 + else if(ele.removeEventListener) ele.removeEventListener(type, callback, false);
 + else ele['on'+type] = false;
 + }
 +}
 +
 +shortcut.add("Alt+Left",function() {
 + var event = new Event('click');
 + if (settingsShown){
 + document.getElementById('hideSettingsButton_2').dispatchEvent(event);
 + } else {
 + document.getElementById('showSettingsButton_2').dispatchEvent(event);
 + }
 +});
 +
 +
 +// COMMON_CODE_BLOCK_END
 +
 +});});
 +      </script>
 +   </body>
 +</html>
 +</HTML>
 +The same can be used for the visualization of the face lattice. As an example, we have a look at a ''%%morse matching%%'' of the Klein bottle with its associated critical faces. In order to see the arrowheads in the picture clearly, you ought to use graphviz or svg to vizualize it.
 +
 +<code perl>
 +> $k =  klein_bottle();
 +> svg($k->VISUAL_FACE_LATTICE->MORSE_MATCHING->FACES($k->MORSE_MATCHING->CRITICAL_FACES));
 +</code>
 +{{ tutorials:release:4.11:apps_topaz:output_1.svg }}
 +{{:tutorials:release:4.11:apps_topaz:kb_mm_faces.gif}} Here the matching of faces is denoted by reversed red arrows and the critical faces are marked red. Check that the graph remains acyclic.
 +
 +For higher dimensional complexes that cannot be visualized in 3D, you can still have a look at the graphs while ignoring any specified coordinates by using ''%%VISUAL_GRAPH%%'', ''%%VISUAL_DUAL_GRAPH%%'', or ''%%VISUAL_MIXED_GRAPH%%''. An easy example:
 +
 +<code perl>
 +> polytope::cube(3)->TRIANGULATION->VISUAL_MIXED_GRAPH;
 +</code>
 +<HTML>
 +<!--
 +polymake for knusper
 +Wed Mar  2 22:30:10 2022
 +GRAPH of 
 +-->
 +
 +
 +<html>
 +   <head>
 +      <meta charset=utf-8>
 +      <title>GRAPH of </title>
 +      <style>
 +/*
 +// COMMON_CODE_BLOCK_BEGIN
 +*/
 +         html {overflow: scroll;}
 +         strong{font-size: 18px;}
 +         canvas { z-index: 8; }
 +         input[type='radio'] {margin-left:0;}
 +         input[type='checkbox'] {margin-right:7px; margin-left: 0px; padding-left:0px;}
 +         .group{padding-bottom: 15px;}
 +         .settings * {z-index: 11; }
 +         .settings{z-index: 10; font-family: Arial, Helvetica, sans-serif; margin-left: 30px; visibility: hidden; width: 14em; height: 96%; border: solid 1px silver; padding: 2px; overflow-y: scroll; box-sizing: border-box; background-color: white; position: absolute;}
 +         .indented{margin-left: 20px; margin-top: 10px; padding-bottom: 0px;} 
 +         .shownObjectsList{overflow: auto; max-width: 150px; max-height: 150px;}
 +         .showSettingsButton{visibility: visible; z-index: 12; position: absolute }
 +         .hideSettingsButton{visibility: hidden; z-index: 12; position: absolute; opacity: 0.5}
 +         button{margin-left: 0; margin-top: 10px}
 +         img{cursor: pointer;}
 +         .suboption{padding-top: 15px;}
 +         #model10764176294 { width: 100%; height: 100%; }
 +         .threejs_container { width: 100%; height: 75vh;}
 +         .settings{max-height: 74vh} 
 +         input[type=range] {
 +           -webkit-appearance: none;
 +           padding:0; 
 +           width:90%; 
 +           margin-left: auto;
 +           margin-right: auto;
 +           margin-top: 15px;
 +           margin-bottom: 15px;
 +           display: block;
 +         }
 +         input[type=range]:focus {
 +           outline: none;
 +         }
 +         input[type=range]::-webkit-slider-runnable-track {
 +           height: 4px;
 +           cursor: pointer;
 +           animate: 0.2s;
 +           box-shadow: 0px 0px 0px #000000;
 +           background: #E3E3E3;
 +           border-radius: 0px;
 +           border: 0px solid #000000;
 +         }
 +         input[type=range]::-webkit-slider-thumb {
 +           box-shadow: 1px 1px 2px #B8B8B8;
 +           border: 1px solid #ABABAB;
 +           height: 13px;
 +           width: 25px;
 +           border-radius: 20px;
 +           background: #E0E0E0;
 +           cursor: pointer;
 +           -webkit-appearance: none;
 +           margin-top: -5px;
 +         }
 +         input[type=range]:focus::-webkit-slider-runnable-track {
 +           background: #E3E3E3;
 +         }
 +         input[type=range]::-moz-range-track {
 +           height: 4px;
 +           cursor: pointer;
 +           animate: 0.2s;
 +           box-shadow: 0px 0px 0px #000000;
 +           background: #E3E3E3;
 +           border-radius: 0px;
 +           border: 0px solid #000000;
 +         }
 +         input[type=range]::-moz-range-thumb {
 +           box-shadow: 1px 1px 2px #B8B8B8;
 +           border: 1px solid #ABABAB;
 +           height: 13px;
 +           width: 25px;
 +           border-radius: 20px;
 +           background: #E0E0E0;
 +           cursor: pointer;
 +         }
 +         input[type=range]::-ms-track {
 +           height: 4px;
 +           cursor: pointer;
 +           animate: 0.2s;
 +           background: transparent;
 +           border-color: transparent;
 +           color: transparent;
 +         }
 +         input[type=range]::-ms-fill-lower {
 +           background: #E3E3E3;
 +           border: 0px solid #000000;
 +           border-radius: 0px;
 +           box-shadow: 0px 0px 0px #000000;
 +         }
 +         input[type=range]::-ms-fill-upper {
 +           background: #E3E3E3;
 +           border: 0px solid #000000;
 +           border-radius: 0px;
 +           box-shadow: 0px 0px 0px #000000;
 +         }
 +         input[type=range]::-ms-thumb {
 +           box-shadow: 1px 1px 2px #B8B8B8;
 +           border: 1px solid #ABABAB;
 +           height: 13px;
 +           width: 25px;
 +           border-radius: 20px;
 +           background: #E0E0E0;
 +           cursor: pointer;
 +         }
 +         input[type=range]:focus::-ms-fill-lower {
 +           background: #E3E3E3;
 +         }
 +         input[type=range]:focus::-ms-fill-upper {
 +           background: #E3E3E3;
 +         }
 +/*
 +// COMMON_CODE_BLOCK_END
 +*/
 + </style>
 +   </head>
 +<body>
 +   <div class='threejs_container'>
 + <div id='settings_3' class='settings'>
 + <div class=group id='explode_3'>
 + <strong>Explode</strong>
 + <input id='explodeRange_3' type='range' min='0.00001' max=6 step=0.01 value=0.00001>
 + <div class=indented><input id='explodeCheckbox_3' type='checkbox'>Automatic explosion</div>
 + <div class=suboption>Exploding speed</div>
 + <input id='explodingSpeedRange_3' type='range' min=0 max=0.5 step=0.001 value=0.05>
 + </div>
 +
 + <div class=group id='transparency_3' class='transparency'>
 + <strong>Transparency</strong>
 + <input id='transparencyRange_3' type='range' min=0 max=1 step=0.01 value=0>
 +            <div class=indented><input id='depthWriteCheckbox_3' type='checkbox'>depthWrite</div>
 + </div>
 +
 + <div class=group id='rotation_3'>
 + <strong>Rotation</strong>
 + <div class=indented>
 + <div><input type='checkbox' id='changeRotationX_3'> x-axis</div>
 + <div><input type='checkbox' id='changeRotationY_3'> y-axis</div>
 + <div><input type='checkbox' id='changeRotationZ_3'> z-axis</div>
 + <button id='resetButton_3'>Reset</button>
 + </div>
 +
 + <div class=suboption>Rotation speed</div>
 + <input id='rotationSpeedRange_3' type='range' min=0 max=5 step=0.01 value=2>
 + </div>
 +
 +
 + <div class=group id='display_3'>
 + <strong>Display</strong>
 + <div class=indented>
 + <div id='shownObjectTypesList_3' class='shownObjectsList'></div>
 + </div>
 + <div class=suboption>Objects</div>
 + <div class=indented>
 +    <div id='shownObjectsList_3' class='shownObjectsList'></div>
 + </div>
 + </div>
 +         
 +         <div class=group id='camera_3'>
 +            <strong>Camera</strong>
 +            <div class=indented>
 +               <form>
 +                  <select id="cameraType_3">
 +                     <option value='perspective' selected> Perspective<br></option>
 +                     <option value='orthographic' > Orthographic<br></option>
 +                  </select>
 +               </form>
 +            </div>
 +         </div>
 +
 + <div class=group id='svg_3'>
 + <strong>SVG</strong>
 + <div class=indented>
 + <form>
 + <input type="radio" name='screenshotMode' value='download' id='download_3' checked> Download<br>
 + <input type="radio" name='screenshotMode' value='tab' id='tab_3' > New tab<br>
 + </form>
 + <button id='takeScreenshot_3'>Screenshot</button>
 + </div>
 + </div>
 +
 + </div> <!-- end of settings -->
 + <img id='hideSettingsButton_3' class='hideSettingsButton' src='/kernelspecs/r118/polymake/close.svg' width=20px">
 + <img id='showSettingsButton_3' class='showSettingsButton' src='/kernelspecs/r118/polymake/menu.svg' width=20px">
 +<div id="model10764176294"></div>
 +</div>
 +   <script>
 +    requirejs.config({
 +      paths: {
 +        three: '/kernelspecs/r118/polymake/three',
 +        TrackballControls: '/kernelspecs/r118/polymake/TrackballControls',
 +        OrbitControls: '/kernelspecs/r118/polymake/OrbitControls',
 +        Projector: '/kernelspecs/r118/polymake/Projector',
 +        SVGRenderer: '/kernelspecs/r118/polymake/SVGRenderer',
 +        WEBGL: '/kernelspecs/r118/polymake/WebGL',
 +      },
 +      shim: {
 +        'three': { exports: 'THREE'},
 +        'SVGRenderer': { deps: [ 'three' ], exports: 'THREE.SVGRenderer' },
 +        'WEBGL': { deps: [ 'three' ], exports: 'THREE.WEBGL' },
 +        'Projector': { deps: [ 'three' ], exports: 'THREE.Projector' },
 +        'TrackballControls': { deps: [ 'three' ], exports: 'THREE.TrackballControls' },
 +        'OrbitControls': { deps: [ 'three' ], exports: 'THREE.OrbitControls' },
 +      }
 +    });
 +    
 +    require(['three'],function(THREE){
 +        window.THREE = THREE;
 +      require(['TrackballControls', 'OrbitControls', 'Projector', 'SVGRenderer', 'WEBGL'],
 +               function(TrackballControls, OrbitControls, Projector, SVGRenderer, WEBGL) {
 +    THREE.TrackballControls = TrackballControls;
 +    THREE.OrbitControls = OrbitControls;
 +    THREE.Projector = Projector;
 +    THREE.SVGRenderer = SVGRenderer;
 +    THREE.WEBGL = WEBGL;
 +
 +// COMMON_CODE_BLOCK_BEGIN
 +
 +const intervalLength = 25; // for automatic animations
 +const explodableModel = true; 
 +const modelContains = { points: false, pointlabels: false, lines: false, edgelabels: false, faces: false, arrowheads: false };
 +const foldables = [];
 +
 +var three = document.getElementById("model10764176294");
 +var scene = new THREE.Scene();
 +var renderer = new THREE.WebGLRenderer( { antialias: true } );
 +var svgRenderer = new THREE.SVGRenderer( { antialias: true } );
 +renderer.setPixelRatio( window.devicePixelRatio );
 +renderer.setClearColor(0xFFFFFF, 1);
 +svgRenderer.setClearColor(0xFFFFFF, 1);
 +three.appendChild(renderer.domElement);
 +
 +var frustumSize = 4;
 +var cameras = [new THREE.PerspectiveCamera(75, 1, 0.1, 1000), new THREE.OrthographicCamera()];
 +cameras.forEach(function(cam) {
 +    cam.position.set(0, 0, 5);
 +    cam.lookAt(0, 0, 0);  
 +    cam.up.set(0, 1, 0);         
 +});
 +var controls = [new THREE.TrackballControls(cameras[0], three), new THREE.OrbitControls(cameras[1], three)];
 +var camera, control;
 +
 +controls[0].zoomSpeed = 0.2;
 +controls[0].rotateSpeed = 4;
 +
 +
 +// class to allow move points together with labels and spheres
 +var PMPoint = function (x,y,z) {
 +   this.vector = new THREE.Vector3(x,y,z);
 +   this.sprite = null;
 +   this.sphere = null;
 +}
 +PMPoint.prototype.addLabel = function(labelsprite) {
 +   this.sprite = labelsprite;
 +   this.sprite.position.copy(this.vector);
 +}
 +PMPoint.prototype.addSphere = function(spheremesh) {
 +   this.sphere = spheremesh;
 +   this.sphere.position.copy(this.vector);
 +}
 +PMPoint.prototype.set = function(x,y,z) {
 +   this.vector.set(x,y,z);
 +   if (this.sprite) {
 +      this.sprite.position.copy(this.vector);
 +   }
 +   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 = document.querySelector('#model10764176294');
 +
 +// 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("cancelled frame "+renderId);
 +      }
 +   });
 +});
 +
 +// configuration of the observer:
 +var config = { childList: true, characterData: true }
 +
 +// pass in the target node, as well as the observer options
 +while (target) {
 +   if (target.className=="output") {
 +      observer.observe(target, config);
 +      break;
 +   }
 +   target = target.parentNode;
 +}
 +
 +// COMMON_CODE_BLOCK_END
 +
 +var obj0 = new THREE.Object3D();
 +obj0.name = "GRAPH of ";
 +obj0.userData.explodable = 1;
 +obj0.userData.points = [];
 +obj0.userData.points.push(new PMPoint(5.92527, 0.151963, 0.0287945));
 +obj0.userData.points.push(new PMPoint(2.50343, 1.21828, 0.122767));
 +obj0.userData.points.push(new PMPoint(2.63398, -1.35529, -1.51093));
 +obj0.userData.points.push(new PMPoint(-0.971807, -0.0359154, -0.139487));
 +obj0.userData.points.push(new PMPoint(1.38834, -0.323654, 0.468936));
 +obj0.userData.points.push(new PMPoint(-2.34129, 1.57372, 0.882645));
 +obj0.userData.points.push(new PMPoint(-2.66431, -1.34603, -0.236915));
 +obj0.userData.points.push(new PMPoint(-6.4769, 0.755601, 0.334938));
 +
 +obj0.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj0.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0xFFFF00, side: THREE.DoubleSide, transparent: false } );
 +obj0.userData.pointlabels = ["0", "1", "2", "3", "4", "5", "6", "7"];
 +obj0.userData.edgeindices = [1, 0, 2, 0, 2, 1, 3, 1, 3, 2, 4, 0, 4, 1, 4, 2, 4, 3, 5, 1, 5, 3, 5, 4, 6, 2, 6, 3, 6, 4, 6, 5, 7, 3, 7, 5, 7, 6];
 +   <!-- Edge style -->
 +obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0xFFFF00, linewidth: 1.5, transparent: false } );
 +init_object(obj0);
 +scene.add(obj0);
 +
 +var obj1 = new THREE.Object3D();
 +obj1.name = "DUAL_GRAPH of ";
 +obj1.userData.explodable = 1;
 +obj1.userData.points = [];
 +obj1.userData.points.push(new PMPoint(3.9466, 0.25817, 0.0352351));
 +obj1.userData.points.push(new PMPoint(1.6888, -0.0629231, -0.559047));
 +obj1.userData.points.push(new PMPoint(0.128979, 1.09073, 0.488913));
 +obj1.userData.points.push(new PMPoint(-0.392296, -1.53259, -0.436906));
 +obj1.userData.points.push(new PMPoint(-1.9199, -0.494662, 0.212));
 +obj1.userData.points.push(new PMPoint(-3.4489, 0.102599, 0.309055));
 +
 +obj1.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj1.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0x0000FF, side: THREE.DoubleSide, transparent: false } );
 +obj1.userData.pointlabels = ["0", "1", "2", "3", "4", "5"];
 +obj1.userData.edgeindices = [1, 0, 2, 1, 3, 1, 4, 2, 4, 3, 5, 4];
 +   <!-- Edge style -->
 +obj1.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x0000FF, linewidth: 1.5, transparent: false } );
 +init_object(obj1);
 +scene.add(obj1);
 +
 +var obj2 = new THREE.Object3D();
 +obj2.name = "MIXED_GRAPH of ";
 +obj2.userData.explodable = 1;
 +obj2.userData.points = [];
 +obj2.userData.points.push(new PMPoint(5.92527, 0.151963, 0.0287945));
 +obj2.userData.points.push(new PMPoint(2.50343, 1.21828, 0.122767));
 +obj2.userData.points.push(new PMPoint(2.63398, -1.35529, -1.51093));
 +obj2.userData.points.push(new PMPoint(-0.971807, -0.0359154, -0.139487));
 +obj2.userData.points.push(new PMPoint(1.38834, -0.323654, 0.468936));
 +obj2.userData.points.push(new PMPoint(-2.34129, 1.57372, 0.882645));
 +obj2.userData.points.push(new PMPoint(-2.66431, -1.34603, -0.236915));
 +obj2.userData.points.push(new PMPoint(-6.4769, 0.755601, 0.334938));
 +obj2.userData.points.push(new PMPoint(3.9466, 0.25817, 0.0352351));
 +obj2.userData.points.push(new PMPoint(1.6888, -0.0629231, -0.559047));
 +obj2.userData.points.push(new PMPoint(0.128979, 1.09073, 0.488913));
 +obj2.userData.points.push(new PMPoint(-0.392296, -1.53259, -0.436906));
 +obj2.userData.points.push(new PMPoint(-1.9199, -0.494662, 0.212));
 +obj2.userData.points.push(new PMPoint(-3.4489, 0.102599, 0.309055));
 +
 +obj2.userData.pointradii = 0.02;
 +   <!-- Vertex style -->
 +obj2.userData.pointmaterial = new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide, transparent: false } );
 +obj2.userData.pointlabels = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"];
 +obj2.userData.edgeindices = [1, 0, 2, 0, 2, 1, 3, 1, 3, 2, 4, 0, 4, 1, 4, 2, 4, 3, 5, 1, 5, 3, 5, 4, 6, 2, 6, 3, 6, 4, 6, 5, 7, 3, 7, 5, 7, 6, 8, 0, 8, 1, 8, 2, 8, 4, 9, 1, 9, 2, 9, 3, 9, 4, 9, 8, 10, 1, 10, 3, 10, 4, 10, 5, 10, 9, 11, 2, 11, 3, 11, 4, 11, 6, 11, 9, 12, 3, 12, 4, 12, 5, 12, 6, 12, 10, 12, 11, 13, 3, 13, 5, 13, 6, 13, 7, 13, 12];
 +   <!-- Edge style -->
 +obj2.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 0.1666667, transparent: false } );
 +init_object(obj2);
 +scene.add(obj2);
 +
 +// COMMON_CODE_BLOCK_BEGIN
 +function textSpriteMaterial(message, parameters) {
 +    if ( parameters === undefined ) parameters = {};
 +    var fontface = "Helvetica";
 +    var fontsize = parameters.hasOwnProperty("fontsize") ? parameters["fontsize"] : 15;
 +    fontsize = fontsize*10;
 +    var lines = message.split('\\n');
 +    var size = 512;
 +    for(var i = 0; i<lines.length; i++){
 +        var tmp = lines[i].length;
 +        while(tmp*fontsize > size){
 +           fontsize--;
 +        }
 +    }
 +    
 +    var canvas = document.createElement('canvas');
 +    canvas.width = size;
 +    canvas.height = size;
 +    var context = canvas.getContext('2d');
 +    context.fillStyle = "rgba(255, 255, 255, 0)";
 +    context.fill();
 +    context.font = fontsize + "px " + fontface;
 +    
 +    // text color
 +    context.fillStyle = "rgba(0, 0, 0, 1.0)";
 +     for(var i = 0; i<lines.length; i++){
 +        context.fillText(lines[i], size/2, size/2+i*fontsize);
 +     }
 +    
 +    // canvas contents will be used for a texture
 +    var texture = new THREE.Texture(canvas);
 +    texture.needsUpdate = true;
 +    
 +    var spriteMaterial = new THREE.SpriteMaterial({map: texture, depthTest: true, depthWrite: false, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: 1 });
 +    return spriteMaterial;
 +}
 +
 +
 +// ---------------------- INITIALIZING OBJECTS--------------------------------------
 +// ---------------------------------------------------------------------------------
 +
 +function init_object(obj) {
 +    if (obj.userData.hasOwnProperty("pointmaterial")) {
 +        init_points(obj);
 +        modelContains.points = true;
 +    }
 +    if (obj.userData.hasOwnProperty("pointlabels")) {
 +        init_pointlabels(obj);
 +        modelContains.pointlabels = true;
 +    }
 +    if (obj.userData.hasOwnProperty("edgematerial")) {
 +        init_lines(obj);
 +        modelContains.lines = true;
 +    }
 +    if (obj.userData.hasOwnProperty("edgelabels")) {
 +        init_edgelabels(obj);
 +        modelContains.edgelabels = true;
 +    }
 +    if (obj.userData.hasOwnProperty("arrowstyle")) {
 +        init_arrowheads(obj);
 +        modelContains.arrowheads = true;
 +    }
 +    if (obj.userData.hasOwnProperty("facetmaterial")) {
 +        init_faces(obj);
 +        modelContains.faces = true;
 +    }
 +}
 +
 +function init_points(obj) {
 +    var pointgroup = new THREE.Group();
 +    pointgroup.name = "points";
 +    var points = obj.userData.points;
 +    var radii = obj.userData.pointradii;
 +    var materials = obj.userData.pointmaterial;
 +    var geometry,material;
 +    if (!Array.isArray(radii)) {
 +        geometry = new THREE.SphereBufferGeometry(radii);  
 +    }
 +    if (!Array.isArray(materials)) {
 +        material = materials;
 +    }
 +    for (var i=0; i<points.length; i++) {
 +        var point = points[i];
 +        if (Array.isArray(radii)) {
 +            if (radii[i] == 0) {
 +                continue;
 +            }
 +            geometry = new THREE.SphereBufferGeometry(radii[i]);  
 +        } 
 +        if (Array.isArray(materials)) {
 +            material = materials[i];     
 +        } 
 +        var sphere = new THREE.Mesh(geometry, material);
 +        point.addSphere(sphere);
 +        pointgroup.add(sphere);
 +    }
 +    obj.add(pointgroup);
 +}
 +
 +function init_pointlabels(obj) {
 +    var points = obj.userData.points;
 +    var labels = obj.userData.pointlabels;
 +    var pointlabels = new THREE.Group();
 +    pointlabels.name = "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);
 +            point.addLabel(sprite);
 +            pointlabels.add(sprite);
 +        }
 +    } else {
 +        var spriteMaterial = textSpriteMaterial( labels );
 +        for (var i=0; i<points.length; i++) {
 +            var point = points[i];
 +         var sprite = new THREE.Sprite(spriteMaterial);
 +            point.addLabel(sprite);
 +            pointlabels.add(sprite);
 +        }
 +    }
 +    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();
 +    geometry.setAttribute('position', bufattr);
 +    if (Array.isArray(materials)) {     
 +        for (var i=0; i<materials.length; i++) {
 +            geometry.addGroup(2*i,2,i);
 +        }
 +    }
 +    var lines = new THREE.LineSegments(geometry, materials);
 +    lines.name = "lines";
 +    obj.add(lines);
 +    updateEdgesPosition(obj);
 +}
 +
 +function init_edgelabels(obj) {
 +    var points = obj.userData.points;
 +    var edgeindices = obj.userData.edgeindices;
 +    var labels = obj.userData.edgelabels;
 +    var edgelabels = new THREE.Group();
 +    edgelabels.name = "edgelabels";
 +    if (Array.isArray(labels)) {
 +        for (var i=0; i<edgeindices.length/2; i++) {
 +            var spriteMaterial = textSpriteMaterial( labels[i] );
 +            var sprite = new THREE.Sprite(spriteMaterial);
 +            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[2*i]].vector,points[edgeindices[2*i+1]].vector).multiplyScalar(0.5));
 +            edgelabels.add(sprite);
 +        }
 +    } else {
 +        var spriteMaterial = textSpriteMaterial( labels );
 +        for (var i=0; i<edgeindices.length/2; i++) {
 +            var sprite = new THREE.Sprite(spriteMaterial);
 +            sprite.position.copy(new THREE.Vector3().addVectors(points[edgeindices[2*i]].vector,points[edgeindices[2*i+1]].vector).multiplyScalar(0.5));
 +            edgelabels.add(sprite);
 +        }
 +    }
 +    obj.add(edgelabels);
 +}
 +
 +function init_arrowheads(obj) {
 +    var arrowheads = new THREE.Group();
 +    arrowheads.name = "arrowheads";
 +    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)) {
 +        material = new THREE.MeshBasicMaterial( {color: edgematerials.color} );
 +    }
 +
 +    for (var i=0; i<edgeindices.length; i=i+2) {
 +        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,start.vector);
 +        dir.normalize();
 +        var axis = new THREE.Vector3().set(dir.z,0,-dir.x);
 +        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,dir.clone().multiplyScalar(start.radius()+dist-height/2));
 +        if (Array.isArray(edgematerials)) {
 +            material = new THREE.MeshBasicMaterial( {color: edgematerials[i].color} );
 +        }
 +        var cone = new THREE.Mesh( geometry, material );
 +        cone.quaternion.setFromAxisAngle(axis,radians);;
 +        cone.position.copy(position);;
 +        arrowheads.add(cone);
 +    }
 +    obj.add(arrowheads);
 +}
 +
 +function init_faces(obj) {
 +    var points = obj.userData.points;
 +    var facets = obj.userData.facets;
 +    obj.userData.triangleindices = [];
 +    for (var i=0; i<facets.length; i++) {
 +        facet = facets[i];
 +        for (var t=0; t<facet.length-2; t++) {
 +            obj.userData.triangleindices.push(facet[0],facet[t+1],facet[t+2]);  
 +        }
 +    }
 +    var bufarr = new Float32Array( obj.userData.triangleindices.length * 3 );
 +    var bufattr = new THREE.Float32BufferAttribute(bufarr,3);
 +    
 +    var materials = obj.userData.facetmaterial;
 +    var geometry = new THREE.BufferGeometry();
 +    var frontmaterials = [];
 +    var backmaterials = [];
 +    geometry.setAttribute('position',bufattr);
 +    if (Array.isArray(materials)) {
 +        var tricount = 0;
 +        var facet;
 +        for (var i=0; i<facets.length; i++) {
 +            facet = facets[i];
 +            geometry.addGroup(tricount,(facet.length-2)*3,i);
 +            tricount += (facet.length-2)*3;
 +        }
 +        for (var j=0; j<materials.length; j++) {
 +            var fmat = materials[j].clone()
 +            fmat.side = THREE.FrontSide;
 +            frontmaterials.push(fmat);
 +            var bmat = materials[j].clone()
 +            bmat.side = THREE.BackSide;
 +            backmaterials.push(bmat);
 +            obj.userData.facetmaterial = frontmaterials.concat(backmaterials);
 +        }
 +    } else if (materials instanceof THREE.Material) {
 +        frontmaterials = materials.clone()
 +        frontmaterials.side = THREE.FrontSide;
 +        backmaterials = materials.clone()
 +        backmaterials.side = THREE.BackSide;
 +        obj.userData.facetmaterial = [frontmaterials, backmaterials];
 +    }
 +    // duplicating the object with front and back should avoid transparency issues
 +    var backmesh = new THREE.Mesh(geometry, backmaterials);
 +    // meshname is used to show/hide objects
 +    backmesh.name = "backfaces";
 +    obj.add(backmesh);
 +    var frontmesh = new THREE.Mesh(geometry, frontmaterials);
 +    frontmesh.name = "frontfaces";
 +    obj.add(frontmesh);
 +    updateFacesPosition(obj);
 +}
 +// //INITIALIZING
 +
 +
 +function updateFacesPosition(obj) {
 +    var points = obj.userData.points;
 +    var indices = obj.userData.triangleindices;
 +    var faces = obj.getObjectByName("frontfaces");
 +    var ba = faces.geometry.getAttribute("position");
 +    for (var i=0; i<indices.length; i++) {
 +        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); 
 +    }
 +    faces.geometry.attributes.position.needsUpdate = true;
 +    
 +}
 +
 +function updateEdgesPosition(obj) {
 +    var points = obj.userData.points;
 +    var indices = obj.userData.edgeindices;
 +    var lines = obj.getObjectByName("lines");
 +    var ba = lines.geometry.getAttribute("position"); 
 +    for (var i=0; i<indices.length; i++) {
 +        ba.setXYZ(i, points[indices[i]].vector.x, points[indices[i]].vector.y ,points[indices[i]].vector.z); 
 +    }
 +    lines.geometry.attributes.position.needsUpdate = true;
 +}
 +
 +function onWindowResize() {
 +    renderer.setSize( three.clientWidth, three.clientHeight );
 +    svgRenderer.setSize( three.clientWidth, three.clientHeight );
 +    updateCamera();
 +}
 +
 +function updateCamera() {
 +    var width = three.clientWidth;
 +    var height = three.clientHeight;
 +    var aspect = width / height;
 +    if (camera.type == "OrthographicCamera") {
 +        camera.left = frustumSize * aspect / - 2;
 +        camera.right = frustumSize * aspect / 2;
 +        camera.top = frustumSize / 2;
 +        camera.bottom = - frustumSize / 2;
 +    } else if (camera.type == "PerspectiveCamera") {
 +        camera.aspect = aspect;
 +    }
 +    camera.updateProjectionMatrix();
 +}
 +
 +function changeCamera(event) {
 +    var selindex = event.currentTarget.selectedIndex;
 +    camera = cameras[selindex];
 +    control = controls[selindex];
 +    control.enabled = true; 
 +    for (var i=0; i<controls.length; i++) {
 +        if (i!=selindex) {
 +            controls[i].enabled = false;
 +        }
 +    }
 +    updateCamera();
 +}
 +
 +var camtypenode = document.getElementById('cameraType_3');
 +camtypenode.onchange = changeCamera;
 +camtypenode.dispatchEvent(new Event('change'));
 +
 +onWindowResize();
 +window.addEventListener('resize', onWindowResize);
 +
 +
 +var xRotationEnabled = false;
 +var yRotationEnabled = false;
 +var zRotationEnabled = false;
 +var rotationSpeedFactor = 1;
 +var settingsShown = false;
 +var labelsShown = true;
 +var intervals = [];
 +var timeouts = [];
 +var explodingSpeed = 0.05;
 +var explodeScale = 0.000001;
 +var XMLS = new XMLSerializer();
 +var svgElement;
 +var renderId;
 +
 +var render = function () {
 +
 + renderId = requestAnimationFrame(render);
 +
 +// comment in for automatic explosion
 +// explode(updateFactor());
 +
 +    var phi = 0.02 * rotationSpeedFactor;
 +
 +    if (xRotationEnabled) {
 +        scene.rotation.x += phi;
 +    }
 +    if (yRotationEnabled) {
 +        scene.rotation.y += phi;
 +    }
 +    if (zRotationEnabled) {
 +        scene.rotation.z += phi;
 +    }
 +
 +    control.update();
 +    renderer.render(scene, camera);
 +};
 +
 +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<scene.children.length; i++) {
 +        child = scene.children[i];
 +        if ( child.userData.hasOwnProperty("facetmaterial") ) {
 +            if (Array.isArray(child.userData.facetmaterial)) {
 +                for (var j=0; j<child.userData.facetmaterial.length; j++) {
 +                    child.userData.facetmaterial[j].opacity = opacity;
 +                }
 +            } else {
 +                child.userData.facetmaterial.opacity = opacity;
 +            }    
 +        }
 +    }
 +}
 +
 +function toggleDepthWrite(event) {
 +    depthwrite = event.currentTarget.checked;
 +    for (var i=0; i<scene.children.length; i++) {
 +        child = scene.children[i];
 +        if ( child.userData.hasOwnProperty("facetmaterial") ) {
 +            if (Array.isArray(child.userData.facetmaterial)) {
 +                for (var j=0; j<child.userData.facetmaterial.length; j++) {
 +                    child.userData.facetmaterial[j].depthWrite = depthwrite;
 +                }
 +            } else {
 +                child.userData.facetmaterial.depthWrite = depthWrite;
 +            }    
 +        }
 +    }
 +}
 +
 +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,0,0);
 +    camera.position.set(0,0,5);
 +    camera.up.set(0,1,0);
 +}
 +
 +function showSettings(event){
 +    document.getElementById('settings_3').style.visibility = 'visible';
 +    document.getElementById('showSettingsButton_3').style.visibility = 'hidden';
 +    document.getElementById('hideSettingsButton_3').style.visibility = 'visible';
 +    settingsShown = true;
 +}
 +
 +function hideSettings(event){
 +    document.getElementById('settings_3').style.visibility = 'hidden';
 +    document.getElementById('showSettingsButton_3').style.visibility = 'visible';
 +    document.getElementById('hideSettingsButton_3').style.visibility = 'hidden';
 +    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;
 +
 +    result[0] = ((a*(v*v+w*w)-u*(b*v+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*x*cos(angle)+sqrt(L)*(-c*v+b*w-w*y+v*z)*sin(angle))/L;
 +    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))/L;
 +
 +    return result;
 +}
 +
 +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<obj.userData.axes.length; j++) {
 +        rotateVertices(obj, j, scale);
 +    }
 +    update(obj);
 +    obj.userData.oldscale += scale;
 +    lookAtBarycenter(obj);
 +}
 +
 +function lookAtBarycenter(obj){
 +    control.target = barycenter(obj);
 +}
 +
 +function barycenter(obj) {
 +    var center = new THREE.Vector3(0,0,0);
 +    var points = obj.userData.points;
 +    for (var i=0; i<points.length; i++){
 +        center.add(points[i].vector);
 +    }
 +    center.divideScalar(points.length);
 +    return center;
 +}
 +
 +function rotateVertices(obj, edge, scale) {
 +    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<subtrees[edge].length; j++){
 +            var rotP = rotate(points[subtrees[edge][j]].vector, points[axes[edge][0]].vector,points[axes[edge][1]].vector, scale * (Math.PI - angles[edge]));
 +            points[subtrees[edge][j]].set(rotP[0],rotP[1],rotP[2]);
 +        }
 +    }
 +}
 +
 +function update(obj) {
 +   updateFacesPosition(obj);
 +   updateEdgesPosition(obj);
 +}
 +
 +if (foldables.length) {
 +    var settings = document.getElementById('settings_3');
 +    var foldDiv = document.createElement('div');
 +    foldDiv.id = 'fold_3';
 +    var title = document.createElement('strong');
 +    title.innerHTML = 'Fold';
 +    foldDiv.appendChild(title);
 +    foldDiv.className = 'group';
 +    for (var i=0; i<foldables.length; i++) {
 +        var range = document.createElement('input');
 +        range.type = 'range';
 +        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,settings.childNodes[0]);
 +}
 +
 +    
 +// ---------------------- EXPLOSION ------------------------------------------------
 +// ---------------------------------------------------------------------------------
 +
 +if (explodableModel) {
 +    for (var i=0; i<scene.children.length; i++) {
 +        obj = scene.children[i];
 +        if ( obj.userData.explodable ) {
 +            computeCentroid(obj);
 +        }
 +    }
 +    document.getElementById('explodeRange_3').oninput = triggerExplode;
 +    document.getElementById('explodeCheckbox_3').onchange = triggerAutomaticExplode;
 +    document.getElementById('explodingSpeedRange_3').oninput = setExplodingSpeed;
 +    explode(0.000001);
 +}
 +
 +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<scene.children.length; i++) {
 +        var obj = scene.children[i];
 +        if (obj.userData.hasOwnProperty("centroid")) { 
 +            var c = obj.userData.centroid;
 +            obj.position.set(c.x*factor, c.y*factor, c.z*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, 25));
 +}
 +
 +
 +function explodingInterval(){
 +    explodeScale += explodingSpeed;
 +    if (explodeScale <= 6){ 
 +        explode(explodeScale);
 +    }
 +    else{
 +        explode(6);
 +        explodeScale = 6;
 +        clearIntervals();
 +        timeouts.push(setTimeout(startUnexploding, 3000));
 +    }
 +    document.getElementById('explodeRange_3').value = explodeScale;
 +}
 +
 +
 +function startUnexploding(){
 +    intervals.push(setInterval(unexplodingInterval, 25));
 +}
 +
 +function unexplodingInterval(){
 +    explodeScale -= explodingSpeed;
 +    if (explodeScale >= 0){
 +        explode(explodeScale);
 +    }
 +    else {
 +        explode(0);
 +        explodeScale = 0;
 +        clearIntervals();
 +        timeouts.push(setTimeout(startExploding, 3000));
 +    }
 +    document.getElementById('explodeRange_3').value = explodeScale;
 +}
 +
 +function clearIntervals(){
 +    intervals.forEach(function(interval){
 +        clearInterval(interval);
 +    });
 +    intervals = [];
 +    timeouts.forEach(function(timeout){
 +        clearTimeout(timeout);
 +    });
 +    timeouts = [];
 +}
 +
 +// ---------------------- DISPLAY --------------------------------------------------
 +// ---------------------------------------------------------------------------------
 +
 +const objectTypeInnerHTMLs = { points: "Points", pointlabels: "Point labels", lines: "Edges", edgelabels: "Edge labels", faces: "Faces", arrowheads: "Arrow heads" };
 +const objectTypeVisible = {};
 +Object.assign(objectTypeVisible,modelContains);
 +const sortedObjectTypeKeys = Object.keys(objectTypeInnerHTMLs).sort();
 +const shownObjectTypesList = document.getElementById('shownObjectTypesList_3');
 +
 +function setVisibility(bool,objname) {
 +    for (var i=0; i<scene.children.length; 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;
 +    if (name == "faces") {
 +        setVisibility(checked,"frontfaces");
 +        setVisibility(checked,"backfaces");
 +    } else {
 +        setVisibility(checked,name);
 +    }
 +}
 +
 +for (var i=0; i<sortedObjectTypeKeys.length; i++){
 +    var key = sortedObjectTypeKeys[i];
 +    if (modelContains[key]) {
 +        var objTypeNode = document.createElement('span');
 +        objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '<br>';
 +        var checkbox = document.createElement('input');
 +        checkbox.type = 'checkbox';
 +        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('shownObjectsList_3');
 +for (var i=0; i<scene.children.length; i++){
 +    obj = scene.children[i];
 +    var objNode = document.createElement('span');
 +    objNode.innerHTML = obj.name + '<br>';
 +    var checkbox = document.createElement('input');
 +    checkbox.type = 'checkbox';
 +    checkbox.checked = true;
 +    checkbox.name = String(i);
 +    checkbox.onchange = toggleObjectVisibility;
 +    shownObjectsList.appendChild(checkbox);
 +    shownObjectsList.appendChild(objNode);
 +}
 +
 +// ---------------------- SVG ------------------------------------------------------
 +// ---------------------------------------------------------------------------------
 +
 +function takeSvgScreenshot() {
 +    if (objectTypeVisible["pointlabels"]) {
 +        setVisibility(false,"pointlabels");
 +    }
 +    if (objectTypeVisible["edgelabels"]) {
 +        setVisibility(false,"edgelabels");
 +    }
 +    svgRenderer.render(scene,camera);
 +    svgElement = XMLS.serializeToString(svgRenderer.domElement);
 +    
 +    if (objectTypeVisible["pointlabels"]) {
 +        setVisibility(true,"pointlabels");
 +    }
 +    if (objectTypeVisible["edgelabels"]) {
 +        setVisibility(true,"edgelabels");
 +    }
 +
 +    if (document.getElementById('tab_3').checked){
 +        //show in new tab
 +        var myWindow = window.open("","");
 +        myWindow.document.body.innerHTML = svgElement;
 +    } else{
 +        // download svg file 
 +        download("screenshot.svg", svgElement);
 +    }
 +}
 +
 +function download(filename, text) {
 +    var element = document.createElement('a');
 +    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
 +    element.setAttribute('download', filename);
 +
 +    element.style.display = 'none';
 +    document.body.appendChild(element);
 +
 +    element.click();
 +
 +    document.body.removeChild(element);
 +}
 +
 +
 +document.getElementById('transparencyRange_3').oninput = changeTransparency;
 +document.getElementById('depthWriteCheckbox_3').onchange = toggleDepthWrite;
 +document.getElementById('changeRotationX_3').onchange = changeRotationX;
 +document.getElementById('changeRotationY_3').onchange = changeRotationY;
 +document.getElementById('changeRotationZ_3').onchange = changeRotationZ;
 +document.getElementById('resetButton_3').onclick = resetScene;
 +document.getElementById('rotationSpeedRange_3').oninput = changeRotationSpeedFactor;
 +document.getElementById('takeScreenshot_3').onclick = takeSvgScreenshot;
 +document.getElementById('showSettingsButton_3').onclick = showSettings;
 +document.getElementById('hideSettingsButton_3').onclick = hideSettings;
 +
 +
 +// ------------------ SHORTCUTS --------------------------------------------
 +// -------------------------------------------------------------------------
 +
 +/**
 + * http://www.openjs.com/scripts/events/keyboard_shortcuts/
 + * Version : 2.01.B
 + * By Binny V A
 + * License : BSD
 + */
 +shortcut = {
 + 'all_shortcuts':{},//All the shortcuts are stored in this array
 + 'add': function(shortcut_combination,callback,opt) {
 + //Provide a set of default options
 + var default_options = {
 + 'type':'keydown',
 + 'propagate':false,
 + 'disable_in_input':false,
 + 'target':document,
 + 'keycode':false
 + }
 + if(!opt) opt = default_options;
 + else {
 + for(var dfo in default_options) {
 + if(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];
 + }
 + }
 +
 + var ele = opt.target;
 + if(typeof opt.target == 'string') ele = document.getElementById(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['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields
 + 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 == 'INPUT' || element.tagName == 'TEXTAREA') return;
 + }
 +
 + //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 the user presses , when the type is onkeydown
 + if(code == 190) character="."; //If the user presses , when the type is onkeydown
 +
 + 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 = {
 + "`":"~",
 + "1":"!",
 + "2":"@",
 + "3":"#",
 + "4":"$",
 + "5":"%",
 + "6":"^",
 + "7":"&",
 + "8":"*",
 + "9":"(",
 + "0":")",
 + "-":"_",
 + "=":"+",
 + ";":":",
 + "'":"\"",
 + ",":"<",
 + ".":">",
 + "/":"?",
 + "\\":"|"
 + }
 + //Special Keys - and their codes
 + var special_keys = {
 + 'esc':27,
 + 'escape':27,
 + 'tab':9,
 + 'space':32,
 + 'return':13,
 + 'enter':13,
 + 'backspace':8,
 +
 + 'scrolllock':145,
 + 'scroll_lock':145,
 + 'scroll':145,
 + 'capslock':20,
 + 'caps_lock':20,
 + 'caps':20,
 + 'numlock':144,
 + 'num_lock':144,
 + 'num':144,
 +
 + 'pause':19,
 + 'break':19,
 +
 + 'insert':45,
 + 'home':36,
 + 'delete':46,
 + 'end':35,
 +
 + 'pageup':33,
 + 'page_up':33,
 + 'pu':33,
 +
 + 'pagedown':34,
 + 'page_down':34,
 + 'pd':34,
 +
 + 'left':37,
 + 'up':38,
 + 'right':39,
 + 'down':40,
 +
 + 'f1':112,
 + 'f2':113,
 + 'f3':114,
 + 'f4':115,
 + 'f5':116,
 + 'f6':117,
 + 'f7':118,
 + 'f8':119,
 + 'f9':120,
 + 'f10':121,
 + 'f11':122,
 + 'f12':123
 + }
 +
 + var modifiers = { 
 + shift: { wanted:false, pressed:false},
 + ctrl : { wanted:false, pressed:false},
 + alt  : { wanted:false, pressed:false},
 + meta : { wanted:false, pressed:false} //Meta is Mac specific
 + };
 +                        
 + if(e.ctrlKey) modifiers.ctrl.pressed = true;
 + if(e.shiftKey) modifiers.shift.pressed = true;
 + if(e.altKey) modifiers.alt.pressed = true;
 + if(e.metaKey)   modifiers.meta.pressed = true;
 +                        
 + for(var i=0; k=keys[i],i<keys.length; i++) {
 + //Modifiers
 + if(k == 'ctrl' || k == 'control') {
 + kp++;
 + modifiers.ctrl.wanted = true;
 +
 + } else if(k == 'shift') {
 + kp++;
 + modifiers.shift.wanted = true;
 +
 + } else if(k == 'alt') {
 + kp++;
 + modifiers.alt.wanted = true;
 + } else if(k == 'meta') {
 + 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['keycode']) {
 + if(opt['keycode'] == code) kp++;
 +
 + } 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['propagate']) { //Stop the event
 + //e.cancelBubble is supported by IE - this will kill the bubbling process.
 + e.cancelBubble = true;
 + e.returnValue = false;
 +
 + //e.stopPropagation works in Firefox.
 + if (e.stopPropagation) {
 + e.stopPropagation();
 + e.preventDefault();
 + }
 + return false;
 + }
 + }
 + }
 + this.all_shortcuts[shortcut_combination] = {
 + 'callback':func, 
 + 'target':ele, 
 + 'event': opt['type']
 + };
 + //Attach the function with the event
 + if(ele.addEventListener) ele.addEventListener(opt['type'], func, false);
 + else if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);
 + else ele['on'+opt['type']] = func;
 + },
 +
 + //Remove the shortcut - just specify the shortcut and I will remove the binding
 + 'remove':function(shortcut_combination) {
 + shortcut_combination = shortcut_combination.toLowerCase();
 + var binding = this.all_shortcuts[shortcut_combination];
 + delete(this.all_shortcuts[shortcut_combination])
 + if(!binding) return;
 + var type = binding['event'];
 + var ele = binding['target'];
 + var callback = binding['callback'];
 +
 + if(ele.detachEvent) ele.detachEvent('on'+type, callback);
 + else if(ele.removeEventListener) ele.removeEventListener(type, callback, false);
 + else ele['on'+type] = false;
 + }
 +}
 +
 +shortcut.add("Alt+Left",function() {
 + var event = new Event('click');
 + if (settingsShown){
 + document.getElementById('hideSettingsButton_3').dispatchEvent(event);
 + } else {
 + document.getElementById('showSettingsButton_3').dispatchEvent(event);
 + }
 +});
 +
 +
 +// COMMON_CODE_BLOCK_END
 +
 +});});
 +      </script>
 +   </body>
 +</html>
 +</HTML>
 +shows the primal and dual graph of the polytope together with an edge between a primal and a dual node iff the primal node represents a vertex of the corresponding facet of the dual node.
 +
 +{{:tutorials:release:4.11:apps_topaz:cube_graph.png}}
 +
 +Visualization of the ''%%HASSE_DIAGRAM%%'' is possible via ''%%VISUAL_FACE_LATTICE%%''. It renders the graph in a .pdf file. You can even pipe the tikz code to whatever location using the ''%%tikz%%'' client:
 +
 +<code>
 +tikz($s->VISUAL_FACE_LATTICE, File=>"/path/to/file.tikz");
 +</code>
  
  • user_guide/tutorials/latest/apps_topaz.txt
  • Last modified: 2023/11/06 10:57
  • by 127.0.0.1