add section view animation to vector magnet

README.md

@@ -8,6 +8,7 @@ You probably want to run ruby from a version manager like `chruby`, see [here](h
   - fix the OG tags so that https://cards-dev.twitter.com/validator works
   - consider switching to using pandoc as a markdown renderer
   - switch so that the blog is served from the root instead of doing a redirect
+  - setup webmentions https://aarongustafson.github.io/jekyll-webmention_io/
 
 ## Notes
 [Installation](https://jekyllrb.com/docs/installation/macos/)

_cv_entries/2_msc.md

@@ -22,7 +22,16 @@ The project centered around the use of a Nitrogen-Vancancy defect in a nanoscale
 Check out a little interactive model of the magnetometer below. The device has three pairs of copper Helmholtz coils that generate controlled, linear, magnetic fields in all three directions.
 
 <figure>
-<model-viewer style="height:500px;" src="{{ page.assets }}/vector_magnet.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls poster="{{ page.assets }}/vector_magnet.png" shadow-intensity="1" environment-image="{{ page.assets }}/aircraft_workshop_01_1k.hdr" camera-orbit="-169.8deg 78.57deg 0.8881m" field-of-view="32.55deg" interaction-prompt="none" auto-rotate> </model-viewer>
+<model-viewer id="vector-magnet-whole-2" style="height:500px;" src="{{ page.assets }}/vector_magnet.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls poster="{{ page.assets }}/vector_magnet.png" shadow-intensity="1" environment-image="{{ page.assets }}/aircraft_workshop_01_1k.hdr" interaction-prompt="none" interpolation-decay="300" auto-rotate> 
+
+<button class="Hotspot" style="disaplay:none;" slot="hotspot-1" data-position="0.3140708429455987m 0.2809109652738389m -0.32504316945989636m" data-normal="-3.85185900533595e-30m -1.343588384327496e-7m 0.9999999999999911m" data-visibility-attribute="visible"><div class="left HotspotAnnotation">AFM Tip</div></button>
+
+<button class="Hotspot" style="disaplay:none;" slot="hotspot-3" data-position="0.32587557211500007m 0.2711873555719334m -0.32504317169367186m" data-normal=" -4.575935640098142e-8m -2.0164410743149838e-7m 0.9999999999999787m" data-visibility-attribute="visible"><div class="HotspotAnnotation">Microscope Objective</div></button>
+
+<button class="Hotspot" style="disaplay:none;" slot="hotspot-4" data-position="0.3186977335100803m 0.2788147714959883m -0.3250432252613787m" data-normal=" 1.5099584039393812e-7m -1.34358838432748e-7m 0.9999999999999796m" data-visibility-attribute="visible"><div class="HotspotAnnotation">PCB Excitation Coil</div></button>
+<button class="section" onclick="toggleSection(this)">Show Section View</button>
+
+</model-viewer>
 <figcaption>
 </figcaption>
 </figure>
@@ -54,4 +63,45 @@ This is how you would calibrate one of these magnetism sensing AFM tips after fi
 
 Once we know the axis direction this AFM tip could then be transferred back to the AFM to measure magnetic fields at the nanoscale!
 
-TODO: Explain this in a bit more detail.
+TODO: Explain this in a bit more detail.
+
+
+<script type="module">
+  const modelViewer = document.querySelector("model-viewer#vector-magnet-whole-2");
+  modelViewer.in_section_view = false;
+
+  modelViewer.addEventListener('load', (event) => { 
+    
+    modelViewer.cameraOrbit = modelViewer.in_section_view ? "37.19deg 75.38deg 0.01m" : "auto auto auto";
+    modelViewer.cameraTarget = modelViewer.in_section_view ? "0.3142m 0.2804m -0.3250m" : "auto auto auto";
+    modelViewer.fieldOfView = modelViewer.in_section_view ? "5deg" : "auto";
+    modelViewer.autoRotate = !modelViewer.in_section_view;
+
+    if(modelViewer.in_section_view){
+        window.setTimeout(() => [...modelViewer.getElementsByClassName("Hotspot")].forEach(e => e.style.display = "unset"), 1000);
+    } else {
+        [...modelViewer.getElementsByClassName("Hotspot")].forEach(e => e.style.display = "none")
+    }
+
+    // const logPoint = (event) => {
+    //     const p = modelViewer.positionAndNormalFromPoint(event.clientX, event.clientY)
+    // console.log(p.position.toString(), p.normal.toString());
+    // };
+    
+    // modelViewer.addEventListener("click", logPoint);
+    
+});
+
+  window.toggleSection = (element) => {
+    modelViewer.in_section_view = !modelViewer.in_section_view;
+
+    console.log(modelViewer.cameraOrbit, modelViewer.cameraTarget, modelViewer.fieldOfView);
+    if(modelViewer.in_section_view) {
+        modelViewer.src = "{{ page.assets }}/test_section.glb";
+    } else {
+        modelViewer.src = "{{ page.assets }}/test_whole.glb";
+    }
+    
+  };
+
+</script>