diff --git a/qgis-app/wavefronts/static/wavefront/css/wavefront.css b/qgis-app/wavefronts/static/wavefront/css/wavefront.css index 64869f32..02b96776 100644 --- a/qgis-app/wavefronts/static/wavefront/css/wavefront.css +++ b/qgis-app/wavefronts/static/wavefront/css/wavefront.css @@ -32,6 +32,9 @@ margin-top: 23px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); cursor: move; + display: flex; + align-items: center; + justify-content: center; } #c { width: 100%; @@ -40,8 +43,8 @@ /* Loading icon */ .loading{ position: absolute; - top: 40%; - left: 40%; + margin-left: auto; + margin-top: auto; border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ diff --git a/qgis-app/wavefronts/static/wavefront/js/3d_view.js b/qgis-app/wavefronts/static/wavefront/js/3d_view.js index 7414c052..4e50e7a7 100644 --- a/qgis-app/wavefronts/static/wavefront/js/3d_view.js +++ b/qgis-app/wavefronts/static/wavefront/js/3d_view.js @@ -58,6 +58,9 @@ async function main() { const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.set(0, 10, 20); + camera.aspect = canvas.width / canvas.height; + camera.updateProjectionMatrix(); + const controls = new OrbitControls(camera, canvas); const scene = new THREE.Scene();