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.
 
 

151 lines
4.0 KiB

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