pull/1449/head^2
Luca 3 years ago
parent 6a3fd4c399
commit 732de1388f

@ -302,15 +302,15 @@ TABS.magnetometer.initialize = function (callback) {
updateYawAxis(e);
});
self.pageElements.pitch_slider.click(() => {
self.pageElements.pitch_slider.change((e) => {
self.isSavePreset = false;
self.pageElements.orientation_mag_e.css("opacity", 0.5);
});
self.pageElements.roll_slider.click(() => {
self.pageElements.roll_slider.change((e) => {
self.isSavePreset = false;
self.pageElements.orientation_mag_e.css("opacity", 0.5);
});
self.pageElements.yaw_slider.click(() => {
self.pageElements.yaw_slider.change((e) => {
self.isSavePreset = false;
self.pageElements.orientation_mag_e.css("opacity", 0.5);
});
@ -334,11 +334,11 @@ TABS.magnetometer.initialize3D = function () {
useWebGlRenderer = false;
let cameraParams = {
distance: 1,
distance: 80,
mdown: new THREE.Vector2(),
mmove: new THREE.Vector2(),
phi: 25,
theta: -15,
phi: 32.5,
theta: -3.5,
phim: 0,
thetam: 0,
fov: 53
@ -380,15 +380,61 @@ TABS.magnetometer.initialize3D = function () {
model_file = 'fallback';
}
this.render3D = function () {
if (!model || !gps_model)
return;
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
renderer.render(scene, camera);
};
let updateCamera = function () {
if (!model || !camera)
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
this.resize3D = function () {
renderer.setSize(wrapper.width() * 2, wrapper.height() * 2);
camera.aspect = wrapper.width() / wrapper.height();
camera.updateProjectionMatrix();
self.render3D();
};
// setup scene
scene = new THREE.Scene();
// stationary camera
camera = new THREE.PerspectiveCamera(50, wrapper.width() / wrapper.height(), 1, 10000);
// some light
const light = new THREE.AmbientLight(0x404040);
const light1 = new THREE.DirectionalLight(new THREE.Color(1, 1, 1), 0.8);
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);
// add camera, model, light to the foreground scene
scene.add(light);
scene.add(light1);
scene.add(light2);
scene.add(camera);
//Load the models
const loader = new THREE.JSONLoader();
//Load the UAV model
loader.load('./resources/models/' + model_file + '.json', function (geometry, materials) {
var modelMaterial = new THREE.MeshFaceMaterial(materials);
model = new THREE.Mesh(geometry, modelMaterial);
model.scale.set(10, 10, 10);
model.rotation.y = Math.PI / 2;
cameraParams.distance = camera.position.clone().sub(model.position).length();
scene.add(model);
@ -404,7 +450,8 @@ TABS.magnetometer.initialize3D = function () {
model.add(gps_model);
self.render3D();
updateCamera();
//self.render3D();
}, function () {
console.log("Couldn't load model file", arguments)
});
@ -413,56 +460,12 @@ TABS.magnetometer.initialize3D = function () {
console.log("Couldn't load model file", arguments)
});
// stationary camera
camera = new THREE.PerspectiveCamera(50, wrapper.width() / wrapper.height(), 1, 10000);
// some light
const light = new THREE.AmbientLight(0x404040);
const light1 = new THREE.DirectionalLight(new THREE.Color(1, 1, 1), 0.8);
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
camera.position.z = 0;
camera.position.y = 50;
camera.position.x = -90;
camera.position.y = -10;
camera.position.x = -80;
camera.lookAt(new THREE.Vector3(0, 0, 0));
// add camera, model, light to the foreground scene
scene.add(light);
scene.add(light1);
scene.add(light2);
scene.add(camera);
this.render3D = function () {
if (!model || !gps_model) {
return;
}
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
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
this.resize3D = function () {
renderer.setSize(wrapper.width() * 2, wrapper.height() * 2);
camera.aspect = wrapper.width() / wrapper.height();
camera.updateProjectionMatrix();
self.render3D();
};
$(window).on('resize', this.resize3D);
@ -486,7 +489,6 @@ TABS.magnetometer.initialize3D = function () {
canvas.mouseup((e) => {
modelCanMove = false;
});
updateCamera();
this.render3D()
};

Loading…
Cancel
Save