Merge pull request #216 from dimasciput/3d_aspect_ratio

Fix object aspect ratio and fix loading position
qgis · Nov 10, 2021 · 4f9990d · 4f9990d
2 parents e648610 + 540b90e
commit 4f9990d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git 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
@@ -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();