From 732de1388f6ee591edc11547d394b03523fe948f Mon Sep 17 00:00:00 2001 From: Luca Date: Sun, 20 Feb 2022 14:05:21 +0100 Subject: [PATCH] Bug fix --- tabs/magnetometer.js | 110 ++++++++++++++++++++++--------------------- 1 file changed, 56 insertions(+), 54 deletions(-) diff --git a/tabs/magnetometer.js b/tabs/magnetometer.js index 8e065f95..33640ef3 100644 --- a/tabs/magnetometer.js +++ b/tabs/magnetometer.js @@ -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() };