alpcentaur
1 year ago
12 changed files with 103372 additions and 22 deletions
Unified View
Diff Options
-
+151 -03d.php
-
BINKaosCubeTopThick2mm_cut_joints.stl
-
BINKaosCube_support_cable.stl
-
+1175 -0OrbitControls.js
-
+389 -0STLLoader.js
-
+4 -3buy.php
-
+10 -4diy.php
-
+70 -3index.css
-
+7 -6index.php
-
+9 -6locale.yaml
-
+51116 -0three.js
-
+50441 -0three.module.js
+ 151
- 0
3d.php
View File
| @ -0,0 +1,151 @@ | |||||
| <!DOCTYPE html> | |||||
| <html> | |||||
| <?php | |||||
| $lang=$_GET['lang']; | |||||
| if ( in_array ($lang, array('en-US'))){ | |||||
| $loc = "$lang".".utf8"; | |||||
| $loc1 = $lang; | |||||
| } | |||||
| else { | |||||
| $loc = "de-DE"; | |||||
| $loc1 = "de-DE"; | |||||
| } | |||||
| include "Spyc.php"; | |||||
| $localeYaml = Spyc::YAMLLoad('locale.yaml'); | |||||
| $domain = "messages"; | |||||
| setlocale(LC_MESSAGES, $loc); | |||||
| setlocale(LC_ALL, $loc); | |||||
| $results = putenv("LC_ALL=$loc"); | |||||
| $results = putenv("LC_MESSAGES=$loc"); | |||||
| ?> | |||||
| <head> | |||||
| <meta charset="utf-8"> | |||||
| <title><?php echo $localeYaml['title'][$loc1]?></title> | |||||
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |||||
| <link rel="stylesheet" href="index.css"> | |||||
| <style> | |||||
| body { margin: 0; background-color: deeppink;} | |||||
| .grid-container { | |||||
| display: grid; | |||||
| grid-template-columns: auto; | |||||
| @media only screen and (max-width: 500px) { | |||||
| .grid-container { | |||||
| display: grid; | |||||
| grid-template-columns: auto; | |||||
| } | |||||
| [class*="model0"] { | |||||
| width: 90vw; | |||||
| height: 40vh; | |||||
| } | |||||
| [class*="model1"] { | |||||
| width: 90vw; | |||||
| height: 40vh; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| </head> | |||||
| <body> | |||||
| <center> | |||||
| <header style="height: 10 vh;"> | |||||
| <center> | |||||
| <a href="/" style="text-decoration:none; color:black;"><img style="height: 15vh;" src="static/KaosCubeLogo.png" alt="logo"></a> | |||||
| </center> | |||||
| </header> | |||||
| </center> | |||||
| <center> | |||||
| <div class="grid-container"> | |||||
| <h1 style="background-color:white; height: 5vh; font-size:3vh; justify-self: center; width: 90vw;"> Die STL Files zum Download gibt es <a href=""> hier </a> </h1> | |||||
| <div class="model1" id="model1" style="width: 80vw; height: 80vh; justify-self: center; background-color: white;"> </div> | |||||
| <div style="height: 5vh; background-color:deeppink;"></div> | |||||
| <div class="model0" id="model0" style="width: 80vw; height: 80vh; justify-self: center; background-color: white;"> </div> | |||||
| </div> | |||||
| </center> | |||||
| </body> | |||||
| </html> | |||||
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script> | |||||
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script> | |||||
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/STLLoader.js"></script> | |||||
| <script type="text/javascript"> | |||||
| function STLViewer(model, elementID) { | |||||
| var elem = document.getElementById(elementID) | |||||
| var camera = new THREE.PerspectiveCamera(70, | |||||
| elem.clientWidth/elem.clientHeight, 1, 1000); | |||||
| var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); | |||||
| renderer.setSize(elem.clientWidth, elem.clientHeight); | |||||
| elem.appendChild(renderer.domElement); | |||||
| window.addEventListener('resize', function () { | |||||
| renderer.setSize(elem.clientWidth, elem.clientHeight); | |||||
| camera.aspect = elem.clientWidth/elem.clientHeight; | |||||
| camera.updateProjectionMatrix(); | |||||
| }, false); | |||||
| var controls = new THREE.OrbitControls(camera, renderer.domElement); | |||||
| controls.enableDamping = true; | |||||
| controls.rotateSpeed = 2; | |||||
| controls.dampingFactor = 0.1; | |||||
| controls.enableZoom = true; | |||||
| controls.autoRotate = true; | |||||
| controls.autoRotateSpeed = .75; | |||||
| var scene = new THREE.Scene(); | |||||
| scene.add(new THREE.HemisphereLight(0xffffff, 1.5)); | |||||
| (new THREE.STLLoader()).load(model, function (geometry) { | |||||
| var material = new THREE.MeshPhongMaterial({ | |||||
| color: 0xff1493, | |||||
| specular: 100, | |||||
| shininess: 100 }); | |||||
| var mesh = new THREE.Mesh(geometry, material); | |||||
| scene.add(mesh); | |||||
| var middle = new THREE.Vector3(); | |||||
| geometry.computeBoundingBox(); | |||||
| geometry.boundingBox.getCenter(middle); | |||||
| mesh.geometry.applyMatrix(new THREE.Matrix4().makeTranslation( | |||||
| -middle.x, -middle.y, -middle.z ) ); | |||||
| var largestDimension = Math.max(geometry.boundingBox.max.x, | |||||
| geometry.boundingBox.max.y, | |||||
| geometry.boundingBox.max.z) | |||||
| camera.position.z = largestDimension * 2.5; | |||||
| var animate = function () { | |||||
| requestAnimationFrame(animate); | |||||
| controls.update(); | |||||
| renderer.render(scene, camera); | |||||
| }; | |||||
| animate(); | |||||
| }); | |||||
| } | |||||
| window.onload = function() { | |||||
| STLViewer("KaosCubeTopThick2mm_cut_joints.stl", "model0") | |||||
| STLViewer("KaosCube_support_cable.stl", "model1") | |||||
| } | |||||
| </script> | |||||
BIN
KaosCubeTopThick2mm_cut_joints.stl
View File
BIN
KaosCube_support_cable.stl
View File
+ 1175
- 0
OrbitControls.js
File diff suppressed because it is too large
View File
+ 389
- 0
STLLoader.js
View File
| @ -0,0 +1,389 @@ | |||||
| /** | |||||
| * @author aleeper / http://adamleeper.com/ | |||||
| * @author mrdoob / http://mrdoob.com/ | |||||
| * @author gero3 / https://github.com/gero3 | |||||
| * | |||||
| * Description: A THREE loader for STL ASCII files, as created by Solidworks and other CAD programs. | |||||
| * | |||||
| * Supports both binary and ASCII encoded files, with automatic detection of type. | |||||
| * | |||||
| * Limitations: | |||||
| * Binary decoding ignores header. There doesn't seem to be much of a use for it. | |||||
| * There is perhaps some question as to how valid it is to always assume little-endian-ness. | |||||
| * ASCII decoding assumes file is UTF-8. Seems to work for the examples... | |||||
| * | |||||
| * Usage: | |||||
| * var loader = new THREE.STLLoader(); | |||||
| * loader.addEventListener( 'load', function ( event ) { | |||||
| * | |||||
| * var geometry = event.content; | |||||
| * scene.add( new THREE.Mesh( geometry ) ); | |||||
| * | |||||
| * } ); | |||||
| * loader.load( './models/stl/slotted_disk.stl' ); | |||||
| */ | |||||
| THREE.STLLoader = function () {}; | |||||
| THREE.STLLoader.prototype = { | |||||
| constructor: THREE.STLLoader, | |||||
| addEventListener: THREE.EventDispatcher.prototype.addEventListener, | |||||
| hasEventListener: THREE.EventDispatcher.prototype.hasEventListener, | |||||
| removeEventListener: THREE.EventDispatcher.prototype.removeEventListener, | |||||
| dispatchEvent: THREE.EventDispatcher.prototype.dispatchEvent | |||||
| }; | |||||
| THREE.STLLoader.prototype.load = function (url, callback) { | |||||
| var scope = this; | |||||
| var xhr = new XMLHttpRequest(); | |||||
| function onloaded( event ) { | |||||
| if ( event.target.status === 200 || event.target.status === 0 ) { | |||||
| var geometry = scope.parse( event.target.response || event.target.responseText ); | |||||
| scope.dispatchEvent( { type: 'load', content: geometry } ); | |||||
| if ( callback ) callback( geometry ); | |||||
| } else { | |||||
| scope.dispatchEvent( { type: 'error', message: 'Couldn\'t load URL [' + url + ']', | |||||
| response: event.target.responseText } ); | |||||
| } | |||||
| } | |||||
| xhr.addEventListener( 'load', onloaded, false ); | |||||
| xhr.addEventListener( 'progress', function ( event ) { | |||||
| scope.dispatchEvent( { type: 'progress', loaded: event.loaded, total: event.total } ); | |||||
| }, false ); | |||||
| xhr.addEventListener( 'error', function () { | |||||
| scope.dispatchEvent( { type: 'error', message: 'Couldn\'t load URL [' + url + ']' } ); | |||||
| }, false ); | |||||
| xhr.overrideMimeType('text/plain; charset=x-user-defined'); | |||||
| xhr.open( 'GET', url, true ); | |||||
| xhr.responseType = "arraybuffer"; | |||||
| xhr.send( null ); | |||||
| }; | |||||
| THREE.STLLoader.prototype.parse = function (data) { | |||||
| var isBinary = function () { | |||||
| var expect, face_size, n_faces, reader; | |||||
| reader = new DataView( binData ); | |||||
| face_size = (32 / 8 * 3) + ((32 / 8 * 3) * 3) + (16 / 8); | |||||
| n_faces = reader.getUint32(80,true); | |||||
| expect = 80 + (32 / 8) + (n_faces * face_size); | |||||
| return expect === reader.byteLength; | |||||
| }; | |||||
| var binData = this.ensureBinary( data ); | |||||
| return isBinary() | |||||
| ? this.parseBinary( binData ) | |||||
| : this.parseASCII( this.ensureString( data ) ); | |||||
| }; | |||||
| THREE.STLLoader.prototype.parseBinary = function (data) { | |||||
| var face, geometry, n_faces, reader, length, normal, i, dataOffset, faceLength, start, vertexstart; | |||||
| reader = new DataView( data ); | |||||
| n_faces = reader.getUint32(80,true); | |||||
| geometry = new THREE.Geometry(); | |||||
| dataOffset = 84; | |||||
| faceLength = 12 * 4 + 2; | |||||
| for (face = 0; face < n_faces; face++) { | |||||
| start = dataOffset + face * faceLength; | |||||
| normal = new THREE.Vector3( | |||||
| reader.getFloat32(start,true), | |||||
| reader.getFloat32(start + 4,true), | |||||
| reader.getFloat32(start + 8,true) | |||||
| ); | |||||
| for (i = 1; i <= 3; i++) { | |||||
| vertexstart = start + i * 12; | |||||
| geometry.vertices.push( | |||||
| new THREE.Vector3( | |||||
| reader.getFloat32(vertexstart,true), | |||||
| reader.getFloat32(vertexstart +4,true), | |||||
| reader.getFloat32(vertexstart + 8,true) | |||||
| ) | |||||
| ); | |||||
| } | |||||
| length = geometry.vertices.length; | |||||
| geometry.faces.push(new THREE.Face3(length - 3, length - 2, length - 1, normal)); | |||||
| } | |||||
| //geometry.computeCentroids(); | |||||
| geometry.computeBoundingSphere(); | |||||
| return geometry; | |||||
| }; | |||||
| THREE.STLLoader.prototype.parseASCII = function (data) { | |||||
| var geometry, length, normal, patternFace, patternNormal, patternVertex, result, text; | |||||
| geometry = new THREE.Geometry(); | |||||
| patternFace = /facet([\s\S]*?)endfacet/g; | |||||
| while (((result = patternFace.exec(data)) != null)) { | |||||
| text = result[0]; | |||||
| patternNormal = /normal[\s]+([\-+]?[0-9]+\.?[0-9]*([eE][\-+]?[0-9]+)?)+[\s]+([\-+]?[0-9]*\.?[0-9]+([eE][\-+]?[0-9]+)?)+[\s]+([\-+]?[0-9]*\.?[0-9]+([eE][\-+]?[0-9]+)?)+/g; | |||||
| while (((result = patternNormal.exec(text)) != null)) { | |||||
| normal = new THREE.Vector3(parseFloat(result[1]), parseFloat(result[3]), parseFloat(result[5])); | |||||
| } | |||||
| patternVertex = /vertex[\s]+([\-+]?[0-9]+\.?[0-9]*([eE][\-+]?[0-9]+)?)+[\s]+([\-+]?[0-9]*\.?[0-9]+([eE][\-+]?[0-9]+)?)+[\s]+([\-+]?[0-9]*\.?[0-9]+([eE][\-+]?[0-9]+)?)+/g; | |||||
| while (((result = patternVertex.exec(text)) != null)) { | |||||
| geometry.vertices.push(new THREE.Vector3(parseFloat(result[1]), parseFloat(result[3]), parseFloat(result[5]))); | |||||
| } | |||||
| length = geometry.vertices.length; | |||||
| geometry.faces.push(new THREE.Face3(length - 3, length - 2, length - 1, normal)); | |||||
| } | |||||
| geometry.computeCentroids(); | |||||
| geometry.computeBoundingBox(); | |||||
| geometry.computeBoundingSphere(); | |||||
| return geometry; | |||||
| }; | |||||
| THREE.STLLoader.prototype.ensureString = function (buf) { | |||||
| if (typeof buf !== "string"){ | |||||
| var array_buffer = new Uint8Array(buf); | |||||
| var str = ''; | |||||
| for(var i = 0; i < buf.byteLength; i++) { | |||||
| str += String.fromCharCode(array_buffer[i]); // implicitly assumes little-endian | |||||
| } | |||||
| return str; | |||||
| } else { | |||||
| return buf; | |||||
| } | |||||
| }; | |||||
| THREE.STLLoader.prototype.ensureBinary = function (buf) { | |||||
| if (typeof buf === "string"){ | |||||
| var array_buffer = new Uint8Array(buf.length); | |||||
| for(var i = 0; i < buf.length; i++) { | |||||
| array_buffer[i] = buf.charCodeAt(i) & 0xff; // implicitly assumes little-endian | |||||
| } | |||||
| return array_buffer.buffer || array_buffer; | |||||
| } else { | |||||
| return buf; | |||||
| } | |||||
| }; | |||||
| if ( typeof DataView === 'undefined'){ | |||||
| DataView = function(buffer, byteOffset, byteLength){ | |||||
| this.buffer = buffer; | |||||
| this.byteOffset = byteOffset || 0; | |||||
| this.byteLength = byteLength || buffer.byteLength || buffer.length; | |||||
| this._isString = typeof buffer === "string"; | |||||
| } | |||||
| DataView.prototype = { | |||||
| _getCharCodes:function(buffer,start,length){ | |||||
| start = start || 0; | |||||
| length = length || buffer.length; | |||||
| var end = start + length; | |||||
| var codes = []; | |||||
| for (var i = start; i < end; i++) { | |||||
| codes.push(buffer.charCodeAt(i) & 0xff); | |||||
| } | |||||
| return codes; | |||||
| }, | |||||
| _getBytes: function (length, byteOffset, littleEndian) { | |||||
| var result; | |||||
| // Handle the lack of endianness | |||||
| if (littleEndian === undefined) { | |||||
| littleEndian = this._littleEndian; | |||||
| } | |||||
| // Handle the lack of byteOffset | |||||
| if (byteOffset === undefined) { | |||||
| byteOffset = this.byteOffset; | |||||
| } else { | |||||
| byteOffset = this.byteOffset + byteOffset; | |||||
| } | |||||
| if (length === undefined) { | |||||
| length = this.byteLength - byteOffset; | |||||
| } | |||||
| // Error Checking | |||||
| if (typeof byteOffset !== 'number') { | |||||
| throw new TypeError('DataView byteOffset is not a number'); | |||||
| } | |||||
| if (length < 0 || byteOffset + length > this.byteLength) { | |||||
| throw new Error('DataView length or (byteOffset+length) value is out of bounds'); | |||||
| } | |||||
| if (this.isString){ | |||||
| result = this._getCharCodes(this.buffer, byteOffset, byteOffset + length); | |||||
| } else { | |||||
| result = this.buffer.slice(byteOffset, byteOffset + length); | |||||
| } | |||||
| if (!littleEndian && length > 1) { | |||||
| if (!(result instanceof Array)) { | |||||
| result = Array.prototype.slice.call(result); | |||||
| } | |||||
| result.reverse(); | |||||
| } | |||||
| return result; | |||||
| }, | |||||
| // Compatibility functions on a String Buffer | |||||
| getFloat64: function (byteOffset, littleEndian) { | |||||
| var b = this._getBytes(8, byteOffset, littleEndian), | |||||
| sign = 1 - (2 * (b[7] >> 7)), | |||||
| exponent = ((((b[7] << 1) & 0xff) << 3) | (b[6] >> 4)) - ((1 << 10) - 1), | |||||
| // Binary operators such as | and << operate on 32 bit values, using + and Math.pow(2) instead | |||||
| mantissa = ((b[6] & 0x0f) * Math.pow(2, 48)) + (b[5] * Math.pow(2, 40)) + (b[4] * Math.pow(2, 32)) + | |||||
| (b[3] * Math.pow(2, 24)) + (b[2] * Math.pow(2, 16)) + (b[1] * Math.pow(2, 8)) + b[0]; | |||||
| if (exponent === 1024) { | |||||
| if (mantissa !== 0) { | |||||
| return NaN; | |||||
| } else { | |||||
| return sign * Infinity; | |||||
| } | |||||
| } | |||||
| if (exponent === -1023) { // Denormalized | |||||
| return sign * mantissa * Math.pow(2, -1022 - 52); | |||||
| } | |||||
| return sign * (1 + mantissa * Math.pow(2, -52)) * Math.pow(2, exponent); | |||||
| }, | |||||
| getFloat32: function (byteOffset, littleEndian) { | |||||
| var b = this._getBytes(4, byteOffset, littleEndian), | |||||
| sign = 1 - (2 * (b[3] >> 7)), | |||||
| exponent = (((b[3] << 1) & 0xff) | (b[2] >> 7)) - 127, | |||||
| mantissa = ((b[2] & 0x7f) << 16) | (b[1] << 8) | b[0]; | |||||
| if (exponent === 128) { | |||||
| if (mantissa !== 0) { | |||||
| return NaN; | |||||
| } else { | |||||
| return sign * Infinity; | |||||
| } | |||||
| } | |||||
| if (exponent === -127) { // Denormalized | |||||
| return sign * mantissa * Math.pow(2, -126 - 23); | |||||
| } | |||||
| return sign * (1 + mantissa * Math.pow(2, -23)) * Math.pow(2, exponent); | |||||
| }, | |||||
| getInt32: function (byteOffset, littleEndian) { | |||||
| var b = this._getBytes(4, byteOffset, littleEndian); | |||||
| return (b[3] << 24) | (b[2] << 16) | (b[1] << 8) | b[0]; | |||||
| }, | |||||
| getUint32: function (byteOffset, littleEndian) { | |||||
| return this.getInt32(byteOffset, littleEndian) >>> 0; | |||||
| }, | |||||
| getInt16: function (byteOffset, littleEndian) { | |||||
| return (this.getUint16(byteOffset, littleEndian) << 16) >> 16; | |||||
| }, | |||||
| getUint16: function (byteOffset, littleEndian) { | |||||
| var b = this._getBytes(2, byteOffset, littleEndian); | |||||
| return (b[1] << 8) | b[0]; | |||||
| }, | |||||
| getInt8: function (byteOffset) { | |||||
| return (this.getUint8(byteOffset) << 24) >> 24; | |||||
| }, | |||||
| getUint8: function (byteOffset) { | |||||
| return this._getBytes(1, byteOffset)[0]; | |||||
| } | |||||
| }; | |||||
| } | |||||