扩散圈

Ripple Circle

▶ 在线运行案例

你将学到什么

• Sprite 始终面向相机的 billboard 用法
• 用 scale + opacity 模拟雷达/定位扩散圈
• depthWrite: false 避免透明精灵深度冲突

效果说明

一张圆形 PNG 贴图作为 Sprite，周期性放大并淡出，形成从中心向外扩散的波纹，常见于地图定位、雷达扫描 UI。

核心概念

Sprite vs Mesh

	Sprite	Mesh Plane
朝向	永远面向相机	固定朝向
用途	光点、标注、扩散圈	地面贴花

const material = new THREE.SpriteMaterial({
    map: texture,
    transparent: true,
    depthWrite: false,  // 透明叠加时不写深度
});
const sprite = new THREE.Sprite(material);

脉冲动画逻辑

let circle_n = 0;
function animate() {
    circle_n = circle_n > 10 ? 0 : circle_n + 0.2;
    const scale = 0.1 * circle_n + 0.1;
    sprite.scale.set(scale, scale, scale);
    sprite.material.opacity = Math.max(1 - circle_n * 0.05, 0.2);
}

circle_n 0→10 循环：scale 从小到大，opacity 从 1 到 0.2，然后重置。

小结

• 扩散圈 = Sprite + 循环 scale/opacity，零 shader 实现
• 上一篇：渐变三角形 · 下一篇：材质修改动画

基础案例 · Three.js · 14/35