From d5bd1a236e33b8e46523e2f744ffed187a604e03 Mon Sep 17 00:00:00 2001
From: Tom <thomas.hodson@ecmwf.int>
Date: Fri, 10 Nov 2023 13:12:20 +0000
Subject: [PATCH] Add zoom control

---
 _projects/bike_lights.md                |  2 +-
 _projects/helmet_lights.md              |  2 +-
 assets/js/outline-model-viewer/index.js | 30 ++++++++++++++++++-------
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/_projects/bike_lights.md b/_projects/bike_lights.md
index 01875fe..f5ca9ae 100644
--- a/_projects/bike_lights.md
+++ b/_projects/bike_lights.md
@@ -26,7 +26,7 @@ head: |
     <script src="/assets/js/outline-model-viewer/index.js" type="module"></script>
 ---
 
-<outline-model-viewer model = "/assets/projects/bike_lights/models/bigger.glb">
+<outline-model-viewer model = "/assets/projects/bike_lights/models/bigger.glb" zoom=37>
     <img class="outline-model-poster no-wc" src = "/assets/projects/bike_lights/thumbnail.svg">
     <p class="has-wc">Loading model...</p>
 </outline-model-viewer>
diff --git a/_projects/helmet_lights.md b/_projects/helmet_lights.md
index 5d6562e..c59d57f 100644
--- a/_projects/helmet_lights.md
+++ b/_projects/helmet_lights.md
@@ -26,7 +26,7 @@ head: |
     <script src="/assets/js/outline-model-viewer/index.js" type="module"></script>
 ---
 
-<outline-model-viewer model = "{{page.models}}/model.glb">
+<outline-model-viewer model = "{{page.models}}/model.glb" zoom=60>
     <img class="outline-model-poster no-wc" src = "{{page.img.src}}">
     <p class="has-wc">Loading model...</p>
 </outline-model-viewer>
\ No newline at end of file
diff --git a/assets/js/outline-model-viewer/index.js b/assets/js/outline-model-viewer/index.js
index 992aa80..53d1b5d 100644
--- a/assets/js/outline-model-viewer/index.js
+++ b/assets/js/outline-model-viewer/index.js
@@ -153,13 +153,16 @@ class OutlineModelViewer extends HTMLElement {
     const outline_color = isDark ? 0xffffff : 0x000000;
     const model_color = background_color;
 
-    // Init scene
-    const camera = new THREE.PerspectiveCamera(
-      70,
-      canvas_rect.width / canvas_rect.height,
-      0.1,
-      100
-    );
+    // // Init scene
+    // const camera = new THREE.PerspectiveCamera(
+    //   70,
+    //   canvas_rect.width / canvas_rect.height,
+    //   0.1,
+    //   100
+    // );
+    const camera = new THREE.OrthographicCamera( canvas_rect.width / - 2, canvas_rect.width / 2, canvas_rect.height / 2, canvas_rect.height / - 2, 1, 1000 );
+    camera.zoom = parseFloat(this.getAttribute("zoom") || "1")
+    console.log(camera.zoom)
     camera.position.set(10, 2.5, 4);
 
     // create the scene and the camera
@@ -256,7 +259,7 @@ class OutlineModelViewer extends HTMLElement {
     // Render loop
     function update() {
       requestAnimationFrame(update);
-      // controls.update();
+      controls.update();
       composer.render();
     }
     update();
@@ -279,6 +282,13 @@ class OutlineModelViewer extends HTMLElement {
     window.addEventListener("resize", onWindowResize, false);
     if(this.getAttribute("debug")) setupDebug();
 
+    document.addEventListener("keydown", onDocumentKeyDown, false);
+  function onDocumentKeyDown(event) { 
+    if (event.key == " ") {
+        console.log(camera.toJSON());
+    }
+  }
+
   }
 
   render() {
@@ -292,6 +302,10 @@ class OutlineModelViewer extends HTMLElement {
       </div>
 
       <style>
+        details {
+          display: none;
+        }
+
         #container {
           width: 90%;
           height: 100%;