152 lines
4 KiB
PHP
152 lines
4 KiB
PHP
|
<!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>
|
||
|
|
|
||
|
|
|