Loading effect…
查看源码 / Source点击展开
<!--
ParticleSpherePost.vue — 同款粒子球,使用 pmndrs/postprocessing 替代 three 自带的
EffectComposer。多个 effect 合并成单 fragment shader,GPU 开销更低,效果可叠加更多层。
迁移说明(Vite→Nuxt):
- window.devicePixelRatio 加 SSG 守卫(组件虽由 <ClientOnly> 包裹, 仍防御性处理)
- 本组件须在父级用 <ClientOnly> 包裹, 不在服务端渲染。
-->
<script setup lang="ts">
import { onMounted, onBeforeUnmount, useTemplateRef } from 'vue'
import * as THREE from 'three'
import {
EffectComposer,
EffectPass,
RenderPass,
BloomEffect,
ChromaticAberrationEffect,
NoiseEffect,
VignetteEffect,
ScanlineEffect,
KernelSize,
BlendFunction,
} from 'postprocessing'
interface Props {
count?: number
radius?: number
pointSize?: number
colorA?: string
colorB?: string
}
const { t: tr } = useI18n({ useScope: 'local' })
const props = withDefaults(defineProps<Props>(), {
count: 14000,
radius: 1.6,
pointSize: 3.0,
colorA: '#D946EF',
colorB: '#22D3EE',
})
const containerRef = useTemplateRef<HTMLDivElement>('container')
let renderer: THREE.WebGLRenderer
let composer: EffectComposer
let scene: THREE.Scene
let camera: THREE.PerspectiveCamera
let points: THREE.Points
let geometry: THREE.BufferGeometry
let material: THREE.ShaderMaterial
let rafId = 0
let resizeObserver: ResizeObserver | null = null
const mouseTarget = new THREE.Vector3(0, 0, 1)
let mouseStrTarget = 0
const clock = new THREE.Clock()
const vertexShader = /* glsl */`
uniform float uTime;
uniform vec3 uMouse;
uniform float uMouseStr;
uniform float uPointSize;
uniform float uPixelRatio;
attribute float aSeed;
varying float vDisp;
float hash(vec3 p) { return fract(sin(dot(p, vec3(12.9898,78.233,37.719))) * 43758.5453); }
float noise(vec3 p){
vec3 i = floor(p), f = fract(p);
f = f*f*(3.0-2.0*f);
return mix(mix(mix(hash(i), hash(i+vec3(1,0,0)), f.x),
mix(hash(i+vec3(0,1,0)), hash(i+vec3(1,1,0)), f.x), f.y),
mix(mix(hash(i+vec3(0,0,1)), hash(i+vec3(1,0,1)), f.x),
mix(hash(i+vec3(0,1,1)), hash(i+vec3(1,1,1)), f.x), f.y), f.z);
}
void main() {
vec3 pos = position;
vec3 dir = normalize(pos);
float breathe = sin(uTime * 0.6 + aSeed * 6.28) * 0.04;
float n = noise(dir * 2.5 + uTime * 0.25);
float disp = (n - 0.5) * 0.35;
float md = distance(dir, normalize(uMouse + vec3(0.0001)));
float ripple = exp(-md * 4.0) * sin(md * 12.0 - uTime * 4.0) * uMouseStr * 0.5;
float total = breathe + disp + ripple;
pos += dir * total;
vDisp = total;
vec4 mv = modelViewMatrix * vec4(pos, 1.0);
gl_Position = projectionMatrix * mv;
float atten = 5.0 / -mv.z;
gl_PointSize = uPointSize * uPixelRatio * (0.8 + total * 1.0) * atten;
}
`
const fragmentShader = /* glsl */`
uniform vec3 uColorA;
uniform vec3 uColorB;
varying float vDisp;
void main() {
vec2 uv = gl_PointCoord - 0.5;
float d = length(uv);
if (d > 0.5) discard;
float halo = smoothstep(0.5, 0.0, d);
halo = pow(halo, 1.6);
float t = smoothstep(-0.2, 0.3, vDisp);
vec3 col = mix(uColorA, uColorB, t);
gl_FragColor = vec4(col * halo * 1.4, 1.0);
}
`
function buildGeometry() {
const g = new THREE.BufferGeometry()
const positions = new Float32Array(props.count * 3)
const seeds = new Float32Array(props.count)
const phi = Math.PI * (Math.sqrt(5) - 1)
for (let i = 0; i < props.count; i++) {
const y = 1 - (i / (props.count - 1)) * 2
const r = Math.sqrt(1 - y * y)
const theta = phi * i
positions[i * 3] = Math.cos(theta) * r * props.radius
positions[i * 3 + 1] = y * props.radius
positions[i * 3 + 2] = Math.sin(theta) * r * props.radius
seeds[i] = Math.random()
}
g.setAttribute('position', new THREE.BufferAttribute(positions, 3))
g.setAttribute('aSeed', new THREE.BufferAttribute(seeds, 1))
return g
}
function setSize(w: number, h: number) {
renderer.setSize(w, h, false)
composer.setSize(w, h)
camera.aspect = w / h
camera.updateProjectionMatrix()
}
function onPointerMove(e: PointerEvent) {
const el = containerRef.value!
const rect = el.getBoundingClientRect()
const x = ((e.clientX - rect.left) / rect.width) * 2 - 1
const y = -((e.clientY - rect.top) / rect.height) * 2 + 1
mouseTarget.set(x, y, Math.sqrt(Math.max(0, 1 - x * x - y * y)))
mouseStrTarget = 1
}
function onPointerLeave() {
mouseStrTarget = 0
}
onMounted(() => {
const el = containerRef.value!
const w = el.clientWidth
const h = el.clientHeight
scene = new THREE.Scene()
scene.background = new THREE.Color(0x0d0418)
camera = new THREE.PerspectiveCamera(55, w / h, 0.1, 100)
camera.position.set(0, 0, 5)
// postprocessing 推荐 powerPreference: 'high-performance' + stencil/depth 关闭
renderer = new THREE.WebGLRenderer({
antialias: false,
powerPreference: 'high-performance',
stencil: false,
depth: false,
})
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.setSize(w, h)
el.appendChild(renderer.domElement)
geometry = buildGeometry()
material = new THREE.ShaderMaterial({
uniforms: {
uTime: { value: 0 },
uMouse: { value: new THREE.Vector3(0, 0, 1) },
uMouseStr: { value: 0 },
uPointSize: { value: props.pointSize },
uPixelRatio: { value: Math.min(window.devicePixelRatio, 2) },
uColorA: { value: new THREE.Color(props.colorA) },
uColorB: { value: new THREE.Color(props.colorB) },
},
vertexShader,
fragmentShader,
transparent: true,
depthWrite: false,
blending: THREE.AdditiveBlending,
})
points = new THREE.Points(geometry, material)
scene.add(points)
// ===== postprocessing pipeline =====
// 单个 EffectPass 把 4 个 effect 合并成一个 fragment shader,只一次全屏 quad
composer = new EffectComposer(renderer)
composer.addPass(new RenderPass(scene, camera))
composer.addPass(new EffectPass(
camera,
new BloomEffect({
intensity: 2.0,
luminanceThreshold: 0.1,
luminanceSmoothing: 0.5,
kernelSize: KernelSize.LARGE,
mipmapBlur: true,
}),
new ChromaticAberrationEffect({
offset: new THREE.Vector2(0.006, 0.006),
radialModulation: true,
modulationOffset: 0.15,
}),
new ScanlineEffect({
blendFunction: BlendFunction.OVERLAY,
density: 1.4,
}),
new NoiseEffect({
blendFunction: BlendFunction.OVERLAY,
premultiply: true,
}),
new VignetteEffect({
offset: 0.25,
darkness: 0.85,
}),
))
const tick = () => {
const t = clock.getElapsedTime()
material.uniforms.uTime.value = t
material.uniforms.uMouse.value.lerp(mouseTarget, 0.1)
material.uniforms.uMouseStr.value += (mouseStrTarget - material.uniforms.uMouseStr.value) * 0.08
points.rotation.y = t * 0.08
points.rotation.x = Math.sin(t * 0.15) * 0.2
composer.render()
rafId = requestAnimationFrame(tick)
}
tick()
resizeObserver = new ResizeObserver(entries => {
for (const entry of entries) {
const cr = entry.contentRect
setSize(cr.width, cr.height)
}
})
resizeObserver.observe(el)
})
onBeforeUnmount(() => {
cancelAnimationFrame(rafId)
resizeObserver?.disconnect()
geometry?.dispose()
material?.dispose()
composer?.dispose()
renderer?.dispose()
if (renderer?.domElement?.parentNode) {
renderer.domElement.parentNode.removeChild(renderer.domElement)
}
})
</script>
<template>
<div ref="container" class="ps-wrap" @pointermove="onPointerMove" @pointerleave="onPointerLeave">
<div class="ps-hint">{{ tr('hint') }}</div>
</div>
</template>
<i18n lang="json">
{
"zh": { "hint": "移动鼠标" },
"en": { "hint": "Move cursor" }
}
</i18n>
<style scoped>
.ps-wrap {
position: relative;
width: 100%;
height: 100%;
min-height: 480px;
background: radial-gradient(ellipse at center, #1a0822 0%, #06040c 70%);
overflow: hidden;
border-radius: 12px;
cursor: crosshair;
}
.ps-hint {
position: absolute;
left: 16px;
bottom: 14px;
z-index: 10;
font-family: 'Consolas', monospace;
font-size: 11px;
letter-spacing: 3px;
color: rgba(255, 255, 255, 0.45);
pointer-events: none;
user-select: none;
}
</style>