From c248dcb77b1bd05a9c1ad79ade59199a4a9c2cb0 Mon Sep 17 00:00:00 2001
From: Tom <thomas.hodson@ecmwf.int>
Date: Thu, 9 Nov 2023 16:01:19 +0000
Subject: [PATCH] add drafts
---
_drafts/outlines.md | 32 ++++++++++++++++
_drafts/scans.md | 16 ++++++++
_drafts/{vasegen.md => three_js.md} | 57 +++++++++++++++++++++++++----
3 files changed, 98 insertions(+), 7 deletions(-)
create mode 100644 _drafts/outlines.md
rename _drafts/{vasegen.md => three_js.md} (60%)
diff --git a/_drafts/outlines.md b/_drafts/outlines.md
new file mode 100644
index 0000000..b04a40d
--- /dev/null
+++ b/_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>
\ No newline at end of file
diff --git a/_drafts/scans.md b/_drafts/scans.md
index 67daf4f..7ddaf55 100644
--- a/_drafts/scans.md
+++ b/_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.
diff --git a/_drafts/vasegen.md b/_drafts/three_js.md
similarity index 60%
rename from _drafts/vasegen.md
rename to _drafts/three_js.md
index 209f071..b5907f2 100644
--- a/_drafts/vasegen.md
+++ b/_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 );
- scene.add( model );
+ // model.scale.set( 1, 1, 1 );
+ // 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 );