<?php
if (empty($_REQUEST['component'])) {
$list = empty($_REQUEST['list'])? array(): explode(',', $_REQUEST['list']);
if (!empty($_REQUEST['machine'])) {
$f = json_decode(file_get_contents($_REQUEST['machine'].'_lattice.json'), true);
foreach($f as $facility) foreach($facility['sections'] as $sec) foreach($sec['components'] as $c) $l[$c['type']] = true;
$list = array_keys($l);
// print_r($l); exit();
}
$f = scandir('./components/src');
$background = empty($_REQUEST['background'])? '': " background-color: {$_REQUEST['background']};";
echo "<div class='flex-container' style='display: flex; flex-direction: row; flex-wrap: wrap;$background'>\n";
foreach($f as $file) {
if (strpos($file, 'bundle')!==false) continue;
if (isset($_REQUEST['svg'])) {
if (strpos($file, '.svg')===false) continue;
$comp = strtr($file, array('.svg'=>''));
if (!empty($list) && !in_array($comp, $list)) continue;
echo "<div><img style='max-width: 250px;' src='./components/src/$file'><br><br>$file<br><br></div>";
}
else {
if (strpos($file, '.js')===false) continue;
$comp = strtr($file, array('.js'=>''));
if (!empty($list) && !in_array($comp, $list)) continue;
echo "<div style='text-align: center;'><a href='?component=$comp'><img style='max-width: 250px;' src='./components/preview/{$comp}_preview.jpg'><br>$comp</a></div>\n";
}
}
die("</div>");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Components</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #ccc;
color: #000;
}
a {
color: #f00;
}
#c {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="info" style='display: none'>
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - map controls
<span id="timer" title="loading" style="display: none"><img src="../../egiga2m/img/timer.gif"></span>
camera position, x: <input id="cameraX" size="20" value="-7500"> y: <input id="cameraY" size="20" value="1500"> z: <input id="cameraZ" size="20" value="4500">
camera rotation, x: <input id="rx" size="20" value="-0.6"> y: <input id="ry" size="20" value="-0.3"> z: <input id="rz" size="20" value="-0.2">
cdebug <input id="cdebug" size="3" value="0">
</div>
<div style="position: absolute; left: 5px; bottom: 5px;">
<button onclick="document.location = './magnet.php?component=<?php echo $_REQUEST['component'];?>'">1x</button>
<button onclick="document.location = './magnet.php?component=<?php echo $_REQUEST['component'];?>&mul=2'">8x</button>
<button onclick="document.location = './magnet.php?component=<?php echo $_REQUEST['component'];?>&mul=5'">125x</button>
<button onclick="document.location = './magnet.php?component=<?php echo $_REQUEST['component'];?>&mul=10'">1000x</button>
<button onclick="document.location = './magnet.php?component=<?php echo $_REQUEST['component'];?>&mul=20'">8000x</button>
</div>
<script type="importmap">
{
"imports": {
"three": "../../lib/node_modules/three/build/three.module.js",
"three/addons/": "../../lib/node_modules/three/examples/jsm/",
"components/": "./components/src/"
}
}
</script>
<script type="module">
// coordinates in millimeters relative to the center of the ring
console.log('globalThis', globalThis, window, self, frames, Object);
import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js'
const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();
// const dipole = [];
window.quadrupole = [];
window.sextupole = [];
window.corrector = [];
let selectedObjects = [];
const stats = new Stats();
const statmode = document.location.search.indexOf('statmode=')>-1? document.location.search.split('statmode=')[1].split('&')[0]-0: 0;
stats.showPanel(statmode); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.dom);
const obj3d = new THREE.Object3D();
// import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { MapControls } from 'three/addons/controls/OrbitControls.js';
// import { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry.js';
import { <?php echo ($_REQUEST['component']=='ellipticaltube'? 'ellipticaltubeGeometry': $_REQUEST['component']); ?> } from 'components/<?php echo $_REQUEST['component']; ?>.js';
let camera, controls, scene, renderer;
let cx=-1500, cy=500, cz=4500, rx=-0.6, ry=-0.3, rz=-0.2, cdebug;
let composer, outlinePass;
const chamberMaterial = new THREE.MeshLambertMaterial({color: 0xc0c0c0});
init();
//render(); // remove when using next line for animation loop (requestAnimationFrame)
animate();
function moveCamera() {
if (cdebug != document.getElementById('cdebug').value) {cdebug = document.getElementById('cdebug').value; console.log(cdebug, camera); return;}
if (cx==document.getElementById('cameraX').value && cy==document.getElementById('cameraY').value && cz==document.getElementById('cameraZ').value &&
rx==document.getElementById('rx').value && ry==document.getElementById('ry').value && rz==document.getElementById('rz').value) return;
rx = document.getElementById('rx').value;
ry = document.getElementById('ry').value;
rz = document.getElementById('rz').value;
cx = document.getElementById('cameraX').value;
cy = document.getElementById('cameraY').value;
cz = document.getElementById('cameraZ').value;
// camera.position.set( document.getElementById('cameraX').value, document.getElementById('cameraY').value, document.getElementById('cameraZ').value );
console.log('moveCamera()');
camera.position.set(cx,cy,cz);
camera.rotation.set(rx,ry,rz);
controls.update();
window.scene = scene;
window.camera = camera;
window.controls = controls;
}
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
//scene.fog = new THREE.FogExp2( 0xcccccc, 0.0000002 );
const canvas = document.querySelector('#c');
renderer = new THREE.WebGLRenderer({antialias: true, canvas, logarithmicDepthBuffer: true});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.001, 100000 );
camera.position.set(-1500,500,4500);
camera.rotation.set(-0.6, -0.3, -0.2);
// camera.position.set( document.getElementById('cameraX').value, document.getElementById('cameraY').value, document.getElementById('cameraZ').value );
// controls
controls = new MapControls( camera, renderer.domElement );
controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
controls.dampingFactor = 0.1;
controls.screenSpacePanning = false;
controls.minDistance = 0.01;
controls.maxDistance = 300000;
controls.maxPolarAngle = Math.PI / 2;
controls.update();
window.addEventListener( 'resize', onWindowResize );
if (document.location.search.indexOf('debug')>-1) {
var geometryDebug = new THREE.SphereGeometry(100, 32, 32);
var materialDebug = new THREE.MeshLambertMaterial({ color: 0x000000 });
var meshDebug = new THREE.Mesh(geometryDebug, materialDebug);
meshDebug.position.set(0, 0, 0);
meshDebug.name = 'debug000';
scene.add(meshDebug);
for (var c=1; c<=1000; c=c*10) {
geometryDebug = new THREE.SphereGeometry(50+100*c/2, 32, 32);
materialDebug = new THREE.MeshLambertMaterial({ color: 0xff0000 });
meshDebug = new THREE.Mesh(geometryDebug, materialDebug);
meshDebug.position.set(1000*c, 0, 0);
meshDebug.name = 'debug100_'+c;
scene.add(meshDebug);
materialDebug = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
meshDebug = new THREE.Mesh(geometryDebug, materialDebug);
meshDebug.position.set(0, 1000*c, 0);
meshDebug.name = 'debug010_'+c;
scene.add(meshDebug);
materialDebug = new THREE.MeshLambertMaterial({ color: 0x0000ff });
meshDebug = new THREE.Mesh(geometryDebug, materialDebug);
meshDebug.position.set(0, 0, 1000*c);
meshDebug.name = 'debug001_'+c;
scene.add(meshDebug);
materialDebug = new THREE.MeshLambertMaterial({ color: 0x800000 });
meshDebug = new THREE.Mesh(geometryDebug, materialDebug);
meshDebug.position.set(-1000*c, 0, 0);
meshDebug.name = 'debug200_'+c;
scene.add(meshDebug);
materialDebug = new THREE.MeshLambertMaterial({ color: 0x008000 });
meshDebug = new THREE.Mesh(geometryDebug, materialDebug);
meshDebug.position.set(0, -1000*c, 0);
meshDebug.name = 'debug020_'+c;
scene.add(meshDebug);
materialDebug = new THREE.MeshLambertMaterial({ color: 0x000080 });
meshDebug = new THREE.Mesh(geometryDebug, materialDebug);
meshDebug.position.set(0, 0, -1000*c);
meshDebug.name = 'debug002_'+c;
scene.add(meshDebug);
}
}
camera.position.set(1, 100, 100);
camera.rotation.set(-1.5497719738079266e-16, -1.164613656151594, -1.4236759551018105e-16);
camera.updateMatrixWorld(true);
cx = 0;
if (document.location.search.indexOf('wiggler')>-1) {
scene.add(wiggler(1300));
}
/*else if (document.location.search.indexOf('cavity')>-1) {
scene.add(cavity(5000,0.5,500,8000));
}*/
// if (document.location.search.indexOf('envelope')>-1) magnet = envelopeMaster;
else if (document.location.search.indexOf('ellipticaltube')>-1) {
const envelopegeometry = ellipticaltubeGeometry(5,10,10,5,10,50);
console.log('envelopegeometry', envelopegeometry);
const envelopematerial = new THREE.MeshBasicMaterial({color: 0x00f0f0, transparent: true, opacity: 0.2, side: THREE.DoubleSide,});
const envelopemesh = new THREE.Mesh( envelopegeometry, envelopematerial );
envelopemesh.position.set(500, 500, 500);
envelopemesh.scale.setX(100);
envelopemesh.scale.setY(100);
envelopemesh.scale.setZ(100);
envelopemesh.rotateY(Math.PI/2);
envelopemesh.rotateZ(Math.PI/2);
scene.add(envelopemesh);
const envelopegeometry2 = ellipticaltubeGeometry(10,5,6,8,10,50);
const envelopemesh2 = new THREE.Mesh( envelopegeometry2, envelopematerial );
envelopemesh2.position.set(1500, 500, 500);
envelopemesh2.scale.setX(100);
envelopemesh2.scale.setY(100);
envelopemesh2.scale.setZ(100);
envelopemesh2.rotateY(Math.PI/2);
envelopemesh2.rotateZ(Math.PI/2);
scene.add(envelopemesh2);
}
else if (document.location.search.indexOf('mul=')>-1) {
const component = <?php echo $_REQUEST['component']; ?>();
const dist = document.location.search.indexOf('dist=')>-1? document.location.search.split('dist=')[1].split('&')[0]: 3000;
const mul = document.location.search.split('mul=')[1].split('&')[0];
for (let i=0; i<mul; i++) {
for (let j=0; j<mul; j++) {
for (let k=0; k<mul; k++) {
const c = component.clone();
c.position.set(dist*i, dist*j, dist*k);
scene.add(c);
}
}
}
}
else {
const component = <?php echo $_REQUEST['component']; ?>({name: 'test'});
scene.add(component);
}
const dirLight1 = new THREE.DirectionalLight( 0xffffff );
dirLight1.position.set( 1, 1, 1 );
scene.add( dirLight1 );
const dirLight2 = new THREE.DirectionalLight( 0x888888 );
dirLight2.position.set( - 1, - 1, - 1 );
scene.add( dirLight2 );
const ambientLight = new THREE.AmbientLight( 0x555555 );
scene.add( ambientLight );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
stats.begin();
moveCamera();
controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true
render();
stats.end();
// composer.render();
}
function render() {
renderer.render(scene, camera);
}
</script>
</body>
</html>