205 lines
7.0 KiB
JavaScript
205 lines
7.0 KiB
JavaScript
let width = document.getElementById("viewport").offsetWidth
|
|
let height = 300;
|
|
|
|
let renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
renderer.setSize(width, height);
|
|
document.getElementById("viewport").appendChild(renderer.domElement);
|
|
|
|
let scene = new THREE.Scene();
|
|
|
|
let cubeGeometry = new THREE.CubeGeometry(100, 100/2, 100*1.5);
|
|
let cubeGeometry2 = new THREE.CubeGeometry(120, 120/2, 120*1.5);
|
|
|
|
const color = new THREE.Color("rgb(255, 0, 0)");
|
|
let cubeMaterial = new THREE.MeshPhongMaterial({
|
|
color: color,
|
|
opacity: 1,
|
|
transparent: true,
|
|
});
|
|
const color2 = new THREE.Color("rgb(48,117,255)");
|
|
let cubeMaterial2 = new THREE.MeshPhongMaterial({
|
|
color: color2,
|
|
opacity: 0.5,
|
|
transparent: true,
|
|
});
|
|
let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
|
|
let cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2);
|
|
scene.add(cube);
|
|
scene.add(cube2);
|
|
|
|
let camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 6000);
|
|
camera.position.y = 100;
|
|
camera.position.z = 240;
|
|
camera.lookAt(cube.position);
|
|
|
|
scene.add(camera);
|
|
|
|
let skyboxGeometry = new THREE.CubeGeometry(5000, 5000, 5000);
|
|
let skyboxMaterial = new THREE.MeshBasicMaterial({ color: 0x232323, side: THREE.BackSide });
|
|
let skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);
|
|
|
|
scene.add(skybox);
|
|
|
|
const colorl = 0xFFFFFF;
|
|
const intensity = 1;
|
|
const light = new THREE.DirectionalLight(colorl, intensity);
|
|
|
|
let pointLight = new THREE.PointLight(0xffffff);
|
|
pointLight.position.set(0, 300, 200);
|
|
light.position.set(0, 300, 200);
|
|
|
|
scene.add(pointLight);
|
|
|
|
cube.position.x = 0
|
|
cube2.position.x = 0
|
|
|
|
// calibration globals
|
|
let manCalibration = new THREE.Euler( 0, 0, 0, 'YXZ' )
|
|
let calibrationRot = new THREE.Quaternion()
|
|
let calPitch = 0
|
|
let calRoll = 0
|
|
let calYaw = 0
|
|
|
|
let quaternionOffset = document.getElementById("quaternionOffset")
|
|
|
|
function renderTCP(x, y, z) {
|
|
let calibration = new THREE.Quaternion().setFromEuler(manCalibration)
|
|
let eul = new THREE.Euler( x, y, z, 'YXZ' );
|
|
|
|
cube2.quaternion.setFromEuler(eul).multiply(calibrationRot).multiply(calibration)
|
|
|
|
quaternionOffset.innerHTML = `Lage Abweichung: ${(cube2.quaternion.angleTo(cube.quaternion) * 180 / Math.PI).toFixed(2) }°`
|
|
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
function renderSerial(x, y, z) {
|
|
let eul = new THREE.Euler( x, y, z, 'YXZ' ); // XYZ XZY YZX YXZ ZXY ZYX
|
|
|
|
cube.quaternion.setFromEuler(eul)
|
|
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
renderTCP(0, 0, 0);
|
|
renderSerial(0, 0, 0);
|
|
|
|
let pitchRange = document.getElementById("pitchRange");
|
|
let yawRange = document.getElementById("yawRange");
|
|
let rollRange = document.getElementById("rollRange");
|
|
|
|
pitchRange.oninput = () => {
|
|
manCalibration.x = pitchRange.value * Math.PI / 180
|
|
}
|
|
yawRange.oninput = () => {
|
|
manCalibration.y = yawRange.value * Math.PI / 180
|
|
}
|
|
rollRange.oninput = () => {
|
|
manCalibration.z = rollRange.value * Math.PI / 180
|
|
}
|
|
|
|
function delCalibration(evt) {
|
|
calibrationRot = new THREE.Quaternion()
|
|
manCalibration = new THREE.Euler( 0, 0, 0, 'YXZ' )
|
|
pitchRange.value = 0
|
|
yawRange.value = 0
|
|
rollRange.value = 0
|
|
calRoll = 0
|
|
calPitch = 0
|
|
}
|
|
|
|
let calState = false;
|
|
function manualCalibration(evt) {
|
|
let con = document.getElementById("manCalContainer")
|
|
console.log("mancal", con.style.display)
|
|
if (calState === false) {
|
|
delCalibration()
|
|
calState = !calState
|
|
console.log("mancal ON")
|
|
con.style.display = "block"
|
|
} else {
|
|
delCalibration()
|
|
calState = !calState
|
|
console.log("mancal OFF")
|
|
con.style.display = "none"
|
|
manCalibration = new THREE.Euler( 0, 0, 0, 'YXZ' )
|
|
pitchRange.value = 0
|
|
yawRange.value = 0
|
|
rollRange.value = 0
|
|
}
|
|
}
|
|
function calibrate(evt) {
|
|
let serOrientation = cube.quaternion.clone()
|
|
let tcpOrientation = cube2.quaternion.clone().multiply(calibrationRot.clone().invert())
|
|
let diff = tcpOrientation.invert().multiply(serOrientation)
|
|
|
|
let old = new THREE.Euler().setFromQuaternion( cube2.quaternion, 'YXZ' )
|
|
let dif = new THREE.Euler().setFromQuaternion( diff )
|
|
console.log("OLD:","pitch", old.x * 180/Math.PI, "yaw", old.y * 180/Math.PI, "roll", old.z * 180/Math.PI)
|
|
console.log("DIFF:","pitch", dif.x * 180/Math.PI, "yaw", dif.y * 180/Math.PI, "roll", dif.z * 180/Math.PI)
|
|
calPitch = dif.x // * 180/Math.PI
|
|
calYaw = dif.y // * 180/Math.PI
|
|
calRoll = dif.z // * 180/Math.PI
|
|
calibrationRot = diff
|
|
}
|
|
document.getElementById("deleteCalibration").onclick = delCalibration
|
|
document.getElementById("manualCalibration").onclick = manualCalibration
|
|
document.getElementById("calibrate").onclick = calibrate
|
|
|
|
|
|
// indicators //
|
|
|
|
let options = {
|
|
size : 200, // Sets the size in pixels of the indicator (square)
|
|
roll : 0, // Roll angle in degrees for an attitude indicator
|
|
pitch : 0, // Pitch angle in degrees for an attitude indicator
|
|
heading: 0, // Heading angle in degrees for an heading indicator
|
|
vario: 0, // Variometer in 1000 feets/min for the variometer indicator
|
|
airspeed: 0, // Air speed in knots for an air speed indicator
|
|
altitude: 0, // Altitude in feets for an altimeter indicator
|
|
pressure: 1000, // Pressure in hPa for an altimeter indicator
|
|
showBox : true, // Sets if the outer squared box is visible or not (true or false)
|
|
img_directory : 'static/indicators/img/' // The directory where the images are saved to
|
|
}
|
|
|
|
let headingSer = $.flightIndicator('#headingSer', 'heading', options);
|
|
let headingTcp = $.flightIndicator('#headingTcp', 'heading', options);
|
|
let attitudeSer = $.flightIndicator('#attitudeSer', 'attitude', options);
|
|
let attitudeTcp = $.flightIndicator('#attitudeTcp', 'attitude', options);
|
|
let airspeed = $.flightIndicator('#airspeed', 'airspeed', options);
|
|
let altimeter = $.flightIndicator('#altimeter', 'altimeter', options);
|
|
|
|
let airspeedLabel = document.getElementById("airspeedLabel")
|
|
let altitudeLabel = document.getElementById("altitudeLabel")
|
|
|
|
function setIndicatorsTcp(sensordata) {
|
|
let q = new THREE.Euler().setFromQuaternion( cube2.quaternion, 'YXZ' ) // XYZ XZY YZX YXZ ZXY ZYX
|
|
|
|
if (sensordata.Orientation[0] !== 0 && sensordata.Orientation[1] !== 0) {
|
|
attitudeTcp.setPitch(q.x * 180 / Math.PI)
|
|
attitudeTcp.setRoll(q.z * 180 / Math.PI)
|
|
}
|
|
let heading = sensordata.HeadDevice
|
|
if (heading !== 0) {
|
|
headingTcp.setHeading(heading)
|
|
}
|
|
}
|
|
|
|
function setIndicatorsSer(sensordata) {
|
|
if (sensordata.Orientation[0] !== 0 && sensordata.Orientation[1] !== 0) {
|
|
attitudeSer.setPitch(sensordata.Orientation[0])
|
|
attitudeSer.setRoll(sensordata.Orientation[1])
|
|
}
|
|
let heading = sensordata.HeadMotion
|
|
if (heading !== 0) {
|
|
headingSer.setHeading(heading)
|
|
}
|
|
if (sensordata.Speed !== 0) {
|
|
airspeed.setAirSpeed(sensordata.Speed * 3.6)
|
|
airspeedLabel.innerHTML = `Ref. Speed: ${(sensordata.Speed * 3.6).toFixed(1)} km/h`
|
|
}
|
|
if (sensordata.Position[2] !== 0) {
|
|
altimeter.setAltitude((sensordata.Position[2] * 10).toFixed())
|
|
altitudeLabel.innerHTML = `HMSL: ${(sensordata.Position[2]).toFixed(2)} m`
|
|
}
|
|
} |