alpcentaur
/
kc-website

<!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>		<a href="/" style="text-decoration:none; color:white;"><img style="height: 15vh;" src="static/icons/back.png" alt="back"></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="https://code.basabuuka.org/alpcentaur/kc-website/src/branch/master/stl-files"> 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="three.min.js"></script> <script src="OrbitControls.js"></script><script src="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("stl-files/KaosCubeTopThick2mm_cut_joints.stl", "model0")    STLViewer("stl-files/KaosCube_support_cable.stl", "model1")}</script>