|
|
- <!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>
-
-
|
