mirror of
https://github.com/TomHodson/tomhodson.github.com.git
synced 2025-06-26 10:01:18 +02:00
add new projects layout and remove unpkg links
This commit is contained in:
Tom
parent
b77f8f21c8
commit
1bd43a39c1
@ -4,13 +4,13 @@ excerpt: |
|
||||
|
||||
|
||||
head: |
|
||||
<script async src="https://unpkg.com/es-module-shims@1.8.0/dist/es-module-shims.js"></script>
|
||||
<script async src="/node_modules/es-module-shims/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/"
|
||||
"three": "/node_modules/three/build/three.module.min.js",
|
||||
"three/addons/": "/node_modules/three/examples/jsm/",
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -4,7 +4,7 @@ excerpt: |
|
||||
|
||||
|
||||
head: |
|
||||
<script async src="https://unpkg.com/es-module-shims@1.8.0/dist/es-module-shims.js"></script>
|
||||
<script async src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
|
||||
|
||||
<script type="importmap">
|
||||
{
|
||||
|
||||
@ -95,6 +95,12 @@ Stay a while, poke around, there might be some easter eggs to be found.`,
|
||||
<!-- RSS feed -->
|
||||
{% feed_meta %}
|
||||
|
||||
{% if layout.head %}
|
||||
{{ layout.head }}
|
||||
{% endif %}
|
||||
|
||||
{% if page.head %}
|
||||
{{ page.head }}
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
18
_layouts/project.html
Normal file
18
_layouts/project.html
Normal file
@ -0,0 +1,18 @@
|
||||
---
|
||||
layout: post
|
||||
head: |
|
||||
<script async src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
|
||||
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "/node_modules/three/build/three.module.min.js",
|
||||
"three/addons/": "/node_modules/three/examples/jsm/",
|
||||
"lil-gui": "/node_modules/lil-gui/dist/lil-gui.esm.min.js"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="/assets/js/outline-model-viewer/index.js" type="module"></script>
|
||||
---
|
||||
|
||||
{{ content }}
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Bathroom Shelf
|
||||
layout: post
|
||||
layout: project
|
||||
excerpt: A little modification to an IKEA thingy.
|
||||
permalink: /projects/bathroom_shelf
|
||||
assets: /assets/projects/bathroom_shelf
|
||||
@ -12,24 +12,14 @@ img:
|
||||
social_image: /assets/projects/bathroom_shelf/thumbnail.png
|
||||
model: /assets/projects/bathroom_shelf/models/ikea.glb
|
||||
|
||||
head: |
|
||||
<script async src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "/node_modules/three/build/three.module.min.js",
|
||||
"three/addons/": "/node_modules/three/examples/jsm/",
|
||||
"lil-gui": "/node_modules/lil-gui/dist/lil-gui.esm.min.js"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="/assets/js/outline-model-viewer/index.js" type="module"></script>
|
||||
---
|
||||
<outline-model-viewer model = "/assets/projects/bathroom_shelf/models/ikea.glb" zoom=845>
|
||||
{% include mastodon_post.html post_id = "111822564173512216" %}
|
||||
|
||||
<outline-model-viewer model = "/assets/projects/bathroom_shelf/models/ikea.glb">
|
||||
<img class="outline-model-poster no-wc" src = "/assets/projects/bike_lights/thumbnail.svg">
|
||||
<p class="has-wc">Loading model...</p>
|
||||
</outline-model-viewer>
|
||||
|
||||
{% include mastodon_post.html post_id = "111822564173512216" %}
|
||||
|
||||
|
||||
<img src="/assets/projects/bathroom_shelf/test.jpeg" alt="test">
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Bike Lights
|
||||
layout: post
|
||||
layout: project
|
||||
excerpt: Making a custom 3W dynamo light for a bike.
|
||||
permalink: /projects/bike_lights
|
||||
assets: /assets/projects/bike_lights
|
||||
@ -12,18 +12,6 @@ img:
|
||||
social_image: /assets/projects/bike_lights/thumbnail.png
|
||||
model: /assets/projects/bike_lights/model
|
||||
|
||||
head: |
|
||||
<script async src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "/node_modules/three/build/three.module.min.js",
|
||||
"three/addons/": "/node_modules/three/examples/jsm/",
|
||||
"lil-gui": "/node_modules/lil-gui/dist/lil-gui.esm.min.js"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="/assets/js/outline-model-viewer/index.js" type="module"></script>
|
||||
---
|
||||
<outline-model-viewer model = "/assets/projects/bike_lights/models/bigger.glb" camera='{"position":[-7.434,5.128,-6.379],"rotation":[-2.464,-0.7373,-2.646],"zoom":303.06369033128976,"target":[0,0,0]}'>
|
||||
<img class="outline-model-poster no-wc" src = "/assets/projects/bike_lights/thumbnail.svg">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Ceramics
|
||||
layout: post
|
||||
layout: project
|
||||
excerpt: Ongoing explorations in making pots!
|
||||
permalink: /projects/ceramics
|
||||
assets: /assets/projects/ceramics
|
||||
@ -10,5 +10,14 @@ img:
|
||||
class: invertable
|
||||
|
||||
social_image: /assets/projects/ceramics/thumbnail.png
|
||||
model:
|
||||
model: /assets/projects/ceramics/scan.glb
|
||||
---
|
||||
<!-- <outline-model-viewer model = "{{page.model}}">
|
||||
<img class="outline-model-poster no-wc" src = "{{page.img.src}}">
|
||||
<p class="has-wc">Loading model...</p>
|
||||
</outline-model-viewer> -->
|
||||
|
||||
<outline-model-viewer model = "/assets/projects/ceramics/scan_2.glb" materials=keep outlines=false camera='{"position":[-5.155,2.5,-9.456],"rotation":[-2.883,-0.4851,-3.019],"zoom":268,"target":[0,0,0]}'>
|
||||
<img class="outline-model-poster no-wc" src = "{{page.img.src}}">
|
||||
<p class="has-wc">Loading model...</p>
|
||||
</outline-model-viewer>
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Helmet Lights
|
||||
layout: post
|
||||
layout: project
|
||||
excerpt: A few different custom mounts to attach lights to bike helmets.
|
||||
permalink: /projects/helmet_lights
|
||||
assets: /assets/projects/helmet_lights
|
||||
@ -12,18 +12,6 @@ img:
|
||||
social_image: /assets/projects/helmet_lights/thumbnail.png
|
||||
models: /assets/projects/helmet_lights/models
|
||||
|
||||
head: |
|
||||
<script async src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "/node_modules/three/build/three.module.min.js",
|
||||
"three/addons/": "/node_modules//three/examples/jsm/",
|
||||
"lil-gui": "/node_modules/lil-gui/dist/lil-gui.esm.min.js"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="/assets/js/outline-model-viewer/index.js" type="module"></script>
|
||||
---
|
||||
|
||||
<outline-model-viewer model = "{{page.models}}/model.glb" camera='{"position":[6.039,6.456,-6.641],"rotation":[-2.37,0.5778,2.654],"zoom":309.7389923355519,"target":[0,0,0]}'>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Lamps
|
||||
layout: post
|
||||
layout: project
|
||||
excerpt: 3D Printed Lamp Shades
|
||||
permalink: /projects/lamps
|
||||
assets: /assets/projects/lamps
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Lasercut Stool
|
||||
layout: post
|
||||
layout: project
|
||||
excerpt: A lasercut hexagonal wooden stool.
|
||||
permalink: /projects/lasercut_stool
|
||||
assets: /assets/projects/lasercut_stool
|
||||
@ -12,18 +12,6 @@ img:
|
||||
# social_image: /assets/projects/
|
||||
model: /assets/blog/weekend_builds_1/pot.glb
|
||||
|
||||
head: |
|
||||
<script async src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "/node_modules/three/build/three.module.min.js",
|
||||
"three/addons/": "/node_modules//three/examples/jsm/",
|
||||
"lil-gui": "/node_modules/lil-gui/dist/lil-gui.esm.min.js"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="/assets/js/outline-model-viewer/index.js" type="module"></script>
|
||||
---
|
||||
<outline-model-viewer model = "{{page.model}}" camera='{"position":[7.699,4.641,6.436],"rotation":[-0.6243,0.7663,0.4633],"zoom":229.77238881409951,"target":[0,0,0]}'>
|
||||
<img class="outline-model-poster no-wc" src = "{{page.img.src}}">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: 3D Printed Lego Motor Adapters
|
||||
layout: post
|
||||
layout: project
|
||||
excerpt: Adapters to use common components with lego technic.
|
||||
permalink: /projects/lego_adapters
|
||||
assets: /assets/projects/lego_adapters
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Projector Shelf Mount
|
||||
layout: post
|
||||
layout: project
|
||||
excerpt: A mount for a projector underneath a shelf with a tilt swivel joint.
|
||||
permalink: /projects/projector_mount
|
||||
assets: /assets/projects/projector_mount
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Toothbrush Shelf
|
||||
layout: post
|
||||
layout: project
|
||||
excerpt: A shelf to put your toothbrush charger on.
|
||||
permalink: /projects/toothbrush_shelf
|
||||
assets: /assets/projects/toothbrush_shelf
|
||||
@ -12,18 +12,7 @@ img:
|
||||
social_image: /assets/projects/toothbrush_shelf/thumbnail.png
|
||||
model: /assets/blog/toothbrush_shelf/model/toothbrush_shelf.glb
|
||||
|
||||
head: |
|
||||
<script async src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "/node_modules/three/build/three.module.min.js",
|
||||
"three/addons/": "/node_modules//three/examples/jsm/",
|
||||
"lil-gui": "/node_modules/lil-gui/dist/lil-gui.esm.min.js"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="/assets/js/outline-model-viewer/index.js" type="module"></script>
|
||||
|
||||
---
|
||||
<outline-model-viewer model = "{{page.model}}" camera='{"position":[7.699,4.641,6.436],"rotation":[-0.6243,0.7663,0.4633],"zoom":229,"target":[0.0,0,0]}'>
|
||||
<img class="outline-model-poster no-wc" src = "{{page.img.src}}">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: USB-C Power Book
|
||||
layout: post
|
||||
layout: project
|
||||
excerpt: An ongoing quest to fix a problem I don't have.
|
||||
permalink: /projects/usbc_charging_station
|
||||
assets: /assets/projects/usbc_power_supply
|
||||
@ -14,21 +14,8 @@ social_image: /assets/projects/usbc_power_supply/thumbnail.png
|
||||
model: /assets/projects/usbc_power_supply/usb-c_psu.glb
|
||||
|
||||
head: |
|
||||
<script async src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "/node_modules/three/build/three.module.min.js",
|
||||
"three/addons/": "/node_modules/three/examples/jsm/",
|
||||
"lil-gui": "/node_modules/lil-gui/dist/lil-gui.esm.min.js"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="/assets/js/outline-model-viewer/index.js" type="module"></script>
|
||||
<script type="module" src="/assets/js/kicanvas.js"></script>
|
||||
|
||||
<script src="/assets/blog/micropython/micropython.min.mjs" type="module"></script>
|
||||
|
||||
<script src="/assets/blog/micropython/cm6.bundle.min.js"></script>
|
||||
<script src="/assets/blog/micropython/simulator.js" type = "module"></script>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Vector Magnet
|
||||
layout: post
|
||||
layout: project
|
||||
excerpt: Make your magnetic fields all 3D like.
|
||||
permalink: /projects/vector_magnet
|
||||
assets: /assets/projects/vector_magnet
|
||||
@ -11,18 +11,6 @@ img:
|
||||
|
||||
social_image: /assets/projects/vector_magnet/thumbnail.png
|
||||
|
||||
head: |
|
||||
<script async src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "/node_modules/three/build/three.module.min.js",
|
||||
"three/addons/": "/node_modules/three/examples/jsm/",
|
||||
"lil-gui": "/node_modules/lil-gui/dist/lil-gui.esm.min.js"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="/assets/js/outline-model-viewer/index.js" type="module"></script>
|
||||
---
|
||||
<outline-model-viewer model = "/assets/blog/vector_magnet/vector_magnet.glb" zoom=500 camera='{"position":[3.118,3.203,10.1],"rotation":[-0.3104,0.2858,0.0902],"zoom":428.68750000000136,"target":[0,0,0]}'>
|
||||
<img class="outline-model-poster no-wc" src = "/assets/projects/bike_lights/thumbnail.svg">
|
||||
@ -35,13 +23,11 @@ Check out a little interactive model of the magnetometer below. The device has t
|
||||
|
||||
Here's a cutaway view of the interior.
|
||||
|
||||
<outline-model-viewer model = "/assets/blog/vector_magnet/vector_magnet_section.glb" spin=false camera='{"position":[-3.069,3.172,10.17],"rotation":[-0.3052,-0.2811,-0.08718],"zoom":2860.0091628398345,"target":[0.007077,-0.02863,0.01116]}' true-color=true>
|
||||
<outline-model-viewer model = "/assets/blog/vector_magnet/vector_magnet_section.glb" spin=false camera='{"position":[-3.069,3.172,10.17],"rotation":[-0.3052,-0.2811,-0.08718],"zoom":2860.0091628398345,"target":[0.007077,-0.02863,0.01116]}' materials=flat>
|
||||
<img class="outline-model-poster no-wc" src = "/assets/projects/bike_lights/thumbnail.svg">
|
||||
<p class="has-wc">Loading model...</p>
|
||||
</outline-model-viewer>
|
||||
|
||||
I should add some color to this but roughly you have:
|
||||
|
||||
**AFM Tip**: The atomic force microscope tip (dark blue) with a nano-diamond attached to the very tip. We want to figure out which was the axis the NV defect in this nano-diamond is pointing. To do that we need to expose it to different directions of magnetic field while also blasting it with light and radio waves.
|
||||
|
||||
**PCB coil** For the radio wave blasting we have a single turn coil made on a PCB (green). I haven't cut the coil away so that you can see it's whole shape. We'll pump RF power into this tuned to the electronic transitions in the NV defect that we want to probe.
|
||||
|
||||
@ -71,7 +71,7 @@ const serialiseCamera = (camera, controls) => {
|
||||
});
|
||||
};
|
||||
|
||||
class OutlineModelViewer extends HTMLElement {
|
||||
export class OutlineModelViewer extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.isVisible = true; // Track visibility
|
||||
@ -210,16 +210,13 @@ class OutlineModelViewer extends HTMLElement {
|
||||
// Modify the materials to support surface coloring
|
||||
scene.traverse((node) => {
|
||||
if (node.type == "Mesh") {
|
||||
// Add surface ID attribute to the geometry
|
||||
const colorsTypedArray = surfaceFinder.getSurfaceIdAttribute(node);
|
||||
node.geometry.setAttribute(
|
||||
"color",
|
||||
new THREE.BufferAttribute(colorsTypedArray, 4)
|
||||
);
|
||||
|
||||
let material_params = this.getAttribute("true-color")
|
||||
? { color: node.material.color }
|
||||
: { emissive: model_color };
|
||||
|
||||
if (node.name.includes("track") || node.name.includes("zone")) {
|
||||
//set to a copper colour
|
||||
// #c87533
|
||||
@ -235,7 +232,20 @@ class OutlineModelViewer extends HTMLElement {
|
||||
node.position.y += 0.00002;
|
||||
}
|
||||
// override materials
|
||||
node.material = new THREE.MeshStandardMaterial(material_params);
|
||||
const material_mode = this.getAttribute("materials") || "outlines";
|
||||
if (material_mode === "outlines") {
|
||||
node.material = new THREE.MeshStandardMaterial({
|
||||
emissive: model_color,
|
||||
});
|
||||
} else if (material_mode === "flat") {
|
||||
node.material = new THREE.MeshStandardMaterial({
|
||||
color: node.material.color,
|
||||
});
|
||||
} else if (material_mode === "keep") {
|
||||
// Do nothing, leave the material as set in the GLTF file
|
||||
} else {
|
||||
throw new Error("Invalid material mode");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -282,27 +292,10 @@ class OutlineModelViewer extends HTMLElement {
|
||||
this.intersectedObject.currentHex
|
||||
);
|
||||
}
|
||||
// Store the current hex color and set highlight color
|
||||
this.intersectedObject = object;
|
||||
this.intersectedObject.currentHex =
|
||||
this.intersectedObject.material.emissive.getHex();
|
||||
|
||||
// Adjust the emissive color based on current brightness
|
||||
const currentColor = new THREE.Color(
|
||||
this.intersectedObject.material.emissive.getHex()
|
||||
);
|
||||
adjustColor(currentColor, 0.2); // Lighten or darken based on brightness
|
||||
this.intersectedObject.material.emissive.set(currentColor);
|
||||
|
||||
// Print the name of the intersected object
|
||||
// params.selectedObject = object.name || "(unnamed object)";
|
||||
shadow.querySelector("#clicked-item").innerText = object.name;
|
||||
}
|
||||
} else if (this.intersectedObject) {
|
||||
// Reset the color if the mouse is no longer hovering over any object
|
||||
this.intersectedObject.material.emissive.setHex(
|
||||
this.intersectedObject.currentHex
|
||||
);
|
||||
this.intersectedObject = null;
|
||||
params.selectedObject = "";
|
||||
}
|
||||
@ -369,13 +362,15 @@ class OutlineModelViewer extends HTMLElement {
|
||||
gui.close();
|
||||
|
||||
const uniforms = customOutline.fsQuad.material.uniforms;
|
||||
uniforms.debugVisualize.value =
|
||||
this.getAttribute("outlines") === "false" ? 2 : 0;
|
||||
|
||||
const params = {
|
||||
selectedObject: "None",
|
||||
spin: controls.autoRotate,
|
||||
mode: { Mode: 0 },
|
||||
mode: uniforms.debugVisualize.value,
|
||||
// depthBias: uniforms.multiplierParameters.value.x,
|
||||
// depthMult: uniforms.multiplierParameters.value.y,
|
||||
// FXAA_resolution: 0.5,
|
||||
printCamera: () => console.log(serialiseCamera(camera, controls)),
|
||||
};
|
||||
|
||||
@ -404,13 +399,6 @@ class OutlineModelViewer extends HTMLElement {
|
||||
// uniforms.multiplierParameters.value.y = value;
|
||||
// });
|
||||
|
||||
// gui.add(params, "FXAA_resolution", 0.0, 2).onChange((value) => {
|
||||
// effectFXAA.uniforms["resolution"].value.set(
|
||||
// value / canvas_rect.width,
|
||||
// value / canvas_rect.height
|
||||
// );
|
||||
// });
|
||||
|
||||
// Toggle fullscreen mode
|
||||
const shadow = this.shadow;
|
||||
const canvas_height = canvas.style.height;
|
||||
@ -539,3 +527,5 @@ class OutlineModelViewer extends HTMLElement {
|
||||
}
|
||||
|
||||
customElements.define("outline-model-viewer", OutlineModelViewer);
|
||||
|
||||
export default OutlineModelViewer;
|
||||
|
||||
BIN
assets/projects/ceramics/scan_2.glb
Normal file
BIN
assets/projects/ceramics/scan_2.glb
Normal file
Binary file not shown.
1799
package-lock.json
generated
1799
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,13 +1,13 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"@idotj/mastodon-embed-timeline": "^4.4.2",
|
||||
"es-module-shims": "^1.8.1",
|
||||
"lil-gui": "^0.19.1",
|
||||
"es-module-shims": "^1.10.0",
|
||||
"lil-gui": "^0.19.2",
|
||||
"mathjax": "^3.2.2",
|
||||
"svgo": "^3.3.2",
|
||||
"three": "^0.158.0"
|
||||
"three": "^0.169.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@divriots/jampack": "^0.23.3"
|
||||
"@divriots/jampack": "^0.30.0"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user