thepaperpilot/pages
1
0
Fork 0
Code Issues 1 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Make background support not being full page
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 59s
Details

Browse source
This commit is contained in:
thepaperpilot 2024-06-20 07:37:29 -05:00
parent a4e47f244f
commit 831060a57e
2 changed files with 43 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
site/.vitepress/theme/Background.vue
View file

@ -1,24 +1,21 @@
<template> <template>
<div class="background"> <TresCanvas>
<TresCanvas> <TresOrthographicCamera ref="camera" :position="[0, 0, 10]" />
<TresOrthographicCamera ref="camera" :position="[0, 0, 10]" /> <TresGroup ref="blobRef">
<TresGroup ref="blobRef"> <TresMesh v-for="i in rows * cols" :position="[((i % cols) - cols / 2) * 304, (Math.floor((i - 1) / cols) - rows / 2) * 304, 0]" >
<TresMesh v-for="i in rows * cols" :position="[((i % cols) - cols / 2) * 304, (Math.floor((i - 1) / cols) - rows / 2) * 304, 0]" > <TresShapeGeometry :args="[shapes]" />
<TresShapeGeometry :args="[shapes]" /> <TresShaderMaterial :vertexShader="vertexShader" :fragmentShader="fragmentShader" :uniforms="uniforms" :blending="AdditiveBlending" />
<TresShaderMaterial :vertexShader="vertexShader" :fragmentShader="fragmentShader" :uniforms="uniforms" :blending="AdditiveBlending" /> </TresMesh>
</TresMesh> </TresGroup>
</TresGroup> <TresAmbientLight :intensity="1" />
<TresAmbientLight :intensity="1" /> </TresCanvas>
<OrbitControls /> <div ref="resizeListener" class="resize-listener" />
</TresCanvas>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref, shallowRef, onMounted, onUnmounted, watch } from "vue"; import { computed, ref, shallowRef, onMounted, onUnmounted, watch } from "vue";
import { TresCanvas, useLoader, useRenderLoop } from '@tresjs/core'; import { TresCanvas, useLoader, useRenderLoop } from '@tresjs/core';
import { SVGLoader } from "three/examples/jsm/loaders/SVGLoader.js"; import { SVGLoader } from "three/examples/jsm/loaders/SVGLoader.js";
import OrbitControls from './OrbitControls.vue';
import noise from "./noise.glsl?raw"; import noise from "./noise.glsl?raw";
import { AdditiveBlending, Vector2 } from "three"; import { AdditiveBlending, Vector2 } from "three";
@ -29,13 +26,16 @@ const { paths } = await useLoader(SVGLoader, '/circuit-board.svg');
const shapes = paths.map(path => SVGLoader.createShapes(path)).reduce((acc, curr) => [...acc, ...curr]); const shapes = paths.map(path => SVGLoader.createShapes(path)).reduce((acc, curr) => [...acc, ...curr]);
// Handle canvas size // Handle canvas size
const width = ref(window.innerWidth); const width = ref(0);
const height = ref(window.innerHeight); const height = ref(0);
const rows = computed(() => Math.ceil(height.value / 304)); const rows = computed(() => Math.ceil(height.value / 304));
const cols = computed(() => Math.ceil(width.value / 304)); const cols = computed(() => Math.ceil(width.value / 304));
const resizeObserver = new ResizeObserver(updateSize);
const resizeListener = ref<Element | null>(null);
function updateSize() { function updateSize() {
width.value = window.innerWidth; const rect = resizeListener.value?.getBoundingClientRect();
height.value = window.innerHeight; width.value = rect?.width ?? 0;
height.value = rect?.height ?? 0;
} }
watch([width, height, camera], ([width, height, camera]) => { watch([width, height, camera], ([width, height, camera]) => {
if (camera) { if (camera) {
@ -70,18 +70,19 @@ function handleMouseLeave(event: MouseEvent) {
// Setup window listeners // Setup window listeners
onMounted(() => { onMounted(() => {
window.addEventListener("resize", updateSize); if (resizeListener.value != null) {
resizeObserver.observe(resizeListener.value);
}
window.addEventListener("mousemove", updateMousePos); window.addEventListener("mousemove", updateMousePos);
window.addEventListener("mouseout", handleMouseLeave); window.addEventListener("mouseout", handleMouseLeave);
}); });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener("resize", updateSize);
window.removeEventListener("mousemove", updateMousePos); window.removeEventListener("mousemove", updateMousePos);
window.removeEventListener("mouseout", handleMouseLeave); window.removeEventListener("mouseout", handleMouseLeave);
}); });
// Shaders // Shaders
const blobRef = shallowRef(null); const blobRef = shallowRef<Element | null>(null);
const uniforms = { const uniforms = {
uTime: { value: 0 }, uTime: { value: 0 },
@ -124,13 +125,13 @@ onLoop(({ elapsed }) => {
</script> </script>
<style scoped> <style scoped>
.background { .resize-listener {
position: absolute; position: absolute;
top: 0; top: 0px;
left: 0; left: 0;
right: 0; right: -4px;
bottom: 0; bottom: 5px;
z-index: -1; z-index: -10;
overflow: hidden; pointer-events: none;
} }
</style> </style>

14
site/.vitepress/theme/Layout.vue.in
View file

@ -4,7 +4,9 @@
<NolebaseHighlightTargetedHeading /> <NolebaseHighlightTargetedHeading />
<ClientOnly> <ClientOnly>
<Suspense> <Suspense>
<Background /> <div class="background">
<Background />
</div>
</Suspense> </Suspense>
</ClientOnly> </ClientOnly>
</template> </template>
@ -28,6 +30,16 @@ import Background from './Background.vue'
</script> </script>
<style scoped> <style scoped>
.background {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
overflow: hidden;
}
footer { footer {
padding: 2em; padding: 2em;
z-index: 26; z-index: 26;