@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/three/effects/ParticleField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticleField.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../../src/three/effects/ParticleField.tsx"],"sourcesContent":["/**\n * 粒子场（div）：柔和的光点在区域里缓缓漂移，指针靠近时向四周排开、离开后回到原来的漂移；\n * links 打开时相近的粒子连成星座般的细线，越近越清楚。\n *\n *   <ParticleField links sx={styles.hero}>\n *     <h1>标题</h1>\n *   </ParticleField>\n *\n * 粒子数默认按面积与画质档位决定（连线时更稀疏），尺寸变化时增减；颜色从色板里随机分配，连线用色板的第一个颜色，\n * 都跟随主题原地过渡。背景透明，叠在页面底色或别的效果（MeshGradient）上。\n *\n * 部件：Root（div）、Canvas（ThreeCanvas）、Content（div）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport {\n  BufferAttribute,\n  BufferGeometry,\n  LineSegments,\n  OrthographicCamera,\n  Points,\n  ShaderMaterial,\n} from 'three';\nimport { colors } from '../../config/theme/tokens';\nimport { clamp } from '../../utils/data/number';\nimport { EffectSurface, type EffectProps } from '../core/EffectSurface';\nimport { THEME_PALETTE_SIZE } from '../core/shaders';\n\n/** 粒子场的默认色板：品牌色、紫、青 */\nexport const PARTICLE_PALETTE: readonly string[] = [colors.accent, colors.chart5, colors.chart6];\n\n/** 未声明的属性落到外层 div 上 */\nexport interface ParticleFieldProps extends EffectProps {\n  /** 粒子数；不写时按面积与画质档位决定 */\n  count?: number;\n  /** 色板（token 或 CSS 颜色，最多 6 个）：粒子随机取色，连线用第一个；变了会重建 */\n  palette?: readonly string[];\n  /**\n   * 粒子的直径（CSS 像素，各粒子在它的 0.6–1.4 倍之间）\n   * @default 3\n   */\n  size?: number;\n  /**\n   * 漂移速度\n   * @default 1\n   */\n  speed?: number;\n  /** 相近的粒子连线（星座） */\n  links?: boolean;\n  /**\n   * 连线的最大距离（CSS 像素）\n   * @default 120\n   */\n  linkDistance?: number;\n  /**\n   * 指针靠近时排开粒子\n   * @default true\n   */\n  interactive?: boolean;\n  /**\n   * 排开的范围（CSS 像素）\n   * @default 140\n   */\n  repelRadius?: number;\n}\n\n/** 粒子数上限（不连线 / 连线）：连线的计算量随粒子数增长 */\nconst MAX_PARTICLES = 3000;\nconst MAX_LINKED = 420;\n/** 每个粒子最多画几条线 */\nconst LINKS_PER_PARTICLE = 6;\n\nconst pointsVertex = /* glsl */ `\nuniform vec3 uColors[${THEME_PALETTE_SIZE}];\nuniform float uPixelRatio;\nattribute float aSize;\nattribute float aColor;\nvarying vec3 vColor;\nvoid main() {\n  vColor = uColors[int(aColor)];\n  gl_PointSize = aSize * uPixelRatio;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n`;\n\nconst pointsFragment = /* glsl */ `\nvarying vec3 vColor;\nvoid main() {\n  float d = length(gl_PointCoord - 0.5);\n  gl_FragColor = vec4(vColor, smoothstep(0.5, 0.1, d));\n  #include <colorspace_fragment>\n  #include <premultiplied_alpha_fragment>\n}\n`;\n\nconst linesVertex = /* glsl */ `\nattribute float aAlpha;\nvarying float vAlpha;\nvoid main() {\n  vAlpha = aAlpha;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n`;\n\nconst linesFragment = /* glsl */ `\nuniform vec3 uColor;\nvarying float vAlpha;\nvoid main() {\n  gl_FragColor = vec4(uColor, vAlpha);\n  #include <colorspace_fragment>\n  #include <premultiplied_alpha_fragment>\n}\n`;\n\n/** 透明叠加的着色器材质 */\nfunction overlayMaterial(params: ConstructorParameters<typeof ShaderMaterial>[0]) {\n  return new ShaderMaterial({\n    ...params,\n    transparent: true,\n    premultipliedAlpha: true,\n    depthTest: false,\n    depthWrite: false,\n  });\n}\n\n/** 粒子场：漂移的光点，指针排开，可选星座连线 */\nexport const ParticleField = _component(\n  ({\n    count,\n    palette = PARTICLE_PALETTE,\n    size = 3,\n    speed = 1,\n    links = false,\n    linkDistance = 120,\n    interactive = true,\n    repelRadius = 140,\n    ...rest\n  }: ParticleFieldProps) => {\n    return () => (\n      <EffectSurface\n        {...rest}\n        sceneKey={`${palette.join(',')}|${links}`}\n        setup={({ scene, size: area, quality, pointer, themeColorList }) => {\n          const camera = new OrthographicCamera(0, 1, 1, 0, -1, 1);\n          const max = links ? MAX_LINKED : MAX_PARTICLES;\n          const sources = palette.slice(0, THEME_PALETTE_SIZE);\n          const list = themeColorList(sources, THEME_PALETTE_SIZE);\n\n          // 粒子状态：位置、速度、各自的漂移速度\n          const position = new Float32Array(max * 3);\n          const velocity = new Float32Array(max * 2);\n          const drift = new Float32Array(max * 2);\n          const sizes = new Float32Array(max);\n          const tints = new Float32Array(max);\n          let active = 0;\n          const seed = (index: number) => {\n            position[index * 3] = Math.random() * area.width;\n            position[index * 3 + 1] = Math.random() * area.height;\n            const angle = Math.random() * Math.PI * 2;\n            const pace = 6 + Math.random() * 14;\n            drift[index * 2] = Math.cos(angle) * pace;\n            drift[index * 2 + 1] = Math.sin(angle) * pace;\n            velocity[index * 2] = drift[index * 2]!;\n            velocity[index * 2 + 1] = drift[index * 2 + 1]!;\n            sizes[index] = size * (0.6 + Math.random() * 0.8);\n            tints[index] = Math.floor(Math.random() * sources.length);\n          };\n\n          const geometry = new BufferGeometry();\n          const positionAttribute = new BufferAttribute(position, 3);\n          geometry.setAttribute('position', positionAttribute);\n          geometry.setAttribute('aSize', new BufferAttribute(sizes, 1));\n          geometry.setAttribute('aColor', new BufferAttribute(tints, 1));\n          const pointsUniforms = { uColors: { value: list }, uPixelRatio: { value: 1 } };\n          const points = new Points(\n            geometry,\n            overlayMaterial({\n              vertexShader: pointsVertex,\n              fragmentShader: pointsFragment,\n              uniforms: pointsUniforms,\n            }),\n          );\n          points.frustumCulled = false;\n          scene.add(points);\n\n          const maxSegments = links ? max * LINKS_PER_PARTICLE : 0;\n          const linePositions = new Float32Array(maxSegments * 6);\n          const lineAlphas = new Float32Array(maxSegments * 2);\n          const lineGeometry = new BufferGeometry();\n          const linePositionAttribute = new BufferAttribute(linePositions, 3);\n          const lineAlphaAttribute = new BufferAttribute(lineAlphas, 1);\n          lineGeometry.setAttribute('position', linePositionAttribute);\n          lineGeometry.setAttribute('aAlpha', lineAlphaAttribute);\n          if (links) {\n            const lines = new LineSegments(\n              lineGeometry,\n              overlayMaterial({\n                vertexShader: linesVertex,\n                fragmentShader: linesFragment,\n                uniforms: { uColor: { value: list[0] } },\n              }),\n            );\n            lines.frustumCulled = false;\n            scene.add(lines);\n          }\n\n          // 按连线距离分格，只比较相邻的格子；格子里的粒子串成链表（head 是每格第一个，next 是同格的下一个，-1 结束），\n          // 每帧都要算，不分配新内存\n          const next = new Int32Array(max);\n          let head = new Int32Array(0);\n          function connect() {\n            const cell = linkDistance;\n            const columns = Math.ceil(area.width / cell) + 1;\n            const rows = Math.ceil(area.height / cell) + 1;\n            if (head.length < columns * rows) head = new Int32Array(columns * rows);\n            head.fill(-1, 0, columns * rows);\n            // 漂出边界的粒子归到最近的格子\n            const cellOf = (value: number, count: number) =>\n              clamp(Math.floor(value / cell), 0, count - 1);\n            for (let index = 0; index < active; index++) {\n              const key =\n                cellOf(position[index * 3 + 1]!, rows) * columns +\n                cellOf(position[index * 3]!, columns);\n              next[index] = head[key]!;\n              head[key] = index;\n            }\n            let segments = 0;\n            for (let index = 0; index < active && segments < maxSegments; index++) {\n              const x = position[index * 3]!;\n              const y = position[index * 3 + 1]!;\n              const column = cellOf(x, columns);\n              const row = cellOf(y, rows);\n              let own = 0;\n              for (let dy = -1; dy <= 1; dy++) {\n                for (let dx = -1; dx <= 1; dx++) {\n                  const r = row + dy;\n                  const c = column + dx;\n                  if (r < 0 || r >= rows || c < 0 || c >= columns) continue;\n                  for (let other = head[r * columns + c]!; other !== -1; other = next[other]!) {\n                    if (other <= index || own >= LINKS_PER_PARTICLE || segments >= maxSegments)\n                      continue;\n                    const ox = position[other * 3]!;\n                    const oy = position[other * 3 + 1]!;\n                    const distance = Math.hypot(ox - x, oy - y);\n                    if (distance > linkDistance) continue;\n                    const offset = segments * 6;\n                    linePositions[offset] = x;\n                    linePositions[offset + 1] = y;\n                    linePositions[offset + 3] = ox;\n                    linePositions[offset + 4] = oy;\n                    const alpha = (1 - distance / linkDistance) * 0.45;\n                    lineAlphas[segments * 2] = alpha;\n                    lineAlphas[segments * 2 + 1] = alpha;\n                    segments++;\n                    own++;\n                  }\n                }\n              }\n            }\n            lineGeometry.setDrawRange(0, segments * 2);\n            linePositionAttribute.needsUpdate = true;\n            lineAlphaAttribute.needsUpdate = true;\n          }\n\n          return {\n            resize: (next, context) => {\n              camera.right = next.width;\n              camera.top = next.height;\n              camera.updateProjectionMatrix();\n              context.camera = camera;\n              pointsUniforms.uPixelRatio.value = next.pixelRatio;\n              const perParticle = links ? 9000 : 2600;\n              const wanted =\n                count ?? Math.round(((next.width * next.height) / perParticle) * quality.density);\n              const target = clamp(wanted, 0, max);\n              // 新增的粒子撒在整个区域；已有的粒子落在区域外时重新撒\n              for (let index = 0; index < target; index++) {\n                const outside =\n                  position[index * 3]! > next.width || position[index * 3 + 1]! > next.height;\n                if (index >= active || outside) seed(index);\n              }\n              active = target;\n              geometry.setDrawRange(0, active);\n              positionAttribute.needsUpdate = true;\n              geometry.attributes.aSize!.needsUpdate = true;\n              geometry.attributes.aColor!.needsUpdate = true;\n              if (links) connect();\n            },\n            frame: ({ delta }) => {\n              if (delta === 0) return;\n              const step = delta * speed;\n              const mx = ((pointer.x + 1) / 2) * area.width;\n              const my = ((pointer.y + 1) / 2) * area.height;\n              const push = interactive ? pointer.strength : 0;\n              const margin = size * 2;\n              for (let index = 0; index < active; index++) {\n                let x = position[index * 3]!;\n                let y = position[index * 3 + 1]!;\n                let vx = velocity[index * 2]!;\n                let vy = velocity[index * 2 + 1]!;\n                if (push > 0.01) {\n                  const dx = x - mx;\n                  const dy = y - my;\n                  const distance = Math.hypot(dx, dy) || 1;\n                  if (distance < repelRadius) {\n                    const force = (1 - distance / repelRadius) ** 2 * 1400 * push * delta;\n                    vx += (dx / distance) * force;\n                    vy += (dy / distance) * force;\n                  }\n                }\n                // 排开后慢慢回到自己的漂移速度\n                const settle = Math.min(1, delta * 1.6);\n                vx += (drift[index * 2]! - vx) * settle;\n                vy += (drift[index * 2 + 1]! - vy) * settle;\n                x += vx * step;\n                y += vy * step;\n                // 出了边界从对边回来\n                if (x < -margin) x = area.width + margin;\n                else if (x > area.width + margin) x = -margin;\n                if (y < -margin) y = area.height + margin;\n                else if (y > area.height + margin) y = -margin;\n                position[index * 3] = x;\n                position[index * 3 + 1] = y;\n                velocity[index * 2] = vx;\n                velocity[index * 2 + 1] = vy;\n              }\n              positionAttribute.needsUpdate = true;\n              if (links) connect();\n            },\n          };\n        }}\n      />\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/three/effects/WaveGrid.d.ts

@@ -0,0 +1,37 @@
+import { type EffectProps } from '../core/EffectSurface';
+/** 线框地形的默认色板：低处青、高处品牌色 */
+export declare const WAVE_GRID_PALETTE: readonly string[];
+/** 网格的画法 */
+export interface WaveGridVariants {
+    /** 网格线 */
+    grid: unknown;
+    /** 只画交点 */
+    dots: unknown;
+}
+/** 未声明的属性落到外层 div 上 */
+export interface WaveGridProps extends EffectProps {
+    /**
+     * 画法：网格线或只画交点；变了会重建
+     * @default 'grid'
+     */
+    variant?: keyof WaveGridVariants;
+    /** 色板（token 或 CSS 颜色，2–6 个），按高度取色；变了会重建 */
+    palette?: readonly string[];
+    /**
+     * 起伏的速度
+     * @default 1
+     */
+    speed?: number;
+    /**
+     * 起伏的高度
+     * @default 1
+     */
+    amplitude?: number;
+    /**
+     * 指针所在的位置隆起
+     * @default true
+     */
+    interactive?: boolean;
+}
+/** 线框地形：随噪声起伏的网格，指针处隆起 */
+export declare const WaveGrid: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<WaveGridProps>;

package/dist/three/effects/WaveGrid.js

@@ -0,0 +1,130 @@
+import { colors } from "../../config/theme/tokens.js";
+import { EffectSurface } from "../core/EffectSurface.js";
+import { shaderChunks } from "../core/shaders.js";
+import { createVNode, mergeProps } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { BufferAttribute, BufferGeometry, LineSegments, Points, ShaderMaterial, Vector3 } from "three";
+//#region src/three/effects/WaveGrid.tsx
+/** 线框地形的默认色板：低处青、高处品牌色 */
+var WAVE_GRID_PALETTE = [
+	colors.chart6,
+	colors.accent,
+	colors.chart5
+];
+/** 网格的画法 */
+/** 未声明的属性落到外层 div 上 */
+/** 网格的大小（世界单位）与最高画质下每边的格数 */
+var WIDTH = 16;
+var DEPTH = 12;
+var CELLS = 72;
+var vertexShader = `
+uniform float uTime;
+uniform float uAmplitude;
+uniform vec3 uPointer;
+uniform float uPointSize;
+varying float vHeight;
+varying float vDepth;
+${shaderChunks.simplexNoise}
+${shaderChunks.fbm}
+void main() {
+  vec3 p = position;
+  float wave = fbm(vec3(p.x * 0.18, p.y * 0.22 - uTime * 0.15, uTime * 0.05));
+  float bump = exp(-distance(p.xy, uPointer.xy) * 0.6) * uPointer.z * 1.4;
+  p.z = (wave * 1.6 + bump) * uAmplitude;
+  vHeight = clamp(wave * 0.9 + 0.5 + bump * 0.4, 0.0, 1.0);
+  vec4 view = modelViewMatrix * vec4(p, 1.0);
+  vDepth = -view.z;
+  gl_PointSize = uPointSize * (8.0 / vDepth);
+  gl_Position = projectionMatrix * view;
+}
+`;
+var fragmentShader = `
+varying float vHeight;
+varying float vDepth;
+${shaderChunks.themePalette}
+void main() {
+  float fade = 1.0 - smoothstep(9.0, 17.0, vDepth);
+  gl_FragColor = vec4(themePalette(vHeight), fade * (0.35 + vHeight * 0.65));
+  #include <colorspace_fragment>
+  #include <premultiplied_alpha_fragment>
+}
+`;
+/** 网格的顶点：dots 时是交点，grid 时是横竖两组线段 */
+function gridGeometry(cells, variant) {
+	const columns = Math.round(cells * (WIDTH / DEPTH));
+	const at = (column, row) => [
+		(column / columns - .5) * WIDTH,
+		(row / cells - .5) * DEPTH,
+		0
+	];
+	const vertices = [];
+	for (let row = 0; row <= cells; row++) for (let column = 0; column <= columns; column++) if (variant === "dots") vertices.push(...at(column, row));
+	else {
+		if (column < columns) vertices.push(...at(column, row), ...at(column + 1, row));
+		if (row < cells) vertices.push(...at(column, row), ...at(column, row + 1));
+	}
+	const geometry = new BufferGeometry();
+	geometry.setAttribute("position", new BufferAttribute(new Float32Array(vertices), 3));
+	return geometry;
+}
+/** 线框地形：随噪声起伏的网格，指针处隆起 */
+var WaveGrid = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const variant = readonlyProp(_props, "variant", "grid");
+	const palette = readonlyProp(_props, "palette", () => WAVE_GRID_PALETTE);
+	const speed = readonlyProp(_props, "speed", 1);
+	const amplitude = readonlyProp(_props, "amplitude", 1);
+	const interactive = readonlyProp(_props, "interactive", true);
+	const rest = restProps(_props, _ctx, true);
+	return () => createVNode(EffectSurface, mergeProps(rest, {
+		"sceneKey": `${variant.value}|${palette.value.join(",")}`,
+		"setup": _cache[0] || (_cache[0] = ({ scene, camera, quality, size, pointer, themeColorList }) => {
+			const sources = palette.value.slice(0, 6);
+			const list = themeColorList(sources, 6);
+			const uniforms = {
+				uTime: { value: 0 },
+				uAmplitude: { value: amplitude.value },
+				uPointer: { value: new Vector3() },
+				uPointSize: { value: 2 },
+				uColors: { value: list },
+				uColorCount: { value: Math.max(1, sources.length) }
+			};
+			const material = new ShaderMaterial({
+				vertexShader,
+				fragmentShader,
+				uniforms,
+				transparent: true,
+				premultipliedAlpha: true,
+				depthWrite: false
+			});
+			const geometry = gridGeometry(Math.round(CELLS * quality.density), variant.value);
+			const mesh = variant.value === "dots" ? new Points(geometry, material) : new LineSegments(geometry, material);
+			mesh.rotation.x = -Math.PI * .42;
+			mesh.position.y = -.6;
+			scene.add(mesh);
+			camera.position.set(0, 1.4, 6.5);
+			camera.lookAt(0, -.4, 0);
+			return {
+				frame: ({ time }) => {
+					uniforms.uTime.value = time * speed.value;
+					uniforms.uAmplitude.value = amplitude.value;
+					uniforms.uPointer.value.set(pointer.x * WIDTH * .35, (pointer.y + .3) * DEPTH * .45, interactive.value ? pointer.strength : 0);
+				},
+				resize: (next) => uniforms.uPointSize.value = 2.2 * next.pixelRatio * (size.height / 400 || 1)
+			};
+		})
+	}), null);
+}, {
+	name: "WaveGrid",
+	props: [
+		"variant",
+		"palette",
+		"speed",
+		"amplitude",
+		"interactive"
+	]
+});
+//#endregion
+export { WAVE_GRID_PALETTE, WaveGrid };
+
+//# sourceMappingURL=WaveGrid.js.map

package/dist/three/effects/WaveGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaveGrid.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../../src/three/effects/WaveGrid.tsx"],"sourcesContent":["/**\n * 线框地形（div）：一张向远处延伸的网格随噪声起伏，像缓慢呼吸的山丘；指针所在的位置隆起。\n * 颜色按高度在色板里取（低处第一个颜色、高处最后一个），远处渐隐到透明。\n *\n *   <WaveGrid sx={styles.banner} />\n *   <WaveGrid variant=\"dots\" palette={[colors.chart2, colors.accent]} />\n *\n * 背景透明；细分程度随画质档位变化。\n *\n * 部件：Root（div）、Canvas（ThreeCanvas）、Content（div）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport {\n  BufferAttribute,\n  BufferGeometry,\n  LineSegments,\n  Points,\n  ShaderMaterial,\n  Vector3,\n} from 'three';\nimport { colors } from '../../config/theme/tokens';\nimport { EffectSurface, type EffectProps } from '../core/EffectSurface';\nimport { shaderChunks, THEME_PALETTE_SIZE } from '../core/shaders';\n\n/** 线框地形的默认色板：低处青、高处品牌色 */\nexport const WAVE_GRID_PALETTE: readonly string[] = [colors.chart6, colors.accent, colors.chart5];\n\n/** 网格的画法 */\nexport interface WaveGridVariants {\n  /** 网格线 */\n  grid: unknown;\n  /** 只画交点 */\n  dots: unknown;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface WaveGridProps extends EffectProps {\n  /**\n   * 画法：网格线或只画交点；变了会重建\n   * @default 'grid'\n   */\n  variant?: keyof WaveGridVariants;\n  /** 色板（token 或 CSS 颜色，2–6 个），按高度取色；变了会重建 */\n  palette?: readonly string[];\n  /**\n   * 起伏的速度\n   * @default 1\n   */\n  speed?: number;\n  /**\n   * 起伏的高度\n   * @default 1\n   */\n  amplitude?: number;\n  /**\n   * 指针所在的位置隆起\n   * @default true\n   */\n  interactive?: boolean;\n}\n\n/** 网格的大小（世界单位）与最高画质下每边的格数 */\nconst WIDTH = 16;\nconst DEPTH = 12;\nconst CELLS = 72;\n\nconst vertexShader = /* glsl */ `\nuniform float uTime;\nuniform float uAmplitude;\nuniform vec3 uPointer;\nuniform float uPointSize;\nvarying float vHeight;\nvarying float vDepth;\n${shaderChunks.simplexNoise}\n${shaderChunks.fbm}\nvoid main() {\n  vec3 p = position;\n  float wave = fbm(vec3(p.x * 0.18, p.y * 0.22 - uTime * 0.15, uTime * 0.05));\n  float bump = exp(-distance(p.xy, uPointer.xy) * 0.6) * uPointer.z * 1.4;\n  p.z = (wave * 1.6 + bump) * uAmplitude;\n  vHeight = clamp(wave * 0.9 + 0.5 + bump * 0.4, 0.0, 1.0);\n  vec4 view = modelViewMatrix * vec4(p, 1.0);\n  vDepth = -view.z;\n  gl_PointSize = uPointSize * (8.0 / vDepth);\n  gl_Position = projectionMatrix * view;\n}\n`;\n\nconst fragmentShader = /* glsl */ `\nvarying float vHeight;\nvarying float vDepth;\n${shaderChunks.themePalette}\nvoid main() {\n  float fade = 1.0 - smoothstep(9.0, 17.0, vDepth);\n  gl_FragColor = vec4(themePalette(vHeight), fade * (0.35 + vHeight * 0.65));\n  #include <colorspace_fragment>\n  #include <premultiplied_alpha_fragment>\n}\n`;\n\n/** 网格的顶点：dots 时是交点，grid 时是横竖两组线段 */\nfunction gridGeometry(cells: number, variant: keyof WaveGridVariants) {\n  const columns = Math.round(cells * (WIDTH / DEPTH));\n  const at = (column: number, row: number) => [\n    (column / columns - 0.5) * WIDTH,\n    (row / cells - 0.5) * DEPTH,\n    0,\n  ];\n  const vertices: number[] = [];\n  for (let row = 0; row <= cells; row++) {\n    for (let column = 0; column <= columns; column++) {\n      if (variant === 'dots') vertices.push(...at(column, row));\n      else {\n        if (column < columns) vertices.push(...at(column, row), ...at(column + 1, row));\n        if (row < cells) vertices.push(...at(column, row), ...at(column, row + 1));\n      }\n    }\n  }\n  const geometry = new BufferGeometry();\n  geometry.setAttribute('position', new BufferAttribute(new Float32Array(vertices), 3));\n  return geometry;\n}\n\n/** 线框地形：随噪声起伏的网格，指针处隆起 */\nexport const WaveGrid = _component(\n  ({\n    variant = 'grid',\n    palette = WAVE_GRID_PALETTE,\n    speed = 1,\n    amplitude = 1,\n    interactive = true,\n    ...rest\n  }: WaveGridProps) => {\n    return () => (\n      <EffectSurface\n        {...rest}\n        sceneKey={`${variant}|${palette.join(',')}`}\n        setup={({ scene, camera, quality, size, pointer, themeColorList }) => {\n          const sources = palette.slice(0, THEME_PALETTE_SIZE);\n          const list = themeColorList(sources, THEME_PALETTE_SIZE);\n          const uniforms = {\n            uTime: { value: 0 },\n            uAmplitude: { value: amplitude },\n            uPointer: { value: new Vector3() },\n            uPointSize: { value: 2 },\n            uColors: { value: list },\n            uColorCount: { value: Math.max(1, sources.length) },\n          };\n          const material = new ShaderMaterial({\n            vertexShader,\n            fragmentShader,\n            uniforms,\n            transparent: true,\n            premultipliedAlpha: true,\n            depthWrite: false,\n          });\n          const geometry = gridGeometry(Math.round(CELLS * quality.density), variant);\n          const mesh =\n            variant === 'dots'\n              ? new Points(geometry, material)\n              : new LineSegments(geometry, material);\n          mesh.rotation.x = -Math.PI * 0.42;\n          mesh.position.y = -0.6;\n          scene.add(mesh);\n          camera.position.set(0, 1.4, 6.5);\n          camera.lookAt(0, -0.4, 0);\n          // 指针在网格平面上的落点：近似为按屏幕位置映射到网格的范围\n          return {\n            frame: ({ time }) => {\n              uniforms.uTime.value = time * speed;\n              uniforms.uAmplitude.value = amplitude;\n              uniforms.uPointer.value.set(\n                pointer.x * WIDTH * 0.35,\n                (pointer.y + 0.3) * DEPTH * 0.45,\n                interactive ? pointer.strength : 0,\n              );\n            },\n            resize: (next) =>\n              (uniforms.uPointSize.value = 2.2 * next.pixelRatio * (size.height / 400 || 1)),\n          };\n        }}\n      />\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/three/globe/Globe.d.ts

@@ -0,0 +1,70 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { Vector3 } from 'three';
+import { type EffectProps } from '../core/EffectSurface';
+/** 地图上的一个点：纬度（北正南负）、经度（东正西负），单位度 */
+export interface GeoPoint {
+    /** 纬度：北纬为正，-90 到 90 */
+    lat: number;
+    /** 经度：东经为正，-180 到 180 */
+    lng: number;
+}
+/** 标注的地点 */
+export interface GlobeMarker extends GeoPoint {
+    /** 大小的倍数，默认 1 */
+    size?: number;
+    /** 颜色（token 或 CSS 颜色）；不写时用 markerColor */
+    color?: string;
+}
+/** 两地之间的弧线：[纬度, 经度] */
+export interface GlobeArc {
+    /** 起点 [纬度, 经度] */
+    from: readonly [number, number];
+    /** 终点 [纬度, 经度] */
+    to: readonly [number, number];
+}
+/** 未声明的属性落到外层 div 上 */
+export interface GlobeProps extends EffectProps {
+    /** 标注的地点 */
+    markers?: readonly GlobeMarker[];
+    /** 弧线 */
+    arcs?: readonly GlobeArc[];
+    /**
+     * 一开始正对着的地方
+     * @default { lat: 20, lng: 100 }
+     */
+    center?: GeoPoint;
+    /**
+     * 自转速度（度 / 秒，向东为正）；0 时不自转
+     * @default 6
+     */
+    rotationSpeed?: number;
+    /**
+     * 可以拖动转动
+     * @default true
+     */
+    draggable?: boolean;
+    /**
+     * 陆地的点有多密（1 约一万个点，按画质档位再缩放）
+     * @default 1
+     */
+    density?: number;
+    /** 陆地点的颜色，默认次要文字色 */
+    landColor?: string;
+    /** 标注与弧线的颜色，默认品牌色 */
+    markerColor?: string;
+    /**
+     * 大气光晕
+     * @default true
+     */
+    glow?: boolean;
+}
+/** Globe 的样式：root、draggable、dragging */
+export declare const globeStyles: Readonly<{
+    draggable: css.CompiledStyles;
+    dragging: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** 经纬度 → 球面上的点（半径 radius）：经度 0 朝向 +z（正对相机），北极朝 +y */
+export declare function latLngToVector(lat: number, lng: number, radius?: number, target?: Vector3): Vector3;
+/** 点阵地球 */
+export declare const Globe: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<GlobeProps>;

package/dist/three/globe/Globe.js

@@ -0,0 +1,337 @@
+import { clamp } from "../../utils/data/number.js";
+import { colors } from "../../config/theme/tokens.js";
+import { EffectSurface } from "../core/EffectSurface.js";
+import { createOrbit } from "../core/orbit.js";
+import { LAND_BITS } from "./land.js";
+import { createVNode, mergeProps } from "vue";
+import { _component, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { BufferAttribute, BufferGeometry, Group, LineSegments, Mesh, PerspectiveCamera, PlaneGeometry, Points, ShaderMaterial, Vector3 } from "three";
+//#region src/three/globe/Globe.tsx
+/** 地图上的一个点：纬度（北正南负）、经度（东正西负），单位度 */
+/** 标注的地点 */
+/** 两地之间的弧线：[纬度, 经度] */
+/** 未声明的属性落到外层 div 上 */
+/** Globe 的样式：root、draggable、dragging */
+var globeStyles = css.create({
+	root: {
+		aspectRatio: "1",
+		width: "100%"
+	},
+	draggable: {
+		cursor: "grab",
+		touchAction: "pan-y"
+	},
+	dragging: { cursor: "grabbing" }
+});
+var DEG = Math.PI / 180;
+/** 地球的轮廓占画面短边的比例：外面留给大气光晕 */
+var FIT = .8;
+var FOV = 40;
+/** 经纬度 → 球面上的点（半径 radius）：经度 0 朝向 +z（正对相机），北极朝 +y */
+function latLngToVector(lat, lng, radius = 1, target = new Vector3()) {
+	const phi = lat * DEG;
+	const theta = lng * DEG;
+	return target.set(radius * Math.cos(phi) * Math.sin(theta), radius * Math.sin(phi), radius * Math.cos(phi) * Math.cos(theta));
+}
+/** 陆地位图：某个经纬度是不是陆地 */
+var landBits = (() => {
+	let bytes;
+	return (lat, lng) => {
+		bytes ??= Uint8Array.from(atob(LAND_BITS), (char) => char.charCodeAt(0));
+		const row = clamp(Math.floor(90 - lat), 0, 179);
+		const column = (Math.floor(lng + 180) % 360 + 360) % 360 | 0;
+		const index = row * 360 + column;
+		return (bytes[index >> 3] & 1 << (index & 7)) !== 0;
+	};
+})();
+var dotVertex = `
+uniform float uPixelRatio;
+uniform float uScale;
+attribute float aSize;
+attribute float aPhase;
+varying float vFacing;
+varying float vPhase;
+void main() {
+  vec4 world = modelMatrix * vec4(position, 1.0);
+  vFacing = dot(normalize(world.xyz), normalize(cameraPosition - world.xyz));
+  vPhase = aPhase;
+  vec4 view = viewMatrix * world;
+  gl_PointSize = aSize * uScale * uPixelRatio / -view.z;
+  gl_Position = projectionMatrix * view;
+}
+`;
+var landFragment = `
+uniform vec3 uColor;
+varying float vFacing;
+void main() {
+  float d = length(gl_PointCoord - 0.5);
+  float alpha = smoothstep(0.5, 0.3, d) * smoothstep(-0.05, 0.35, vFacing) * 0.85;
+  gl_FragColor = vec4(uColor, alpha);
+  #include <colorspace_fragment>
+  #include <premultiplied_alpha_fragment>
+}
+`;
+var markerFragment = `
+uniform vec3 uColor;
+uniform float uTime;
+varying float vFacing;
+varying float vPhase;
+void main() {
+  float d = length(gl_PointCoord - 0.5) * 2.0;
+  float core = smoothstep(0.3, 0.2, d);
+  float wave = fract(uTime * 0.6 + vPhase);
+  float ring = smoothstep(0.08, 0.0, abs(d - wave)) * (1.0 - wave);
+  float alpha = max(core, ring * 0.9) * smoothstep(-0.1, 0.25, vFacing);
+  gl_FragColor = vec4(uColor, alpha);
+  #include <colorspace_fragment>
+  #include <premultiplied_alpha_fragment>
+}
+`;
+var arcVertex = `
+attribute float aT;
+attribute float aPhase;
+varying float vT;
+varying float vPhase;
+varying float vFacing;
+void main() {
+  vec4 world = modelMatrix * vec4(position, 1.0);
+  vFacing = dot(normalize(world.xyz), normalize(cameraPosition - world.xyz));
+  vT = aT;
+  vPhase = aPhase;
+  gl_Position = projectionMatrix * viewMatrix * world;
+}
+`;
+var arcFragment = `
+uniform vec3 uColor;
+uniform float uTime;
+varying float vT;
+varying float vPhase;
+varying float vFacing;
+void main() {
+  float head = fract(uTime * 0.35 + vPhase) * 1.4 - 0.2;
+  float glow = exp(-pow((vT - head) * 7.0, 2.0));
+  float alpha = (0.18 + 0.82 * glow) * smoothstep(-0.25, 0.2, vFacing);
+  gl_FragColor = vec4(uColor, alpha);
+  #include <colorspace_fragment>
+  #include <premultiplied_alpha_fragment>
+}
+`;
+var glowVertex = `
+varying vec2 vPosition;
+void main() {
+  vPosition = position.xy;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;
+var glowFragment = `
+uniform vec3 uColor;
+uniform float uEdge;
+uniform float uLimit;
+varying vec2 vPosition;
+void main() {
+  float r = length(vPosition) / uEdge;
+  float inner = smoothstep(0.55, 1.0, r) * 0.22;
+  // 到画布边缘（短边方向在 uLimit 处）之前淡完，不留方形的边
+  float outer = exp(-(r - 1.0) * 9.0) * smoothstep(uLimit, uLimit - 0.12, r);
+  float intensity = r < 1.0 ? inner : outer * 0.75;
+  // 先转色彩空间再乘强度（预乘）：反过来的话，sRGB 会把很淡的颜色提亮，方形的边缘就露出来了
+  gl_FragColor = vec4(uColor, 1.0);
+  #include <colorspace_fragment>
+  gl_FragColor = vec4(gl_FragColor.rgb, 1.0) * intensity;
+}
+`;
+/** 透明叠加的着色器材质 */
+var overlay = (params) => new ShaderMaterial({
+	...params,
+	transparent: true,
+	premultipliedAlpha: true,
+	depthWrite: false
+});
+/** 两地之间的大圆弧，抬离地面（越远抬得越高），采样成 segments 段 */
+function arcPoints({ from, to }, segments) {
+	const a = latLngToVector(from[0], from[1]);
+	const b = latLngToVector(to[0], to[1]);
+	const angle = a.angleTo(b);
+	const lift = .06 + angle * .22;
+	const points = [];
+	for (let i = 0; i <= segments; i++) {
+		const t = i / segments;
+		const point = angle < 1e-6 ? a.clone() : a.clone().multiplyScalar(Math.sin((1 - t) * angle) / Math.sin(angle)).add(b.clone().multiplyScalar(Math.sin(t * angle) / Math.sin(angle)));
+		points.push(point.normalize().multiplyScalar(1 + lift * Math.sin(Math.PI * t)));
+	}
+	return points;
+}
+/** 点阵地球 */
+var Globe = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const markers = readonlyProp(_props, "markers", () => []);
+	const arcs = readonlyProp(_props, "arcs", () => []);
+	const center = readonlyProp(_props, "center", () => ({
+		lat: 20,
+		lng: 100
+	}));
+	const rotationSpeed = readonlyProp(_props, "rotationSpeed", 6);
+	const draggable = readonlyProp(_props, "draggable", true);
+	const density = readonlyProp(_props, "density", 1);
+	const landColor = readonlyProp(_props, "landColor", () => colors.textMuted);
+	const markerColor = readonlyProp(_props, "markerColor", () => colors.accent);
+	const glow = readonlyProp(_props, "glow", true);
+	const rest = restProps(_props, _ctx, true);
+	const start = untrack(() => center.value);
+	const orbit = createOrbit({
+		yaw: -start.lng * DEG,
+		pitch: start.lat * DEG
+	});
+	return () => createVNode(EffectSurface, mergeProps(rest, { "sx": [
+		globeStyles.root,
+		draggable.value && globeStyles.draggable,
+		css.select(() => orbit.dragging && globeStyles.dragging, true),
+		rest.sx
+	] }, draggable.value ? orbit.handlers : {}, {
+		"sceneKey": `${density.value}|${glow.value}|${landColor.value}|${markerColor.value}|${JSON.stringify(markers.value)}|${JSON.stringify(arcs.value)}`,
+		"setup": _cache[0] || (_cache[0] = ({ scene, quality, still, themeColors }) => {
+			const camera = new PerspectiveCamera(FOV, 1, .1, 100);
+			const palette = themeColors({
+				land: landColor.value,
+				marker: markerColor.value
+			});
+			const byColor = /* @__PURE__ */ new Map();
+			for (const marker of markers.value) {
+				const color = marker.color ?? markerColor.value;
+				byColor.set(color, [...byColor.get(color) ?? [], marker]);
+			}
+			const markerTints = themeColors(Object.fromEntries([...byColor.keys()].map((color, index) => [index, color])));
+			const globe = new Group();
+			scene.add(globe);
+			const uniforms = {
+				uPixelRatio: { value: 1 },
+				uScale: { value: 1 },
+				uTime: { value: 0 }
+			};
+			const candidates = Math.round(24e3 * density.value * Math.min(1, quality.density));
+			const land = [];
+			const golden = Math.PI * (3 - Math.sqrt(5));
+			const at = new Vector3();
+			for (let i = 0; i < candidates; i++) {
+				const y = 1 - 2 * (i + .5) / candidates;
+				const lat = Math.asin(y) / DEG;
+				const lng = (i * golden / DEG % 360 + 360) % 360 - 180;
+				if (!landBits(lat, lng)) continue;
+				latLngToVector(lat, lng, 1, at);
+				land.push(at.x, at.y, at.z);
+			}
+			const landGeometry = new BufferGeometry();
+			landGeometry.setAttribute("position", new BufferAttribute(new Float32Array(land), 3));
+			const landCount = land.length / 3;
+			landGeometry.setAttribute("aSize", new BufferAttribute(new Float32Array(landCount).fill(2.2), 1));
+			landGeometry.setAttribute("aPhase", new BufferAttribute(new Float32Array(landCount), 1));
+			globe.add(new Points(landGeometry, overlay({
+				vertexShader: dotVertex,
+				fragmentShader: landFragment,
+				uniforms: {
+					...uniforms,
+					uColor: { value: palette.land }
+				}
+			})));
+			[...byColor.values()].forEach((list, group) => {
+				const positions = new Float32Array(list.length * 3);
+				list.forEach((marker, i) => {
+					latLngToVector(marker.lat, marker.lng, 1.005, at).toArray(positions, i * 3);
+				});
+				const geometry = new BufferGeometry();
+				geometry.setAttribute("position", new BufferAttribute(positions, 3));
+				geometry.setAttribute("aSize", new BufferAttribute(Float32Array.from(list, (marker) => 22 * (marker.size ?? 1)), 1));
+				geometry.setAttribute("aPhase", new BufferAttribute(Float32Array.from(list, (_, i) => i * .37 % 1), 1));
+				globe.add(new Points(geometry, overlay({
+					vertexShader: dotVertex,
+					fragmentShader: markerFragment,
+					uniforms: {
+						...uniforms,
+						uColor: { value: markerTints[group] }
+					}
+				})));
+			});
+			if (arcs.value.length) {
+				const SEGMENTS = 64;
+				const positions = [];
+				const ts = [];
+				const phases = [];
+				arcs.value.forEach((arc, index) => {
+					const points = arcPoints(arc, SEGMENTS);
+					const phase = index * .29 % 1;
+					for (let i = 0; i < SEGMENTS; i++) {
+						positions.push(...points[i].toArray(), ...points[i + 1].toArray());
+						ts.push(i / SEGMENTS, (i + 1) / SEGMENTS);
+						phases.push(phase, phase);
+					}
+				});
+				const geometry = new BufferGeometry();
+				geometry.setAttribute("position", new BufferAttribute(new Float32Array(positions), 3));
+				geometry.setAttribute("aT", new BufferAttribute(new Float32Array(ts), 1));
+				geometry.setAttribute("aPhase", new BufferAttribute(new Float32Array(phases), 1));
+				globe.add(new LineSegments(geometry, overlay({
+					vertexShader: arcVertex,
+					fragmentShader: arcFragment,
+					uniforms: {
+						uColor: { value: palette.marker },
+						uTime: uniforms.uTime
+					}
+				})));
+			}
+			const edge = { value: 1 };
+			if (glow.value) {
+				const atmosphere = new Mesh(new PlaneGeometry(3, 3), overlay({
+					vertexShader: glowVertex,
+					fragmentShader: glowFragment,
+					uniforms: {
+						uColor: { value: palette.marker },
+						uEdge: edge,
+						uLimit: { value: 1 / FIT }
+					}
+				}));
+				atmosphere.renderOrder = -1;
+				scene.add(atmosphere);
+			}
+			const apply = () => globe.rotation.set(orbit.pitch, orbit.yaw, 0, "XYZ");
+			apply();
+			return {
+				resize: (size, context) => {
+					camera.aspect = size.width / Math.max(size.height, 1);
+					const t = FIT * Math.tan(FOV * DEG / 2);
+					const fitHeight = Math.sqrt(1 + 1 / (t * t));
+					camera.position.z = fitHeight * Math.max(1, 1 / camera.aspect);
+					camera.updateProjectionMatrix();
+					context.camera = camera;
+					const d = camera.position.z;
+					edge.value = d / Math.sqrt(d * d - 1);
+					uniforms.uPixelRatio.value = size.pixelRatio;
+					uniforms.uScale.value = camera.position.z * Math.min(size.width, size.height) / 360;
+				},
+				frame: ({ time, delta }) => {
+					uniforms.uTime.value = time;
+					if (still) return;
+					orbit.step(delta, rotationSpeed.value * DEG);
+					apply();
+				}
+			};
+		})
+	}), null);
+}, {
+	name: "Globe",
+	props: [
+		"markers",
+		"arcs",
+		"center",
+		"rotationSpeed",
+		"draggable",
+		"density",
+		"landColor",
+		"markerColor",
+		"glow"
+	]
+});
+//#endregion
+export { Globe, globeStyles, latLngToVector };
+
+//# sourceMappingURL=Globe.js.map