<!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="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("stl-files/KaosCubeTopThick2mm_cut_joints.stl", "model0")
    STLViewer("stl-files/KaosCube_support_cable.stl", "model1")
}
</script>


