mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 14:39:30 -07:00
Merge branch 'main' into feat/electric-border
This commit is contained in:
David
GitHub
224
src/content/Backgrounds/Plasma/Plasma.vue
Normal file
224
src/content/Backgrounds/Plasma/Plasma.vue
Normal file
@@ -0,0 +1,224 @@
|
||||
<script setup lang="ts">
|
||||
import { Mesh, Program, Renderer, Triangle } from 'ogl';
|
||||
import { onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
|
||||
|
||||
interface PlasmaProps {
|
||||
color?: string;
|
||||
speed?: number;
|
||||
direction?: 'forward' | 'reverse' | 'pingpong';
|
||||
scale?: number;
|
||||
opacity?: number;
|
||||
mouseInteractive?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<PlasmaProps>(), {
|
||||
color: '#9EF2BE',
|
||||
speed: 1,
|
||||
direction: 'forward',
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
mouseInteractive: true
|
||||
});
|
||||
|
||||
const hexToRgb = (hex: string): [number, number, number] => {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
if (!result) return [1, 0.5, 0.2];
|
||||
return [parseInt(result[1], 16) / 255, parseInt(result[2], 16) / 255, parseInt(result[3], 16) / 255];
|
||||
};
|
||||
|
||||
const vertex = `#version 300 es
|
||||
precision highp float;
|
||||
in vec2 position;
|
||||
in vec2 uv;
|
||||
out vec2 vUv;
|
||||
void main() {
|
||||
vUv = uv;
|
||||
gl_Position = vec4(position, 0.0, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const fragment = `#version 300 es
|
||||
precision highp float;
|
||||
uniform vec2 iResolution;
|
||||
uniform float iTime;
|
||||
uniform vec3 uCustomColor;
|
||||
uniform float uUseCustomColor;
|
||||
uniform float uSpeed;
|
||||
uniform float uDirection;
|
||||
uniform float uScale;
|
||||
uniform float uOpacity;
|
||||
uniform vec2 uMouse;
|
||||
uniform float uMouseInteractive;
|
||||
out vec4 fragColor;
|
||||
|
||||
void mainImage(out vec4 o, vec2 C) {
|
||||
vec2 center = iResolution.xy * 0.5;
|
||||
C = (C - center) / uScale + center;
|
||||
|
||||
vec2 mouseOffset = (uMouse - center) * 0.0002;
|
||||
C += mouseOffset * length(C - center) * step(0.5, uMouseInteractive);
|
||||
|
||||
float i, d, z, T = iTime * uSpeed * uDirection;
|
||||
vec3 O, p, S;
|
||||
|
||||
for (vec2 r = iResolution.xy, Q; ++i < 60.; O += o.w/d*o.xyz) {
|
||||
p = z*normalize(vec3(C-.5*r,r.y));
|
||||
p.z -= 4.;
|
||||
S = p;
|
||||
d = p.y-T;
|
||||
|
||||
p.x += .4*(1.+p.y)*sin(d + p.x*0.1)*cos(.34*d + p.x*0.05);
|
||||
Q = p.xz *= mat2(cos(p.y+vec4(0,11,33,0)-T));
|
||||
z+= d = abs(sqrt(length(Q*Q)) - .25*(5.+S.y))/3.+8e-4;
|
||||
o = 1.+sin(S.y+p.z*.5+S.z-length(S-p)+vec4(2,1,0,8));
|
||||
}
|
||||
|
||||
o.xyz = tanh(O/1e4);
|
||||
}
|
||||
|
||||
bool finite1(float x){ return !(isnan(x) || isinf(x)); }
|
||||
vec3 sanitize(vec3 c){
|
||||
return vec3(
|
||||
finite1(c.r) ? c.r : 0.0,
|
||||
finite1(c.g) ? c.g : 0.0,
|
||||
finite1(c.b) ? c.b : 0.0
|
||||
);
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec4 o = vec4(0.0);
|
||||
mainImage(o, gl_FragCoord.xy);
|
||||
vec3 rgb = sanitize(o.rgb);
|
||||
|
||||
float intensity = (rgb.r + rgb.g + rgb.b) / 3.0;
|
||||
vec3 customColor = intensity * uCustomColor;
|
||||
vec3 finalColor = mix(rgb, customColor, step(0.5, uUseCustomColor));
|
||||
|
||||
float alpha = length(rgb) * uOpacity;
|
||||
fragColor = vec4(finalColor, alpha);
|
||||
}`;
|
||||
|
||||
const containerRef = useTemplateRef('containerRef');
|
||||
const mousePos = ref({ x: 0, y: 0 });
|
||||
|
||||
let cleanup: (() => void) | null = null;
|
||||
|
||||
const setup = () => {
|
||||
if (!containerRef.value) return;
|
||||
|
||||
const useCustomColor = props.color ? 1.0 : 0.0;
|
||||
const customColorRgb = props.color ? hexToRgb(props.color) : [1, 1, 1];
|
||||
|
||||
const directionMultiplier = props.direction === 'reverse' ? -1.0 : 1.0;
|
||||
|
||||
const renderer = new Renderer({
|
||||
webgl: 2,
|
||||
alpha: true,
|
||||
antialias: false,
|
||||
dpr: Math.min(window.devicePixelRatio || 1, 2)
|
||||
});
|
||||
const gl = renderer.gl;
|
||||
const canvas = gl.canvas as HTMLCanvasElement;
|
||||
canvas.style.display = 'block';
|
||||
canvas.style.width = '100%';
|
||||
canvas.style.height = '100%';
|
||||
containerRef.value.appendChild(canvas);
|
||||
|
||||
const geometry = new Triangle(gl);
|
||||
|
||||
const program = new Program(gl, {
|
||||
vertex: vertex,
|
||||
fragment: fragment,
|
||||
uniforms: {
|
||||
iTime: { value: 0 },
|
||||
iResolution: { value: new Float32Array([1, 1]) },
|
||||
uCustomColor: { value: new Float32Array(customColorRgb) },
|
||||
uUseCustomColor: { value: useCustomColor },
|
||||
uSpeed: { value: props.speed * 0.4 },
|
||||
uDirection: { value: directionMultiplier },
|
||||
uScale: { value: props.scale },
|
||||
uOpacity: { value: props.opacity },
|
||||
uMouse: { value: new Float32Array([0, 0]) },
|
||||
uMouseInteractive: { value: props.mouseInteractive ? 1.0 : 0.0 }
|
||||
}
|
||||
});
|
||||
|
||||
const mesh = new Mesh(gl, { geometry, program });
|
||||
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
if (!props.mouseInteractive) return;
|
||||
const rect = containerRef.value!.getBoundingClientRect();
|
||||
mousePos.value.x = e.clientX - rect.left;
|
||||
mousePos.value.y = e.clientY - rect.top;
|
||||
const mouseUniform = program.uniforms.uMouse.value as Float32Array;
|
||||
mouseUniform[0] = mousePos.value.x;
|
||||
mouseUniform[1] = mousePos.value.y;
|
||||
};
|
||||
|
||||
if (props.mouseInteractive) {
|
||||
containerRef.value.addEventListener('mousemove', handleMouseMove);
|
||||
}
|
||||
|
||||
const setSize = () => {
|
||||
const rect = containerRef.value!.getBoundingClientRect();
|
||||
const width = Math.max(1, Math.floor(rect.width));
|
||||
const height = Math.max(1, Math.floor(rect.height));
|
||||
renderer.setSize(width, height);
|
||||
const res = program.uniforms.iResolution.value as Float32Array;
|
||||
res[0] = gl.drawingBufferWidth;
|
||||
res[1] = gl.drawingBufferHeight;
|
||||
};
|
||||
|
||||
const ro = new ResizeObserver(setSize);
|
||||
ro.observe(containerRef.value);
|
||||
setSize();
|
||||
|
||||
let raf = 0;
|
||||
const t0 = performance.now();
|
||||
const loop = (t: number) => {
|
||||
const timeValue = (t - t0) * 0.001;
|
||||
|
||||
if (props.direction === 'pingpong') {
|
||||
const cycle = Math.sin(timeValue * 0.5) * directionMultiplier;
|
||||
(program.uniforms.uDirection as { value: number }).value = cycle;
|
||||
}
|
||||
|
||||
(program.uniforms.iTime as { value: number }).value = timeValue;
|
||||
renderer.render({ scene: mesh });
|
||||
raf = requestAnimationFrame(loop);
|
||||
};
|
||||
raf = requestAnimationFrame(loop);
|
||||
|
||||
cleanup = () => {
|
||||
cancelAnimationFrame(raf);
|
||||
ro.disconnect();
|
||||
if (props.mouseInteractive && containerRef.value) {
|
||||
containerRef.value.removeEventListener('mousemove', handleMouseMove);
|
||||
}
|
||||
try {
|
||||
containerRef.value?.removeChild(canvas);
|
||||
} catch {}
|
||||
};
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
setup();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
cleanup?.();
|
||||
});
|
||||
|
||||
watch(
|
||||
props,
|
||||
() => {
|
||||
cleanup?.();
|
||||
setup();
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="containerRef" class="relative w-full h-full overflow-hidden" />
|
||||
</template>
|
||||
459
src/content/Backgrounds/Prism/Prism.vue
Normal file
459
src/content/Backgrounds/Prism/Prism.vue
Normal file
@@ -0,0 +1,459 @@
|
||||
<script setup lang="ts">
|
||||
import { Mesh, Program, Renderer, Triangle } from 'ogl';
|
||||
import { onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue';
|
||||
|
||||
type PrismProps = {
|
||||
height?: number;
|
||||
baseWidth?: number;
|
||||
animationType?: 'rotate' | 'hover' | '3drotate';
|
||||
glow?: number;
|
||||
offset?: { x?: number; y?: number };
|
||||
noise?: number;
|
||||
transparent?: boolean;
|
||||
scale?: number;
|
||||
hueShift?: number;
|
||||
colorFrequency?: number;
|
||||
hoverStrength?: number;
|
||||
inertia?: number;
|
||||
bloom?: number;
|
||||
suspendWhenOffscreen?: boolean;
|
||||
timeScale?: number;
|
||||
};
|
||||
|
||||
const props = withDefaults(defineProps<PrismProps>(), {
|
||||
height: 3.5,
|
||||
baseWidth: 5.5,
|
||||
animationType: 'rotate',
|
||||
glow: 1,
|
||||
offset: () => ({ x: 0, y: 0 }),
|
||||
noise: 0.5,
|
||||
transparent: true,
|
||||
scale: 3.6,
|
||||
hueShift: 0,
|
||||
colorFrequency: 1,
|
||||
hoverStrength: 2,
|
||||
inertia: 0.05,
|
||||
bloom: 1,
|
||||
suspendWhenOffscreen: false,
|
||||
timeScale: 0.5
|
||||
});
|
||||
|
||||
const containerRef = useTemplateRef('containerRef');
|
||||
|
||||
let cleanup: (() => void) | null = null;
|
||||
|
||||
const setup = () => {
|
||||
const container = containerRef.value;
|
||||
if (!container) return;
|
||||
|
||||
const H = Math.max(0.001, props.height);
|
||||
const BW = Math.max(0.001, props.baseWidth);
|
||||
const BASE_HALF = BW * 0.5;
|
||||
const GLOW = Math.max(0.0, props.glow);
|
||||
const NOISE = Math.max(0.0, props.noise);
|
||||
const offX = props.offset?.x ?? 0;
|
||||
const offY = props.offset?.y ?? 0;
|
||||
const SAT = props.transparent ? 1.5 : 1;
|
||||
const SCALE = Math.max(0.001, props.scale);
|
||||
const HUE = props.hueShift || 0;
|
||||
const CFREQ = Math.max(0.0, props.colorFrequency || 1);
|
||||
const BLOOM = Math.max(0.0, props.bloom || 1);
|
||||
const RSX = 1;
|
||||
const RSY = 1;
|
||||
const RSZ = 1;
|
||||
const TS = Math.max(0, props.timeScale || 1);
|
||||
const HOVSTR = Math.max(0, props.hoverStrength || 1);
|
||||
const INERT = Math.max(0, Math.min(1, props.inertia || 0.12));
|
||||
|
||||
const dpr = Math.min(2, window.devicePixelRatio || 1);
|
||||
const renderer = new Renderer({
|
||||
dpr,
|
||||
alpha: props.transparent,
|
||||
antialias: false
|
||||
});
|
||||
const gl = renderer.gl;
|
||||
gl.disable(gl.DEPTH_TEST);
|
||||
gl.disable(gl.CULL_FACE);
|
||||
gl.disable(gl.BLEND);
|
||||
|
||||
Object.assign(gl.canvas.style, {
|
||||
position: 'absolute',
|
||||
inset: '0',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'block'
|
||||
} as Partial<CSSStyleDeclaration>);
|
||||
container.appendChild(gl.canvas);
|
||||
|
||||
const vertex = /* glsl */ `
|
||||
attribute vec2 position;
|
||||
void main() {
|
||||
gl_Position = vec4(position, 0.0, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const fragment = /* glsl */ `
|
||||
precision highp float;
|
||||
|
||||
uniform vec2 iResolution;
|
||||
uniform float iTime;
|
||||
|
||||
uniform float uHeight;
|
||||
uniform float uBaseHalf;
|
||||
uniform mat3 uRot;
|
||||
uniform int uUseBaseWobble;
|
||||
uniform float uGlow;
|
||||
uniform vec2 uOffsetPx;
|
||||
uniform float uNoise;
|
||||
uniform float uSaturation;
|
||||
uniform float uScale;
|
||||
uniform float uHueShift;
|
||||
uniform float uColorFreq;
|
||||
uniform float uBloom;
|
||||
uniform float uCenterShift;
|
||||
uniform float uInvBaseHalf;
|
||||
uniform float uInvHeight;
|
||||
uniform float uMinAxis;
|
||||
uniform float uPxScale;
|
||||
uniform float uTimeScale;
|
||||
|
||||
vec4 tanh4(vec4 x){
|
||||
vec4 e2x = exp(2.0*x);
|
||||
return (e2x - 1.0) / (e2x + 1.0);
|
||||
}
|
||||
|
||||
float rand(vec2 co){
|
||||
return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453123);
|
||||
}
|
||||
|
||||
float sdOctaAnisoInv(vec3 p){
|
||||
vec3 q = vec3(abs(p.x) * uInvBaseHalf, abs(p.y) * uInvHeight, abs(p.z) * uInvBaseHalf);
|
||||
float m = q.x + q.y + q.z - 1.0;
|
||||
return m * uMinAxis * 0.5773502691896258;
|
||||
}
|
||||
|
||||
float sdPyramidUpInv(vec3 p){
|
||||
float oct = sdOctaAnisoInv(p);
|
||||
float halfSpace = -p.y;
|
||||
return max(oct, halfSpace);
|
||||
}
|
||||
|
||||
mat3 hueRotation(float a){
|
||||
float c = cos(a), s = sin(a);
|
||||
mat3 W = mat3(
|
||||
0.299, 0.587, 0.114,
|
||||
0.299, 0.587, 0.114,
|
||||
0.299, 0.587, 0.114
|
||||
);
|
||||
mat3 U = mat3(
|
||||
0.701, -0.587, -0.114,
|
||||
-0.299, 0.413, -0.114,
|
||||
-0.300, -0.588, 0.886
|
||||
);
|
||||
mat3 V = mat3(
|
||||
0.168, -0.331, 0.500,
|
||||
0.328, 0.035, -0.500,
|
||||
-0.497, 0.296, 0.201
|
||||
);
|
||||
return W + U * c + V * s;
|
||||
}
|
||||
|
||||
void main(){
|
||||
vec2 f = (gl_FragCoord.xy - 0.5 * iResolution.xy - uOffsetPx) * uPxScale;
|
||||
|
||||
float z = 5.0;
|
||||
float d = 0.0;
|
||||
|
||||
vec3 p;
|
||||
vec4 o = vec4(0.0);
|
||||
|
||||
float centerShift = uCenterShift;
|
||||
float cf = uColorFreq;
|
||||
|
||||
mat2 wob = mat2(1.0);
|
||||
if (uUseBaseWobble == 1) {
|
||||
float t = iTime * uTimeScale;
|
||||
float c0 = cos(t + 0.0);
|
||||
float c1 = cos(t + 33.0);
|
||||
float c2 = cos(t + 11.0);
|
||||
wob = mat2(c0, c1, c2, c0);
|
||||
}
|
||||
|
||||
const int STEPS = 100;
|
||||
for (int i = 0; i < STEPS; i++) {
|
||||
p = vec3(f, z);
|
||||
p.xz = p.xz * wob;
|
||||
p = uRot * p;
|
||||
vec3 q = p;
|
||||
q.y += centerShift;
|
||||
d = 0.1 + 0.2 * abs(sdPyramidUpInv(q));
|
||||
z -= d;
|
||||
o += (sin((p.y + z) * cf + vec4(0.0, 1.0, 2.0, 3.0)) + 1.0) / d;
|
||||
}
|
||||
|
||||
o = tanh4(o * o * (uGlow * uBloom) / 1e5);
|
||||
|
||||
vec3 col = o.rgb;
|
||||
float n = rand(gl_FragCoord.xy + vec2(iTime));
|
||||
col += (n - 0.5) * uNoise;
|
||||
col = clamp(col, 0.0, 1.0);
|
||||
|
||||
float L = dot(col, vec3(0.2126, 0.7152, 0.0722));
|
||||
col = clamp(mix(vec3(L), col, uSaturation), 0.0, 1.0);
|
||||
|
||||
if(abs(uHueShift) > 0.0001){
|
||||
col = clamp(hueRotation(uHueShift) * col, 0.0, 1.0);
|
||||
}
|
||||
|
||||
gl_FragColor = vec4(col, o.a);
|
||||
}
|
||||
`;
|
||||
|
||||
const geometry = new Triangle(gl);
|
||||
const iResBuf = new Float32Array(2);
|
||||
const offsetPxBuf = new Float32Array(2);
|
||||
|
||||
const program = new Program(gl, {
|
||||
vertex,
|
||||
fragment,
|
||||
uniforms: {
|
||||
iResolution: { value: iResBuf },
|
||||
iTime: { value: 0 },
|
||||
uHeight: { value: H },
|
||||
uBaseHalf: { value: BASE_HALF },
|
||||
uUseBaseWobble: { value: 1 },
|
||||
uRot: { value: new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]) },
|
||||
uGlow: { value: GLOW },
|
||||
uOffsetPx: { value: offsetPxBuf },
|
||||
uNoise: { value: NOISE },
|
||||
uSaturation: { value: SAT },
|
||||
uScale: { value: SCALE },
|
||||
uHueShift: { value: HUE },
|
||||
uColorFreq: { value: CFREQ },
|
||||
uBloom: { value: BLOOM },
|
||||
uCenterShift: { value: H * 0.25 },
|
||||
uInvBaseHalf: { value: 1 / BASE_HALF },
|
||||
uInvHeight: { value: 1 / H },
|
||||
uMinAxis: { value: Math.min(BASE_HALF, H) },
|
||||
uPxScale: {
|
||||
value: 1 / ((gl.drawingBufferHeight || 1) * 0.1 * SCALE)
|
||||
},
|
||||
uTimeScale: { value: TS }
|
||||
}
|
||||
});
|
||||
const mesh = new Mesh(gl, { geometry, program });
|
||||
|
||||
const resize = () => {
|
||||
const w = container.clientWidth || 1;
|
||||
const h = container.clientHeight || 1;
|
||||
renderer.setSize(w, h);
|
||||
iResBuf[0] = gl.drawingBufferWidth;
|
||||
iResBuf[1] = gl.drawingBufferHeight;
|
||||
offsetPxBuf[0] = offX * dpr;
|
||||
offsetPxBuf[1] = offY * dpr;
|
||||
program.uniforms.uPxScale.value = 1 / ((gl.drawingBufferHeight || 1) * 0.1 * SCALE);
|
||||
};
|
||||
const ro = new ResizeObserver(resize);
|
||||
ro.observe(container);
|
||||
resize();
|
||||
|
||||
const rotBuf = new Float32Array(9);
|
||||
const setMat3FromEuler = (yawY: number, pitchX: number, rollZ: number, out: Float32Array) => {
|
||||
const cy = Math.cos(yawY),
|
||||
sy = Math.sin(yawY);
|
||||
const cx = Math.cos(pitchX),
|
||||
sx = Math.sin(pitchX);
|
||||
const cz = Math.cos(rollZ),
|
||||
sz = Math.sin(rollZ);
|
||||
const r00 = cy * cz + sy * sx * sz;
|
||||
const r01 = -cy * sz + sy * sx * cz;
|
||||
const r02 = sy * cx;
|
||||
|
||||
const r10 = cx * sz;
|
||||
const r11 = cx * cz;
|
||||
const r12 = -sx;
|
||||
|
||||
const r20 = -sy * cz + cy * sx * sz;
|
||||
const r21 = sy * sz + cy * sx * cz;
|
||||
const r22 = cy * cx;
|
||||
|
||||
out[0] = r00;
|
||||
out[1] = r10;
|
||||
out[2] = r20;
|
||||
out[3] = r01;
|
||||
out[4] = r11;
|
||||
out[5] = r21;
|
||||
out[6] = r02;
|
||||
out[7] = r12;
|
||||
out[8] = r22;
|
||||
return out;
|
||||
};
|
||||
|
||||
const NOISE_IS_ZERO = NOISE < 1e-6;
|
||||
let raf = 0;
|
||||
const t0 = performance.now();
|
||||
const startRAF = () => {
|
||||
if (raf) return;
|
||||
raf = requestAnimationFrame(render);
|
||||
};
|
||||
const stopRAF = () => {
|
||||
if (!raf) return;
|
||||
cancelAnimationFrame(raf);
|
||||
raf = 0;
|
||||
};
|
||||
|
||||
const rnd = () => Math.random();
|
||||
const wX = (0.3 + rnd() * 0.6) * RSX;
|
||||
const wY = (0.2 + rnd() * 0.7) * RSY;
|
||||
const wZ = (0.1 + rnd() * 0.5) * RSZ;
|
||||
const phX = rnd() * Math.PI * 2;
|
||||
const phZ = rnd() * Math.PI * 2;
|
||||
|
||||
let yaw = 0,
|
||||
pitch = 0,
|
||||
roll = 0;
|
||||
let targetYaw = 0,
|
||||
targetPitch = 0;
|
||||
const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
|
||||
|
||||
const pointer = { x: 0, y: 0, inside: true };
|
||||
const onMove = (e: PointerEvent) => {
|
||||
const ww = Math.max(1, window.innerWidth);
|
||||
const wh = Math.max(1, window.innerHeight);
|
||||
const cx = ww * 0.5;
|
||||
const cy = wh * 0.5;
|
||||
const nx = (e.clientX - cx) / (ww * 0.5);
|
||||
const ny = (e.clientY - cy) / (wh * 0.5);
|
||||
pointer.x = Math.max(-1, Math.min(1, nx));
|
||||
pointer.y = Math.max(-1, Math.min(1, ny));
|
||||
pointer.inside = true;
|
||||
};
|
||||
const onLeave = () => {
|
||||
pointer.inside = false;
|
||||
};
|
||||
const onBlur = () => {
|
||||
pointer.inside = false;
|
||||
};
|
||||
|
||||
let onPointerMove: ((e: PointerEvent) => void) | null = null;
|
||||
if (props.animationType === 'hover') {
|
||||
onPointerMove = (e: PointerEvent) => {
|
||||
onMove(e);
|
||||
startRAF();
|
||||
};
|
||||
window.addEventListener('pointermove', onPointerMove, { passive: true });
|
||||
window.addEventListener('mouseleave', onLeave);
|
||||
window.addEventListener('blur', onBlur);
|
||||
program.uniforms.uUseBaseWobble.value = 0;
|
||||
} else if (props.animationType === '3drotate') {
|
||||
program.uniforms.uUseBaseWobble.value = 0;
|
||||
} else {
|
||||
program.uniforms.uUseBaseWobble.value = 1;
|
||||
}
|
||||
|
||||
const render = (t: number) => {
|
||||
const time = (t - t0) * 0.001;
|
||||
program.uniforms.iTime.value = time;
|
||||
|
||||
let continueRAF = true;
|
||||
|
||||
if (props.animationType === 'hover') {
|
||||
const maxPitch = 0.6 * HOVSTR;
|
||||
const maxYaw = 0.6 * HOVSTR;
|
||||
targetYaw = (pointer.inside ? -pointer.x : 0) * maxYaw;
|
||||
targetPitch = (pointer.inside ? pointer.y : 0) * maxPitch;
|
||||
const prevYaw = yaw;
|
||||
const prevPitch = pitch;
|
||||
const prevRoll = roll;
|
||||
yaw = lerp(prevYaw, targetYaw, INERT);
|
||||
pitch = lerp(prevPitch, targetPitch, INERT);
|
||||
roll = lerp(prevRoll, 0, 0.1);
|
||||
program.uniforms.uRot.value = setMat3FromEuler(yaw, pitch, roll, rotBuf);
|
||||
|
||||
if (NOISE_IS_ZERO) {
|
||||
const settled =
|
||||
Math.abs(yaw - targetYaw) < 1e-4 && Math.abs(pitch - targetPitch) < 1e-4 && Math.abs(roll) < 1e-4;
|
||||
if (settled) continueRAF = false;
|
||||
}
|
||||
} else if (props.animationType === '3drotate') {
|
||||
const tScaled = time * TS;
|
||||
yaw = tScaled * wY;
|
||||
pitch = Math.sin(tScaled * wX + phX) * 0.6;
|
||||
roll = Math.sin(tScaled * wZ + phZ) * 0.5;
|
||||
program.uniforms.uRot.value = setMat3FromEuler(yaw, pitch, roll, rotBuf);
|
||||
if (TS < 1e-6) continueRAF = false;
|
||||
} else {
|
||||
rotBuf[0] = 1;
|
||||
rotBuf[1] = 0;
|
||||
rotBuf[2] = 0;
|
||||
rotBuf[3] = 0;
|
||||
rotBuf[4] = 1;
|
||||
rotBuf[5] = 0;
|
||||
rotBuf[6] = 0;
|
||||
rotBuf[7] = 0;
|
||||
rotBuf[8] = 1;
|
||||
program.uniforms.uRot.value = rotBuf;
|
||||
if (TS < 1e-6) continueRAF = false;
|
||||
}
|
||||
|
||||
renderer.render({ scene: mesh });
|
||||
if (continueRAF) {
|
||||
raf = requestAnimationFrame(render);
|
||||
} else {
|
||||
raf = 0;
|
||||
}
|
||||
};
|
||||
|
||||
if (props.suspendWhenOffscreen) {
|
||||
const io = new IntersectionObserver(entries => {
|
||||
const vis = entries.some(e => e.isIntersecting);
|
||||
if (vis) startRAF();
|
||||
else stopRAF();
|
||||
});
|
||||
io.observe(container);
|
||||
startRAF();
|
||||
(container as HTMLElement & { __prismIO?: IntersectionObserver }).__prismIO = io;
|
||||
} else {
|
||||
startRAF();
|
||||
}
|
||||
|
||||
cleanup = () => {
|
||||
stopRAF();
|
||||
ro.disconnect();
|
||||
if (props.animationType === 'hover') {
|
||||
if (onPointerMove) window.removeEventListener('pointermove', onPointerMove as EventListener);
|
||||
window.removeEventListener('mouseleave', onLeave);
|
||||
window.removeEventListener('blur', onBlur);
|
||||
}
|
||||
if (props.suspendWhenOffscreen) {
|
||||
const io = (container as HTMLElement & { __prismIO?: IntersectionObserver }).__prismIO as
|
||||
| IntersectionObserver
|
||||
| undefined;
|
||||
if (io) io.disconnect();
|
||||
delete (container as HTMLElement & { __prismIO?: IntersectionObserver }).__prismIO;
|
||||
}
|
||||
if (gl.canvas.parentElement === container) container.removeChild(gl.canvas);
|
||||
};
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
setup();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
cleanup?.();
|
||||
});
|
||||
|
||||
watch(
|
||||
props,
|
||||
() => {
|
||||
cleanup?.();
|
||||
setup();
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative w-full h-full" ref="containerRef" />
|
||||
</template>
|
||||
Reference in New Issue
Block a user