Remvove "any" usage from PixelBlast

This commit is contained in:
David Haz
2025-09-01 09:01:19 +03:00
parent 24633275e8
commit af455f62d5
3 changed files with 30 additions and 15 deletions

View File

@@ -70,7 +70,7 @@ import ContributionSection from './ContributionSection.vue';
:deep(.p-tablist-tab-list) { :deep(.p-tablist-tab-list) {
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
padding-bottom: .1em; padding-bottom: 0.1em;
align-items: flex-start; align-items: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
border: none !important; border: none !important;

View File

@@ -118,7 +118,7 @@ const setupAnimation = () => {
const corners = Array.from(cornersRef.value); const corners = Array.from(cornersRef.value);
corners.forEach(corner => { corners.forEach(corner => {
gsap.killTweensOf(corner); gsap.killTweensOf(corner);
}) });
gsap.killTweensOf(cursorRef.value, 'rotation'); gsap.killTweensOf(cursorRef.value, 'rotation');
spinTl.value?.pause(); spinTl.value?.pause();

View File

@@ -395,7 +395,13 @@ const threeRef = ref<{
touch?: ReturnType<typeof createTouchTexture>; touch?: ReturnType<typeof createTouchTexture>;
liquidEffect?: Effect; liquidEffect?: Effect;
} | null>(null); } | null>(null);
const prevConfigRef = ref<any>(null);
interface PixelBlastConfig {
antialias: boolean;
liquid: boolean;
noiseAmount: number;
}
const prevConfigRef = ref<PixelBlastConfig | null>(null);
let cleanup: (() => void) | null = null; let cleanup: (() => void) | null = null;
@@ -403,13 +409,17 @@ const setup = () => {
const container = containerRef.value; const container = containerRef.value;
if (!container) return; if (!container) return;
speedRef.value = props.speed; speedRef.value = props.speed;
const needsReinitKeys = ['antialias', 'liquid', 'noiseAmount']; const needsReinitKeys: (keyof PixelBlastConfig)[] = ['antialias', 'liquid', 'noiseAmount'];
const cfg = { antialias: props.antialias, liquid: props.liquid, noiseAmount: props.noiseAmount }; const cfg: PixelBlastConfig = {
antialias: props.antialias,
liquid: props.liquid,
noiseAmount: props.noiseAmount
};
let mustReinit = false; let mustReinit = false;
if (!threeRef.value) mustReinit = true; if (!threeRef.value) mustReinit = true;
else if (prevConfigRef.value) { else if (prevConfigRef.value) {
for (const k of needsReinitKeys) for (const k of needsReinitKeys)
if (prevConfigRef.value[k] !== (cfg as any)[k]) { if (prevConfigRef.value[k] !== cfg[k]) {
mustReinit = true; mustReinit = true;
break; break;
} }
@@ -486,7 +496,7 @@ const setup = () => {
const ro = new ResizeObserver(setSize); const ro = new ResizeObserver(setSize);
ro.observe(container); ro.observe(container);
const randomFloat = () => { const randomFloat = () => {
if (typeof window !== 'undefined' && (window as any).crypto?.getRandomValues) { if (typeof window !== 'undefined' && window.crypto?.getRandomValues) {
const u32 = new Uint32Array(1); const u32 = new Uint32Array(1);
window.crypto.getRandomValues(u32); window.crypto.getRandomValues(u32);
return u32[0] / 0xffffffff; return u32[0] / 0xffffffff;
@@ -528,7 +538,11 @@ const setup = () => {
); );
const noisePass = new EffectPass(camera, noiseEffect); const noisePass = new EffectPass(camera, noiseEffect);
noisePass.renderToScreen = true; noisePass.renderToScreen = true;
if (composer && composer.passes.length > 0) composer.passes.forEach(p => ((p as any).renderToScreen = false)); if (composer && composer.passes.length > 0)
composer.passes.forEach(p => {
// EffectPass has renderToScreen; ensure we turn it off before adding a new final pass
if ('renderToScreen' in p) (p as { renderToScreen?: boolean }).renderToScreen = false;
});
composer.addPass(noisePass); composer.addPass(noisePass);
} }
if (composer) composer.setSize(renderer.domElement.width, renderer.domElement.height); if (composer) composer.setSize(renderer.domElement.width, renderer.domElement.height);
@@ -570,16 +584,17 @@ const setup = () => {
return; return;
} }
uniforms.uTime.value = timeOffset + clock.getElapsedTime() * speedRef.value; uniforms.uTime.value = timeOffset + clock.getElapsedTime() * speedRef.value;
if (liquidEffect) (liquidEffect as any).uniforms.get('uTime').value = uniforms.uTime.value; if (liquidEffect) liquidEffect.uniforms.get('uTime')!.value = uniforms.uTime.value;
if (composer) { if (composer) {
if (touch) touch.update(); if (touch) touch.update();
composer.passes.forEach(p => { composer.passes.forEach(p => {
const effs = (p as any).effects; if (p instanceof EffectPass) {
if (effs) const effs = (p as unknown as { effects?: Effect[] }).effects;
effs.forEach((eff: any) => { effs?.forEach(eff => {
const u = eff.uniforms?.get('uTime'); const u = eff.uniforms.get('uTime');
if (u) u.value = uniforms.uTime.value; if (u) u.value = uniforms.uTime.value;
}); });
}
}); });
composer.render(); composer.render();
} else renderer.render(scene, camera); } else renderer.render(scene, camera);
@@ -618,9 +633,9 @@ const setup = () => {
if (props.transparent) t.renderer.setClearAlpha(0); if (props.transparent) t.renderer.setClearAlpha(0);
else t.renderer.setClearColor(0x000000, 1); else t.renderer.setClearColor(0x000000, 1);
if (t.liquidEffect) { if (t.liquidEffect) {
const uStrength = (t.liquidEffect as any).uniforms.get('uStrength'); const uStrength = t.liquidEffect?.uniforms.get('uStrength');
if (uStrength) uStrength.value = props.liquidStrength; if (uStrength) uStrength.value = props.liquidStrength;
const uFreq = (t.liquidEffect as any).uniforms.get('uFreq'); const uFreq = t.liquidEffect?.uniforms.get('uFreq');
if (uFreq) uFreq.value = props.liquidWobbleSpeed; if (uFreq) uFreq.value = props.liquidWobbleSpeed;
} }
if (t.touch) t.touch.radiusScale = props.liquidRadius; if (t.touch) t.touch.radiusScale = props.liquidRadius;