Make background support not being full page
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 59s
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 59s
This commit is contained in:
parent
a4e47f244f
commit
831060a57e
2 changed files with 43 additions and 30 deletions
|
@ -1,5 +1,4 @@
|
||||||
<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">
|
||||||
|
@ -9,16 +8,14 @@
|
||||||
</TresMesh>
|
</TresMesh>
|
||||||
</TresGroup>
|
</TresGroup>
|
||||||
<TresAmbientLight :intensity="1" />
|
<TresAmbientLight :intensity="1" />
|
||||||
<OrbitControls />
|
|
||||||
</TresCanvas>
|
</TresCanvas>
|
||||||
</div>
|
<div ref="resizeListener" class="resize-listener" />
|
||||||
</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>
|
||||||
|
|
|
@ -4,7 +4,9 @@
|
||||||
<NolebaseHighlightTargetedHeading />
|
<NolebaseHighlightTargetedHeading />
|
||||||
<ClientOnly>
|
<ClientOnly>
|
||||||
<Suspense>
|
<Suspense>
|
||||||
|
<div class="background">
|
||||||
<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;
|
||||||
|
|
Loading…
Reference in a new issue