tom/personal_site
1
0
Fork 0
mirror of https://github.com/TomHodson/tomhodson.github.com.git synced 2025-06-26 10:01:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve viewer UI

Browse Source
This commit is contained in:
Tom 2025-02-13 08:04:51 +00:00
parent 3e3c325552
commit 6af7e0084e
4 changed files with 57 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_posts/2025-01-25-volume-rendering.md
View File

@ -6,6 +6,7 @@ assets: /assets/blog/volume_rendering
thumbnail: /assets/blog/volume_rendering/thumbnail.png
social_image: /assets/blog/volume_rendering/thumbnail.png
image_class: invertable
alt: A volumetric render of a CT scan of my jaw.

2
assets/js/outline-model-viewer/PointCloudViewer.js
View File

@ -67,7 +67,7 @@ export class PointCloudViewer extends HTMLElement {
this.onWindowResize = () => {
this.camera.aspect = canvas.clientWidth / canvas.clientHeight;
this.camera.updateProjectionMatrix();
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
};
const timer = new Timer();

8
assets/js/outline-model-viewer/VolumeViewer.js
View File

@ -146,7 +146,8 @@ export class VolumeViewer extends HTMLElement {
}
connectedCallback() {
const { container, canvas, scene, renderer, gui } = setupThreeJS(this);
const { container, canvas, scene, renderer, gui, gui_buttons } =
setupThreeJS(this);
const model = this.getAttribute("model");
const model_metadata = this.getAttribute("model-metadata");
@ -215,7 +216,7 @@ export class VolumeViewer extends HTMLElement {
};
// Add a button to print the current settings to the console
gui
gui_buttons
.add(
{
printSettings: () =>
@ -238,6 +239,7 @@ export class VolumeViewer extends HTMLElement {
};
gui
.add(renderProps, "preset", presets)
.setValue("Default")
.onChange((preset) => {
Object.keys(preset).forEach((key) => {
if (material.uniforms[key]) {
@ -277,7 +279,7 @@ export class VolumeViewer extends HTMLElement {
this.onWindowResize = () => {
this.camera.aspect = canvas.clientWidth / canvas.clientHeight;
this.camera.updateProjectionMatrix();
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
};
this.onWindowResize();

56
assets/js/outline-model-viewer/helpers.js
View File

@ -119,7 +119,8 @@ function componentHTML(component_rect) {
.lil-gui .title {height: 2em;}
.lil-gui.root {
margin-top: calc(${height}px - 2em);
--height: 3em;
margin-top: calc(${height}px - var(--height));
width: 100%;
z-index: 1;
--background-color: none;
@ -132,6 +133,16 @@ function componentHTML(component_rect) {
--number-color: #2cc9ff;
--string-color: #a2db3c;
}
.lil-gui.root.closed {
height: var(--height);
}
#container.fullscreen > .lil-gui {
background-color: rgba(1,1,1, 0.5);
}
#container.fullscreen > .lil-gui.closed {
background-color: unset;
}
.lil-gui div.title {
margin: 0.5em;
@ -164,12 +175,29 @@ function componentHTML(component_rect) {
}
#container.fullscreen canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#container.fullscreen .lil-gui.root {
padding: 0.7em;
margin-top: 0;
width: 50%;
}
#container.fullscreen .lil-gui.root > div.title {
margin: 0
}
.common-lil-gui-buttons .children {
display: flex;
flex-wrap: wrap;
justify-content: center;
button {
padding: 0.2em;
}
}
</style>
`;
@ -223,9 +251,14 @@ function setupThreeJS(component) {
},
};
component.gui.add(params, "printCamera").name("Print Viewport State");
component.gui.add(params, "screenshot").name("Take Screenshot");
component.gui.add(params, "resetCamera").name("Reset Viewport");
let buttons = component.gui.addFolder("Actions");
buttons.open();
buttons.$title.style.display = "none";
buttons.domElement.classList.add("common-lil-gui-buttons");
buttons.add(params, "printCamera").name("Print Viewport State");
buttons.add(params, "screenshot").name("Take Screenshot");
buttons.add(params, "resetCamera").name("Reset Viewport");
component.gui_buttons = buttons;
component.full_screen = false;
// clone of original rect
@ -235,16 +268,21 @@ function setupThreeJS(component) {
};
component.toggleFullScreen = () => {
if (!component.container.requestFullscreen) {
console.log("Fullscreen not supported");
return;
}
component.full_screen = !component.full_screen;
if (component.full_screen) {
component.container.classList.add("fullscreen");
component.container.requestFullscreen();
} else {
component.container.classList.remove("fullscreen");
component.canvas.height = component.original_rect.height;
component.canvas.style.height = component.original_rect.height + "px";
component.canvas.style.width = component.original_rect.width + "px";
document.exitFullscreen();
}
component.canvas.removeAttribute("style");
component.canvas.removeAttribute("width");
component.canvas.removeAttribute("height");
component.onWindowResize();
};