|
|
@ -293,15 +293,12 @@ TABS.magnetometer.initialize = function (callback) {
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
self.pageElements.pitch_slider.Link('lower').to((e) => {
|
|
|
|
self.pageElements.pitch_slider.Link('lower').to((e) => {
|
|
|
|
console.log("pitch_slider");
|
|
|
|
|
|
|
|
updatePitchAxis(e);
|
|
|
|
updatePitchAxis(e);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
self.pageElements.roll_slider.Link('lower').to((e) => {
|
|
|
|
self.pageElements.roll_slider.Link('lower').to((e) => {
|
|
|
|
console.log("roll_slider");
|
|
|
|
|
|
|
|
updateRollAxis(e);
|
|
|
|
updateRollAxis(e);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
self.pageElements.yaw_slider.Link('lower').to((e) => {
|
|
|
|
self.pageElements.yaw_slider.Link('lower').to((e) => {
|
|
|
|
console.log("yaw_slider");
|
|
|
|
|
|
|
|
updateYawAxis(e);
|
|
|
|
updateYawAxis(e);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
@ -326,19 +323,27 @@ TABS.magnetometer.initialize = function (callback) {
|
|
|
|
|
|
|
|
|
|
|
|
TABS.magnetometer.initialize3D = function () {
|
|
|
|
TABS.magnetometer.initialize3D = function () {
|
|
|
|
var self = this,
|
|
|
|
var self = this,
|
|
|
|
loader,
|
|
|
|
|
|
|
|
canvas,
|
|
|
|
canvas,
|
|
|
|
wrapper,
|
|
|
|
wrapper,
|
|
|
|
renderer,
|
|
|
|
renderer,
|
|
|
|
camera,
|
|
|
|
camera,
|
|
|
|
scene,
|
|
|
|
scene,
|
|
|
|
light,
|
|
|
|
|
|
|
|
light2,
|
|
|
|
|
|
|
|
model,
|
|
|
|
model,
|
|
|
|
model_file,
|
|
|
|
model_file,
|
|
|
|
gps_model,
|
|
|
|
gps_model,
|
|
|
|
useWebGlRenderer = false;
|
|
|
|
useWebGlRenderer = false;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let cameraParams = {
|
|
|
|
|
|
|
|
distance: 1,
|
|
|
|
|
|
|
|
mdown: new THREE.Vector2(),
|
|
|
|
|
|
|
|
mmove: new THREE.Vector2(),
|
|
|
|
|
|
|
|
phi: 25,
|
|
|
|
|
|
|
|
theta: -15,
|
|
|
|
|
|
|
|
phim: 0,
|
|
|
|
|
|
|
|
thetam: 0,
|
|
|
|
|
|
|
|
fov: 53
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
canvas = $('.model-and-info #canvas');
|
|
|
|
canvas = $('.model-and-info #canvas');
|
|
|
|
wrapper = $('.model-and-info #canvas_wrapper');
|
|
|
|
wrapper = $('.model-and-info #canvas_wrapper');
|
|
|
|
|
|
|
|
|
|
|
@ -378,25 +383,26 @@ TABS.magnetometer.initialize3D = function () {
|
|
|
|
// setup scene
|
|
|
|
// setup scene
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
|
|
|
|
|
|
|
|
loader = new THREE.JSONLoader();
|
|
|
|
const loader = new THREE.JSONLoader();
|
|
|
|
|
|
|
|
//Load the UAV model
|
|
|
|
loader.load('./resources/models/' + model_file + '.json', function (geometry, materials) {
|
|
|
|
loader.load('./resources/models/' + model_file + '.json', function (geometry, materials) {
|
|
|
|
var modelMaterial = new THREE.MeshFaceMaterial(materials);
|
|
|
|
var modelMaterial = new THREE.MeshFaceMaterial(materials);
|
|
|
|
model = new THREE.Mesh(geometry, modelMaterial);
|
|
|
|
model = new THREE.Mesh(geometry, modelMaterial);
|
|
|
|
|
|
|
|
|
|
|
|
model.scale.set(10, 10, 10);
|
|
|
|
model.scale.set(10, 10, 10);
|
|
|
|
|
|
|
|
cameraParams.distance = camera.position.clone().sub(model.position).length();
|
|
|
|
scene.add(model);
|
|
|
|
scene.add(model);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//Load the GPS model
|
|
|
|
loader.load('./resources/models/gps.json', function (geometry, materials) {
|
|
|
|
loader.load('./resources/models/gps.json', function (geometry, materials) {
|
|
|
|
var modelMaterial = new THREE.MeshFaceMaterial(materials);
|
|
|
|
var modelMaterial = new THREE.MeshFaceMaterial(materials);
|
|
|
|
gps_model = new THREE.Mesh(geometry, modelMaterial);
|
|
|
|
gps_model = new THREE.Mesh(geometry, modelMaterial);
|
|
|
|
|
|
|
|
|
|
|
|
gps_model.scale.set(2.5, 2.5, 2.5);
|
|
|
|
gps_model.scale.set(0.3, 0.3, 0.3);
|
|
|
|
// TODO This should depend on the selected drone model
|
|
|
|
// TODO This should depend on the selected drone model
|
|
|
|
gps_model.position.set(0, 0, 27);
|
|
|
|
gps_model.position.set(0, 0, 3);
|
|
|
|
gps_model.rotation.y = 3 * Math.PI / 2
|
|
|
|
gps_model.rotation.y = 3 * Math.PI / 2;
|
|
|
|
|
|
|
|
|
|
|
|
scene.add(gps_model);
|
|
|
|
model.add(gps_model);
|
|
|
|
|
|
|
|
|
|
|
|
self.render3D();
|
|
|
|
self.render3D();
|
|
|
|
}, function () {
|
|
|
|
}, function () {
|
|
|
@ -411,9 +417,11 @@ TABS.magnetometer.initialize3D = function () {
|
|
|
|
camera = new THREE.PerspectiveCamera(50, wrapper.width() / wrapper.height(), 1, 10000);
|
|
|
|
camera = new THREE.PerspectiveCamera(50, wrapper.width() / wrapper.height(), 1, 10000);
|
|
|
|
|
|
|
|
|
|
|
|
// some light
|
|
|
|
// some light
|
|
|
|
light = new THREE.AmbientLight(0x404040);
|
|
|
|
const light = new THREE.AmbientLight(0x404040);
|
|
|
|
light2 = new THREE.DirectionalLight(new THREE.Color(1, 1, 1), 1.5);
|
|
|
|
const light1 = new THREE.DirectionalLight(new THREE.Color(1, 1, 1), 0.8);
|
|
|
|
light2.position.set(0, 1, 0);
|
|
|
|
light1.position.set(-1, 1, 1);
|
|
|
|
|
|
|
|
const light2 = new THREE.DirectionalLight(new THREE.Color(1, 1, 1), 0.8);
|
|
|
|
|
|
|
|
light2.position.set(-1, -1, -1);
|
|
|
|
|
|
|
|
|
|
|
|
// move camera away from the model
|
|
|
|
// move camera away from the model
|
|
|
|
camera.position.z = 0;
|
|
|
|
camera.position.z = 0;
|
|
|
@ -423,6 +431,7 @@ TABS.magnetometer.initialize3D = function () {
|
|
|
|
|
|
|
|
|
|
|
|
// add camera, model, light to the foreground scene
|
|
|
|
// add camera, model, light to the foreground scene
|
|
|
|
scene.add(light);
|
|
|
|
scene.add(light);
|
|
|
|
|
|
|
|
scene.add(light1);
|
|
|
|
scene.add(light2);
|
|
|
|
scene.add(light2);
|
|
|
|
scene.add(camera);
|
|
|
|
scene.add(camera);
|
|
|
|
|
|
|
|
|
|
|
@ -432,11 +441,20 @@ TABS.magnetometer.initialize3D = function () {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
gps_model.rotation.set(THREE.Math.degToRad(self.alignmentConfig.pitch), THREE.Math.degToRad(-180 - self.alignmentConfig.yaw), THREE.Math.degToRad(self.alignmentConfig.roll), 'YXZ');
|
|
|
|
gps_model.rotation.set(THREE.Math.degToRad(self.alignmentConfig.pitch), THREE.Math.degToRad(-180 - self.alignmentConfig.yaw), THREE.Math.degToRad(self.alignmentConfig.roll), 'YXZ');
|
|
|
|
|
|
|
|
|
|
|
|
// draw
|
|
|
|
// draw
|
|
|
|
renderer.render(scene, camera);
|
|
|
|
renderer.render(scene, camera);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let updateCamera = function () {
|
|
|
|
|
|
|
|
if (!model)
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
camera.position.x = cameraParams.distance * Math.sin(THREE.Math.degToRad(cameraParams.theta)) * Math.cos(THREE.Math.degToRad(cameraParams.phi));
|
|
|
|
|
|
|
|
camera.position.y = cameraParams.distance * Math.sin(THREE.Math.degToRad(cameraParams.phi));
|
|
|
|
|
|
|
|
camera.position.z = cameraParams.distance * Math.cos(THREE.Math.degToRad(cameraParams.theta)) * Math.cos(THREE.Math.degToRad(cameraParams.phi));
|
|
|
|
|
|
|
|
camera.lookAt(model.position);
|
|
|
|
|
|
|
|
self.render3D();
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// handle canvas resize
|
|
|
|
// handle canvas resize
|
|
|
|
this.resize3D = function () {
|
|
|
|
this.resize3D = function () {
|
|
|
|
renderer.setSize(wrapper.width() * 2, wrapper.height() * 2);
|
|
|
|
renderer.setSize(wrapper.width() * 2, wrapper.height() * 2);
|
|
|
@ -448,6 +466,28 @@ TABS.magnetometer.initialize3D = function () {
|
|
|
|
|
|
|
|
|
|
|
|
$(window).on('resize', this.resize3D);
|
|
|
|
$(window).on('resize', this.resize3D);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//Code to move the camera with the mouse
|
|
|
|
|
|
|
|
let modelCanMove = false;
|
|
|
|
|
|
|
|
canvas.mousedown((e) => {
|
|
|
|
|
|
|
|
cameraParams.mdown.set(e.clientX, e.clientY);
|
|
|
|
|
|
|
|
cameraParams.thetam = cameraParams.theta;
|
|
|
|
|
|
|
|
cameraParams.phim = cameraParams.phi;
|
|
|
|
|
|
|
|
modelCanMove = true;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
canvas.mousemove((e) => {
|
|
|
|
|
|
|
|
if (modelCanMove) {
|
|
|
|
|
|
|
|
cameraParams.mmove.set(e.clientX, e.clientY);
|
|
|
|
|
|
|
|
cameraParams.theta = -(cameraParams.mmove.x - cameraParams.mdown.x) * 0.5 + cameraParams.thetam;
|
|
|
|
|
|
|
|
cameraParams.phi = (cameraParams.mmove.y - cameraParams.mdown.y) * 0.5 + cameraParams.phim;
|
|
|
|
|
|
|
|
cameraParams.phi = Math.min(90, Math.max(-90, cameraParams.phi));
|
|
|
|
|
|
|
|
updateCamera();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
canvas.mouseup((e) => {
|
|
|
|
|
|
|
|
modelCanMove = false;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
updateCamera();
|
|
|
|
|
|
|
|
|
|
|
|
this.render3D()
|
|
|
|
this.render3D()
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|