From 10354cb5f3ba921bf628c8ec0bbfe780e6b55a19 Mon Sep 17 00:00:00 2001 From: yiqiu Date: Sat, 22 Nov 2025 19:11:18 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E6=96=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/globe.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/js/globe.js b/js/globe.js index 5ec9ace..50e3782 100644 --- a/js/globe.js +++ b/js/globe.js @@ -47,7 +47,7 @@ // 可调参数：你可以根据效果需求自行修改 var PARTICLE_COUNT = 800; // 粒子数量，越多越实，但性能负担也越大 var SPHERE_RADIUS = 3.1; // 球体半径（世界单位，调大可让球在竖直方向更“撑满”） - var SPHERE_OFFSET_X = 3.0; // 球心在 X 轴上的偏移量，用于将球体放在画布偏右的位置 + var SPHERE_OFFSET_X = 3.5; // 球心在 X 轴上的偏移量，用于将球体放在画布偏右的位置 var START_RADIUS_MIN = 10.0; // 粒子起始距离下限（调大一点，让更多粒子从画布边缘外飞入） var START_RADIUS_MAX = 18.0; // 粒子起始距离上限 var FORMATION_DURATION = 13000; // 粒子从散开到聚合成球的时间（毫秒） @@ -112,7 +112,7 @@ // 粒子尺寸：每个粒子随机一个基础大小，后续在顶点着色器中再做距离衰减 // 你可以调节下方这两个数，控制整体粒子大小的分布范围 - sizes[i] = 0.8 + Math.random() * 2.2; // 0.8 ~ 3.0 之间 + sizes[i] = 1.0 + Math.random() * 1.5; // 1.0 ~ 2.5 之间，避免大颗粒过于“糊” } geometry.setAttribute( @@ -128,8 +128,8 @@ var material = new THREE.ShaderMaterial({ uniforms: { uColor: { value: new THREE.Color(0x38bdf8) }, // 粒子主色 - uOpacity: { value: 0.95 }, - uSize: { value: 18.0 }, // 全局尺寸基准，越大粒子越大 + uOpacity: { value: 1.0 }, + uSize: { value: 16.0 }, // 全局尺寸基准，越大粒子越大 uPixelRatio: { value: Math.min(window.devicePixelRatio || 1, 2) }, }, vertexShader: ` @@ -149,12 +149,13 @@ uniform vec3 uColor; uniform float uOpacity; void main() { - // 将点渲染成柔和的圆形（不使用默认的方形 point sprite） + // 将点渲染成相对清晰的圆形（中心亮，边缘略微柔和） vec2 c = gl_PointCoord - vec2(0.5); float d = length(c); - if (d > 0.5) discard; - float alpha = (1.0 - d * 2.0) * uOpacity; - if (alpha <= 0.0) discard; + // 0.35 以内基本保持满色，0.35~0.5 做少量抗锯齿过渡 + float mask = smoothstep(0.5, 0.35, d); + if (mask <= 0.0) discard; + float alpha = uOpacity * mask; gl_FragColor = vec4(uColor, alpha); } `,