add no js billboards

This commit is contained in:
Tom 2025-01-21 16:40:26 +00:00
parent 40472222af
commit f3a97e5b04
5 changed files with 34 additions and 1 deletions

View File

@ -1,4 +1,5 @@
title: Tom Hodson
feed_title: Tom Hodson's Blog
description: Physics, Programming and Baking.
url: https://thomashodson.com

View File

@ -56,8 +56,10 @@
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
<!-- Privacy Conscious Hit Counter -->
{% unless jekyll.environment == "development" %}
<script data-goatcounter="https://tomhodson.goatcounter.com/count"
async src="//gc.zgo.at/count.js"></script>
async src="https://gc.zgo.at/count.js"></script>
{% endunless %}
<link rel="stylesheet" href="/assets/css/styles.css">
<script src="/assets/js/pre_page_load.js"></script>

View File

@ -99,7 +99,12 @@ pc.save(d / "pointcloud.pcd")
Click and drag to spin me around. It didn't really capture my nose very well, I guess this is more a foreground/background kinda thing.
<figure>
<img class="no-wc" src="{{page.assets}}/rear_stereo/point_cloud_preview.png">
<canvas style ="width: 100%;" id="canvas-id-1"></canvas>
<figcaption class="no-wc">If you have JS enabled this is interactive.</figcaption>
</figure>
<script type="module">
import * as THREE from "three";
@ -162,6 +167,27 @@ function init(canvas_id, url) {
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
}
// const elem = document.querySelector('#screenshot');
// elem.addEventListener('click', () => {
// render();
// canvas.toBlob((blob) => {
// saveBlob(blob, `screencapture-${canvas.width}x${canvas.height}.png`);
// });
// });
// const saveBlob = (function() {
// const a = document.createElement('a');
// document.body.appendChild(a);
// a.style.display = 'none';
// return function saveData(blob, fileName) {
// const url = window.URL.createObjectURL(blob);
// console.log(url);
// a.href = url;
// a.download = fileName;
// a.click();
// };
// }());
}
</script>
@ -179,4 +205,8 @@ So I had a go with the front facing camera too:
The depth information, while lower resolution, is much better. My nose really pops in this one!
<figure>
<img class="no-wc" src="{{page.assets}}/front_facing/point_cloud_preview.png">
<canvas style ="width: 100%;" id="canvas-id-2"></canvas>
<figcaption class="no-wc">If you have JS enabled this is interactive.</figcaption>
</figure>

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB