236 lines
8.3 KiB
JavaScript
236 lines
8.3 KiB
JavaScript
var width = document.getElementById("viewport").offsetWidth
|
|
var height = 300;
|
|
|
|
var renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
renderer.setSize(width, height);
|
|
document.getElementById("viewport").appendChild(renderer.domElement);
|
|
|
|
var scene = new THREE.Scene();
|
|
|
|
var cubeGeometry = new THREE.CubeGeometry(100, 100/2, 100*1.5);
|
|
var cubeGeometry2 = new THREE.CubeGeometry(120, 120/2, 120*1.5);
|
|
// var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
|
|
const color = new THREE.Color("rgb(255, 0, 0)");
|
|
var cubeMaterial = new THREE.MeshPhongMaterial({
|
|
color: color,
|
|
opacity: 1,
|
|
transparent: true,
|
|
});
|
|
const color2 = new THREE.Color("rgb(48,117,255)");
|
|
var cubeMaterial2 = new THREE.MeshPhongMaterial({
|
|
color: color2,
|
|
opacity: 0.5,
|
|
transparent: true,
|
|
});
|
|
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
|
|
var cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2);
|
|
// cube.rotation.y = Math.PI * 45 / 180;
|
|
// cube2.rotation.y = Math.PI * 45 / 180;
|
|
scene.add(cube);
|
|
scene.add(cube2);
|
|
|
|
var 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);
|
|
|
|
var skyboxGeometry = new THREE.CubeGeometry(5000, 5000, 5000);
|
|
var skyboxMaterial = new THREE.MeshBasicMaterial({ color: 0x232323, side: THREE.BackSide });
|
|
var skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);
|
|
|
|
scene.add(skybox);
|
|
|
|
const colorl = 0xFFFFFF;
|
|
const intensity = 1;
|
|
const light = new THREE.DirectionalLight(colorl, intensity);
|
|
|
|
var 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 calibration = new THREE.Quaternion().setFromEuler(new THREE.Euler( radFromAngle, 0, 0, 'YXZ' ))
|
|
let eul = new THREE.Euler( x, y, z, 'YXZ' );
|
|
|
|
// let eul = new THREE.Euler( x, z, y, 'ZXY' ); // XYZ XZY YZX YXZ ZXY ZYX
|
|
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) {
|
|
// requestAnimationFrame(renderSerial);
|
|
|
|
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);
|
|
|
|
var pitchRange = document.getElementById("pitchRange");
|
|
var yawRange = document.getElementById("yawRange");
|
|
var rollRange = document.getElementById("rollRange");
|
|
|
|
pitchRange.oninput = () => {
|
|
manCalibration.x = pitchRange.value * Math.PI / 180
|
|
// let rot = new THREE.Euler().setFromQuaternion( cube2.quaternion, 'YXZ' );
|
|
// renderTCP(rot.x, rot.y, rot.z)
|
|
}
|
|
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
|
|
}
|
|
|
|
var 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 //
|
|
|
|
var 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
|
|
}
|
|
|
|
var headingSer = $.flightIndicator('#headingSer', 'heading', options);
|
|
var headingTcp = $.flightIndicator('#headingTcp', 'heading', options);
|
|
var attitudeSer = $.flightIndicator('#attitudeSer', 'attitude', options);
|
|
var attitudeTcp = $.flightIndicator('#attitudeTcp', 'attitude', options);
|
|
// var variometer = $.flightIndicator('#variometer', 'variometer', options);
|
|
var airspeed = $.flightIndicator('#airspeed', 'airspeed', options);
|
|
var altimeter = $.flightIndicator('#altimeter', 'altimeter', options);
|
|
|
|
var airspeedLabel = document.getElementById("airspeedLabel")
|
|
var altitudeLabel = document.getElementById("altitudeLabel")
|
|
|
|
function setIndicatorsTcp(sensordata) {
|
|
// let q = new THREE.Euler().setFromQuaternion( quaternionRawTcp, 'YXZ' ) // XYZ XZY YZX YXZ ZXY ZYX
|
|
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(sensordata.Orientation[0])
|
|
attitudeTcp.setPitch(q.x * 180 / Math.PI)
|
|
//attitudeTcp.setRoll(sensordata.Orientation[1])
|
|
attitudeTcp.setRoll(q.z * 180 / Math.PI)
|
|
}
|
|
|
|
// Heading from quaternion
|
|
// if (sensordata.Orientation[2] !== 0) {
|
|
// // headingTcp.setHeading((-sensordata.Orientation[2]-90)%360)
|
|
// let h = q.y * 180 / Math.PI * -1
|
|
// headingTcp.setHeading(h)
|
|
// }
|
|
let heading = sensordata.HeadDevice
|
|
if (heading !== 0) {
|
|
headingTcp.setHeading(heading)
|
|
}
|
|
}
|
|
|
|
function setIndicatorsSer(sensordata) {
|
|
let q = new THREE.Euler().setFromQuaternion( cube.quaternion, 'YXZ' )
|
|
|
|
if (sensordata.Orientation[0] !== 0 && sensordata.Orientation[1] !== 0) {
|
|
attitudeSer.setPitch(sensordata.Orientation[0])
|
|
attitudeSer.setRoll(sensordata.Orientation[1])
|
|
}
|
|
|
|
// Heading from quaternion
|
|
// if (sensordata.Orientation[2] !== 0) {
|
|
// // headingTcp.setHeading((-sensordata.Orientation[2]-90)%360)
|
|
// let h = q.y * 180 / Math.PI * -1
|
|
// headingSer.setHeading(h)
|
|
// }
|
|
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`
|
|
}
|
|
}
|
|
|