This commit is contained in:
17
js/globe.js
17
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);
|
||||
}
|
||||
`,
|
||||
|
||||
Reference in New Issue
Block a user