使用 Three.js 实现热力图效果，具体要求：

【核心特效】
- 多点热源叠加
- 颜色渐变映射
- 动态参数控制

【场景与光照】
- 白色环境光
- 透明背景
- 坐标轴辅助

【交互与控制】
- OrbitControls 视角控制
- GUI 参数调节面板

【技术要求】
- Three.js 最新版本
- lil-gui 控制面板

const arr = [
  [0., 0., 10.], [.2, .6, 5.], [.25, .7, 8.],
  [.33, .9, 5.], [.35, .8, 6.], [0.017, 5.311, 6.000],
  [-.45, .8, 4.], [-.2, -.6, 5.], [-.25, -.7, 8.],
  // ... 更多点
].map(i => new THREE.Vector3(...i));

float d = 0.;
for (int i = 0; i < PointsCount; i++) {
    vec3 v = Points[i];
    float intensity = v.z / HEAT_MAX;
    float pd = (1. - length(uv - v.xy) / PointRadius) * intensity;
    d += pow(max(0., pd), 2.);
}

vec3 gradient(float w, vec2 uv) {
    w = pow(clamp(w, 0., 1.) * 3.14159 * .5, .9);
    return vec3(sin(w), sin(w * 2.), cos(w)) * 1.1 + mix(c1, c2, w) * 1.1; 
}

const fragmentShader = 'precision highp float;\n' + 'varying vec2 vUv; \n' +
    Object.keys(uniforms1).map(i => 'uniform ' + uniforms1[i].unit + ' ' + i + ';')
        .join('\n') + '\nuniform vec3 Points[' + uniforms1.PointsCount.value + '];';