Beautiful
This commit is contained in:
parent
be6a6316c2
commit
75587e697b
5
app.py
5
app.py
|
|
@ -32,3 +32,8 @@ def calibration_data():
|
||||||
@app.route('/static/<path:path>')
|
@app.route('/static/<path:path>')
|
||||||
def send_static(path):
|
def send_static(path):
|
||||||
return send_from_directory('static', path)
|
return send_from_directory('static', path)
|
||||||
|
|
||||||
|
|
||||||
|
@app.route('/data/<path:path>')
|
||||||
|
def send_data(path):
|
||||||
|
return send_from_directory('data', path)
|
||||||
|
|
|
||||||
|
|
@ -102,7 +102,7 @@ class Pyramid extends THREE.Object3D {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let renderer, scene, camera, controls, leds, cameraObject, domElement, raycaster, pointer, selectedObject;
|
let renderer, scene, camera, controls, leds, cameraObject, domElement, raycaster, pointer, selectedObject, ledView;
|
||||||
|
|
||||||
async function init(dataPath, domElementArg = document.body) {
|
async function init(dataPath, domElementArg = document.body) {
|
||||||
let request = await fetch('/api/calibration-data');
|
let request = await fetch('/api/calibration-data');
|
||||||
|
|
@ -126,8 +126,8 @@ async function init(dataPath, domElementArg = document.body) {
|
||||||
const geometry = new THREE.SphereGeometry(1, 32, 16);
|
const geometry = new THREE.SphereGeometry(1, 32, 16);
|
||||||
const material = new THREE.MeshPhongMaterial({ color: 0xffff00 });
|
const material = new THREE.MeshPhongMaterial({ color: 0xffff00 });
|
||||||
let sphere = new THREE.Mesh(geometry, material);
|
let sphere = new THREE.Mesh(geometry, material);
|
||||||
sphere.position.x = row[0];
|
sphere.position.x = -row[1];
|
||||||
sphere.position.y = row[1];
|
sphere.position.y = -row[0];
|
||||||
sphere.position.z = row[2];
|
sphere.position.z = row[2];
|
||||||
sphere.name = key
|
sphere.name = key
|
||||||
leds.add(sphere);
|
leds.add(sphere);
|
||||||
|
|
@ -151,12 +151,14 @@ async function init(dataPath, domElementArg = document.body) {
|
||||||
renderer.setAnimationLoop(animate);
|
renderer.setAnimationLoop(animate);
|
||||||
|
|
||||||
selectedObject = document.getElementById('selected-object');
|
selectedObject = document.getElementById('selected-object');
|
||||||
|
ledView = document.getElementById('led-view');
|
||||||
|
|
||||||
// Add listeners
|
// Add listeners
|
||||||
controls = new OrbitControls(camera, renderer.domElement);
|
controls = new OrbitControls(camera, renderer.domElement);
|
||||||
controls.update();
|
controls.update();
|
||||||
|
|
||||||
window.addEventListener('pointermove', onPointerMove);
|
window.addEventListener('pointermove', onPointerMove);
|
||||||
|
window.addEventListener('pointerup', onPointerUp);
|
||||||
window.addEventListener('resize', onWindowResize, false);
|
window.addEventListener('resize', onWindowResize, false);
|
||||||
onWindowResize();
|
onWindowResize();
|
||||||
|
|
||||||
|
|
@ -169,14 +171,12 @@ function animate(time) {
|
||||||
if (pointer !== undefined) {
|
if (pointer !== undefined) {
|
||||||
raycaster.setFromCamera(pointer, camera);
|
raycaster.setFromCamera(pointer, camera);
|
||||||
const intersects = raycaster.intersectObjects(leds.children);
|
const intersects = raycaster.intersectObjects(leds.children);
|
||||||
if (intersects.length > 0) {
|
const intersection = intersects.length > 0 ? intersects[0].object : undefined;
|
||||||
for (let led of leds.children) {
|
for (let led of leds.children) {
|
||||||
if (led === intersects[0].object) {
|
if (led === intersection) {
|
||||||
led.material.color.setHex(0xff0000);
|
led.scale.set(1.5, 1.5, 1.5);
|
||||||
selectedObject.innerText = led.name;
|
} else {
|
||||||
} else {
|
led.scale.set(1, 1, 1);
|
||||||
led.material.color.setHex(0xffff00);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -207,4 +207,20 @@ function onPointerMove(event) {
|
||||||
pointer.y = - (event.offsetY / h) * 2 + 1;
|
pointer.y = - (event.offsetY / h) * 2 + 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onPointerUp(event) {
|
||||||
|
raycaster.setFromCamera(pointer, camera);
|
||||||
|
const intersects = raycaster.intersectObjects(leds.children);
|
||||||
|
if (intersects.length > 0) {
|
||||||
|
for (let led of leds.children) {
|
||||||
|
if (led === intersects[0].object) {
|
||||||
|
ledView.src = 'data/small/' + led.name + '.PNG';
|
||||||
|
led.material.color.setHex(0xff0000);
|
||||||
|
selectedObject.innerText = led.name;
|
||||||
|
} else {
|
||||||
|
led.material.color.setHex(0xffff00);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export { init };
|
export { init };
|
||||||
|
|
|
||||||
|
|
@ -3,11 +3,21 @@
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 class="title">Visualisation de l'étalonnage</h1>
|
<div class="columns">
|
||||||
<div id="visualiser-container">
|
<div class="column">
|
||||||
<div id="visualiser">
|
<h1 class="title">Positions 3D des LEDs</h1>
|
||||||
<div id="info">
|
<div id="visualiser-container">
|
||||||
Objet sélectionné : <span id="selected-object">aucun</span>
|
<div id="visualiser">
|
||||||
|
<div id="info">
|
||||||
|
Objet sélectionné : <span id="selected-object">aucun</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<h1 class="title">Vue de la LED selectionnée</h1>
|
||||||
|
<div>
|
||||||
|
<img id="led-view">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue