mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 06:29:30 -07:00
Remvove "any" usage from PixelBlast
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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();
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user