The website of the KaosCube
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

152 lines
4.1 KiB

  1. <!DOCTYPE html>
  2. <html>
  3. <?php
  4. $lang=$_GET['lang'];
  5. if ( in_array ($lang, array('en-US'))){
  6. $loc = "$lang".".utf8";
  7. $loc1 = $lang;
  8. }
  9. else {
  10. $loc = "de-DE";
  11. $loc1 = "de-DE";
  12. }
  13. include "Spyc.php";
  14. $localeYaml = Spyc::YAMLLoad('locale.yaml');
  15. $domain = "messages";
  16. setlocale(LC_MESSAGES, $loc);
  17. setlocale(LC_ALL, $loc);
  18. $results = putenv("LC_ALL=$loc");
  19. $results = putenv("LC_MESSAGES=$loc");
  20. ?>
  21. <head>
  22. <meta charset="utf-8">
  23. <title><?php echo $localeYaml['title'][$loc1]?></title>
  24. <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
  25. <link rel="stylesheet" href="index.css">
  26. <style>
  27. body { margin: 0; background-color: deeppink;}
  28. .grid-container {
  29. display: grid;
  30. grid-template-columns: auto;
  31. @media only screen and (max-width: 500px) {
  32. .grid-container {
  33. display: grid;
  34. grid-template-columns: auto;
  35. }
  36. [class*="model0"] {
  37. width: 90vw;
  38. height: 40vh;
  39. }
  40. [class*="model1"] {
  41. width: 90vw;
  42. height: 40vh;
  43. }
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <center>
  49. <header style="height: 10 vh;">
  50. <center>
  51. <a href="/" style="text-decoration:none; color:black;"><img style="height: 15vh;" src="static/KaosCubeLogo.png" alt="logo"></a>
  52. <a href="/" style="text-decoration:none; color:white;"><img style="height: 15vh;" src="static/icons/back.png" alt="back"></a>
  53. </center>
  54. </header>
  55. </center>
  56. <center>
  57. <div class="grid-container">
  58. <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>
  59. <div class="model1" id="model1" style="width: 80vw; height: 80vh; justify-self: center; background-color: white;"> </div>
  60. <div style="height: 5vh; background-color:deeppink;"></div>
  61. <div class="model0" id="model0" style="width: 80vw; height: 80vh; justify-self: center; background-color: white;"> </div>
  62. </div>
  63. </center>
  64. </body>
  65. </html>
  66. <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
  67. <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
  68. <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/STLLoader.js"></script>
  69. <script type="text/javascript">
  70. function STLViewer(model, elementID) {
  71. var elem = document.getElementById(elementID)
  72. var camera = new THREE.PerspectiveCamera(70,
  73. elem.clientWidth/elem.clientHeight, 1, 1000);
  74. var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  75. renderer.setSize(elem.clientWidth, elem.clientHeight);
  76. elem.appendChild(renderer.domElement);
  77. window.addEventListener('resize', function () {
  78. renderer.setSize(elem.clientWidth, elem.clientHeight);
  79. camera.aspect = elem.clientWidth/elem.clientHeight;
  80. camera.updateProjectionMatrix();
  81. }, false);
  82. var controls = new THREE.OrbitControls(camera, renderer.domElement);
  83. controls.enableDamping = true;
  84. controls.rotateSpeed = 2;
  85. controls.dampingFactor = 0.1;
  86. controls.enableZoom = true;
  87. controls.autoRotate = true;
  88. controls.autoRotateSpeed = .75;
  89. var scene = new THREE.Scene();
  90. scene.add(new THREE.HemisphereLight(0xffffff, 1.5));
  91. (new THREE.STLLoader()).load(model, function (geometry) {
  92. var material = new THREE.MeshPhongMaterial({
  93. color: 0xff1493,
  94. specular: 100,
  95. shininess: 100 });
  96. var mesh = new THREE.Mesh(geometry, material);
  97. scene.add(mesh);
  98. var middle = new THREE.Vector3();
  99. geometry.computeBoundingBox();
  100. geometry.boundingBox.getCenter(middle);
  101. mesh.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(
  102. -middle.x, -middle.y, -middle.z ) );
  103. var largestDimension = Math.max(geometry.boundingBox.max.x,
  104. geometry.boundingBox.max.y,
  105. geometry.boundingBox.max.z)
  106. camera.position.z = largestDimension * 2.5;
  107. var animate = function () {
  108. requestAnimationFrame(animate);
  109. controls.update();
  110. renderer.render(scene, camera);
  111. };
  112. animate();
  113. });
  114. }
  115. window.onload = function() {
  116. STLViewer("STL-Files/KaosCubeTopThick2mm_cut_joints.stl", "model0")
  117. STLViewer("STL-Files/KaosCube_support_cable.stl", "model1")
  118. }
  119. </script>