add drafts

_drafts/outlines.md

@@ -0,0 +1,32 @@
+---
+title: Outlines
+excerpt: |
+    
+
+head: |
+    <script async src="https://unpkg.com/es-module-shims@1.8.0/dist/es-module-shims.js"></script>
+
+    <script type="importmap">
+    {
+        "imports": {
+        "three": "https://unpkg.com/three@0.156.1/build/three.module.js",
+        "three/addons/": "https://unpkg.com/three@0.156.1/examples/jsm/"
+        }
+    }
+    </script>
+
+layout: post
+hide_image: true # Only use this image for static previews
+image: 
+alt: A render of a 3D printed shelf sitting above a shaver outlet, it spins slowly. 
+---
+
+
+<figure>
+<canvas id = "threejs" style="width:100%; height: 500px"></canvas>
+<figcaption>
+Hey look, threeJS!
+</figcaption>
+</figure>
+
+<script src="/assets/js/three/index.js" type="module"></script>

_drafts/scans.md

@@ -6,10 +6,26 @@ layout: post
 hide_image: true # Only use this image for static previews
 image: /assets/blog/toothbrush_shelf/spin.gif
 alt: A render of a 3D printed shelf sitting above a shaver outlet, it spins slowly. 
+
+head: |
+    <script async src="https://ga.jspm.io/npm:es-module-shims@1.7.1/dist/es-module-shims.js"></script>
+    <script type="importmap">
+    {
+    "imports": {
+        "three": "https://cdn.jsdelivr.net/npm/three@^0.157.0/build/three.module.min.js"
+    }
+    }
+    </script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@google/model-viewer/dist/model-viewer-module.min.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@google/model-viewer-effects/dist/model-viewer-effects.min.js"></script>
+
 ---
 
 <figure>
 <model-viewer style="width: 500px; height: 500px;" src="/assets/blog/scans/container/container.glb" ar ar-modes="scene-viewer webxr quick-look" camera-controls shadow-intensity="1" exposure="1.08" camera-orbit="30.45deg 63.68deg 27.8m" field-of-view="22.88deg" auto-rotate>
+  <effect-composer>
+    <pixelate-effect></pixelate-effect>
+  </effect-composer>
 </model-viewer>
 <figcaption>
 Done with the lidar scanner on an Ipad.

_drafts/three_js.md

@@ -1,5 +1,5 @@
 ---
-title: Vase Generator
+title: THREE.js
 excerpt: |
     
 
@@ -42,6 +42,7 @@ want to port code from https://github.com/TomHodson/VaseExtruder
     const scene = new THREE.Scene();
     scene.background = new THREE.Color(background_color);
     const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+    camera.position.z = 100;
 
     const canvas = document.getElementById("threejs");
     const renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true, powerPreference: "low-power"});
@@ -57,17 +58,61 @@ want to port code from https://github.com/TomHodson/VaseExtruder
     const dracoLoader = new DRACOLoader();
     dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
 
+    const onWindowResize = () => {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+    }
+
     const loader = new GLTFLoader();
     loader.setDRACOLoader( dracoLoader );
-    loader.load( '/assets/blog/shelves/model/shelves.glb', function ( gltf ) {
+    loader.load( '/assets/projects/bike_lights/model/untitled.glb', function ( gltf ) {
-
         const model = gltf.scene;
+        console.log(model);
+
+        // traverse the scene and make modifications if necessary
+        model.traverse((o) => {
+            if (o.isMesh) {
+                const flat_material = new THREE.MeshBasicMaterial( {
+                    color: 0xffffff,
+                    polygonOffset: true,
+                    polygonOffsetFactor: 1, // positive value pushes polygon further away
+                    polygonOffsetUnits: 1
+                } );
+
+                o.material = flat_material;
+                scene.add(o);
+
+                // const flat_model = new THREE.LineSegments( o.geometry, flat_material);
+                // scene.add(flat_model);
+
+                const thresholdAngle = 10;
+                const wireframe_geometry = new THREE.EdgesGeometry(o.geometry, thresholdAngle);
+                
+                const line = new THREE.LineSegments(wireframe_geometry);
+                line.material.color.setHex(0x000000);
+                line.scale.set(10,10,10)
+                scene.add(line);
+
+                // const line_material = new THREE.LineBasicMaterial( { color: 0x000000 } );
+                // const wireframe_model = new THREE.LineSegments( wireframe_geometry, line_material);
+                // wireframe_model.scale.set(10,10,10);
+                // scene.add(wireframe_model);
+
+            }
+        });
+
+
+        
         // model.position.set( 1, 1, 0 );
-        model.scale.set( 1, 1, 1 );
+        // model.scale.set( 1, 1, 1 );
-        scene.add( model );
+        // scene.add( model );
 
         animate();
 
+        // Add listener for window resize.
+        window.addEventListener('resize', onWindowResize, false);
+
     }, undefined, function ( e ) {
 
         console.error( e );
@@ -79,8 +124,6 @@ want to port code from https://github.com/TomHodson/VaseExtruder
     // const cube = new THREE.Mesh( geometry, material );
     // scene.add( cube );
 
-    camera.position.z = 5;
-
     function animate() {
         requestAnimationFrame( animate );