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

fix viewer

Browse Source
This commit is contained in:
Tom 2025-04-13 12:09:51 +01:00
parent 4e795f82ef
commit defa5d1e0b
2 changed files with 60 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
assets/js/outline-model-viewer/OutlineViewer.js
View File

@ -80,18 +80,30 @@ export class OutlineModelViewer extends HTMLElement {
);
scene.add(ambientLight);
this.pixelRatio = window.devicePixelRatio;
console.log(`window.innerWidth ${window.innerWidth}`);
console.log(
`canvas.width ${canvas.width} canvas.clientWidth ${canvas.clientWidth}`
);
console.log(
`canvas.height ${canvas.height} canvas.clientHeight ${canvas.clientHeight}`
);
let width =
Math.min(canvas.clientWidth, window.innerWidth) * this.pixelRatio;
let height =
Math.min(canvas.clientHeight, window.innerHeight) * this.pixelRatio;
console.log(`width, height are ${[width, height]}`);
// Set up post processing
// Create a render target that holds a depthTexture so we can use it in the outline pass
// See: https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderTarget.depthBuffer
const depthTexture = new THREE.DepthTexture();
const renderTarget = new THREE.WebGLRenderTarget(
canvas.width,
canvas.height,
{
const renderTarget = new THREE.WebGLRenderTarget(width, height, {
depthTexture: depthTexture,
depthBuffer: true,
}
);
});
// Initial render pass.
const composer = new EffectComposer(renderer, renderTarget);
@ -101,7 +113,7 @@ export class OutlineModelViewer extends HTMLElement {
// Outline pass.
const customOutline = new CustomOutlinePass(
new THREE.Vector2(canvas.width, canvas.height),
new THREE.Vector2(width, height),
scene,
camera,
outline_color,
@ -112,16 +124,13 @@ export class OutlineModelViewer extends HTMLElement {
// Antialias pass.
const effectFXAA = new ShaderPass(FXAAShader);
effectFXAA.uniforms["resolution"].value.set(
1.0 / canvas.width,
1.0 / canvas.height
);
// composer.addPass(effectFXAA);
effectFXAA.uniforms["resolution"].value.set(1.0 / width, 1.0 / height);
composer.addPass(effectFXAA);
// Set over sampling ratio
this.updateEdgeThickness(1);
this.updatePixelRatio(window.devicePixelRatio);
renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
renderer.setSize(width, height, false);
component.render = composer.render;
@ -198,13 +207,13 @@ export class OutlineModelViewer extends HTMLElement {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
console.log("Model Viewer Element is visible. Resuming rendering...");
// console.log("Model Viewer Element is visible. Resuming rendering...");
this.isVisible = true;
update(); // Resume the loop
} else {
console.log(
"Model Viewer Element is not visible. Pausing rendering..."
);
// console.log(
// "Model Viewer Element is not visible. Pausing rendering..."
// );
this.isVisible = false; // Pauses rendering
}
});
@ -215,28 +224,41 @@ export class OutlineModelViewer extends HTMLElement {
function onWindowResize() {
// Update the internal dimensions of the canvas
canvas.width = canvas.clientWidth * element.pixelRatio;
canvas.height = canvas.clientHeight * element.pixelRatio;
console.log("onWindowResize triggered.");
console.log(`window.innerWidth ${window.innerWidth}`);
console.log(
`Current: canvas.width ${canvas.width} canvas.clientWidth ${canvas.clientWidth} element.pixelRatio ${element.pixelRatio}`
);
console.log(
`Current: canvas.height ${canvas.height} canvas.clientHeight ${canvas.clientHeight}`
);
let width =
Math.min(canvas.clientWidth, window.innerWidth) * element.pixelRatio;
let height =
Math.min(canvas.clientHeight, window.innerHeight) * element.pixelRatio;
console.log(`width and height are ${[width, height]}`);
canvas.width = width;
canvas.height = height;
// Recompute the camera matrix
camera.aspect = canvas.width / canvas.height;
camera.aspect = width / height;
camera.updateProjectionMatrix();
// Resive the various render targets
renderer.setSize(canvas.width, canvas.height, false);
composer.setSize(canvas.width, canvas.height);
effectFXAA.setSize(canvas.width, canvas.height);
customOutline.setSize(canvas.width, canvas.height);
renderer.setSize(width, height, false);
composer.setSize(width, height);
effectFXAA.setSize(width, height);
customOutline.setSize(width, height);
//
effectFXAA.uniforms["resolution"].value.set(
1.0 / canvas.width,
1.0 / canvas.height
);
effectFXAA.uniforms["resolution"].value.set(1.0 / width, 1.0 / height);
}
this.onWindowResize = onWindowResize;
onWindowResize();
const resizeObserver = new ResizeObserver(onWindowResize);
resizeObserver.observe(canvas);
const uniforms = customOutline.fsQuad.material.uniforms;
uniforms.debugVisualize.value = parseInt(this.getAttribute("mode")) || 0;
@ -280,8 +302,6 @@ export class OutlineModelViewer extends HTMLElement {
element.updatePixelRatio(value);
element.onWindowResize();
});
window.addEventListener("resize", onWindowResize, false);
}
}
export default OutlineModelViewer;

14
assets/js/projects_viewer_animation.js
View File

@ -18,33 +18,31 @@ if (inline_viewer) {
inline_viewer.getBoundingClientRect().bottom;
if (mode === "inline" && delta > margin) {
console.log(`Moving canvas to icon delta ${delta} ${window.scrollY}`);
console.log("moving to icon container");
icon_container.appendChild(canvas);
mode = "icon";
original.autoRotate = controls.autoRotate;
controls.autoRotate = true;
inline_viewer.onWindowResize();
inline_viewer.updateEdgeThickness(0.5);
canvas.classList.add("revealed");
}
if (mode === "icon" && delta > 2 * margin) {
if (!canvas.classList.contains("revealed")) {
console.log("Adding revealed class");
canvas.classList.add("revealed");
}
}
if (mode === "icon" && delta < 0) {
console.log(
`Moving canvas to inline viewer delta ${delta} ${window.scrollY}`
);
console.log("moving to main content");
inline_viewer.component.container.insertBefore(
canvas,
inline_viewer.component.gui.domElement
);
controls.autoRotate = original.autoRotate;
mode = "inline";
inline_viewer.onWindowResize();
// inline_viewer.onWindowResize();
inline_viewer.updateEdgeThickness(1);
canvas.classList.remove("revealed");
}