一键导入
minemap-clouds-and-atmosphere
MineMap 云与大气渲染链。用于启用体积云(多层 CloudLayer)、单片实例化云(map.cloudCollection)、大气散射与太阳 / 天空辐照度,重点说明主分支公开参数与禁用字段。
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
MineMap 云与大气渲染链。用于启用体积云(多层 CloudLayer)、单片实例化云(map.cloudCollection)、大气散射与太阳 / 天空辐照度,重点说明主分支公开参数与禁用字段。
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | minemap-clouds-and-atmosphere |
| description | MineMap 云与大气渲染链。用于启用体积云(多层 CloudLayer)、单片实例化云(map.cloudCollection)、大气散射与太阳 / 天空辐照度,重点说明主分支公开参数与禁用字段。 |
MineMap 主分支公开的云与大气能力有两条独立路径,业务上不要混用概念:
map.enableClouds() / map.disableClouds() / map.getClouds()CloudLayermap.cloudCollection.add({ ... })这两条路径是引擎里早就存在的成熟能力,并非 4.25 专属新增,但 4.25 仍是主分支当前推荐使用方式。
var style = {
glyphs: "minemap://fonts/{fontstack}/{range}",
sprite: "minemap://sprite/sprite",
sources: {},
layers: [],
version: 8
};
var map = new minemap.Map({
container: "map",
style,
position: [116.038, 40.105, 2944],
pitch: 80.96,
bearing: -27.36,
projection: "MERCATOR"
});
map.enableLight();
map.enableClouds();
map.repaint = true;
map.setTerrain({
tiles: ["https://.../dem/{z}/{r}/{c}/{z}_{x}_{y}.terrain"],
availabilities: ["https://.../dem/layer.json"],
tileSize: 512,
maxzoom: 14
});
map.on("load", function () {
map.addSource("IMAGERY", {
type: "raster",
tiles: ["https://.../satellite/{z}/{x}/{y}"],
tileSize: 512
});
map.addLayer({
id: "IMAGERY",
type: "raster",
source: "IMAGERY",
minzoom: 0,
maxzoom: 23
});
const clouds = map.getClouds();
clouds.coverage = 0.3;
clouds.localWeatherVelocity = [0.005, 0]; // 飘动;设成 [0, 0] 关闭动画
});
对应 demo:demo/html/CloudCollection.html
const clouds = [];
for (let i = 0; i < 20; i++) {
clouds[i] = map.cloudCollection.add({
position: minemap.Math.Vector3.fromDegrees(
115.9733 + 0.1 * (Math.random() * 2 - 1),
40.20299 + 0.1 * (Math.random() * 2 - 1),
1300
),
scale: new minemap.Math.Vector2(3000 + 1000 * Math.random(), 500 + 100 * Math.random()),
maximumSize: new minemap.Math.Vector3(50, 15, 13),
slice: Math.max(Math.min(Math.random(), 0.7), 0.2) // 0.2 ~ 0.7
});
}
// 整体显隐
map.cloudCollection.show = false;
// 删除全部
map.cloudCollection.removeAll();
Map 实例的 enableClouds() / disableClouds() / getClouds()getClouds() 返回的是 CloudsEffect 对象,包含全部可调参数enableLight 互相独立但通常一起开;不开启光照时云会失去明暗对比setTerrain 提供可投阴影的地形,否则云层与地面无视觉交互map.cloudCollection(CloudCollection 实例)add(options) 返回一个 CumulusCloud 实例,支持逐个控制位置 / 缩放 / 切片 / 颜色 / 亮度CloudsEffect 公开参数| 参数 | 说明 |
|---|---|
coverage | 云层覆盖度(0..1),值越大覆盖场景越大 |
localWeatherVelocity | 云的飘动速度 [u, v];设成 [0, 0] 关闭动画 |
temporalUpscale | 时间上采样;开启可提升性能,但当前阶段噪点和透明度过滤较粗 |
shapeDetail | 启用形状细节纹理(更细腻 / 更贵) |
turbulence | 启用湍流纹理(更真实的云底起伏 / 更贵) |
scatteringCoefficient | 散射系数;越大明暗对比越强 |
absorptionCoefficient | 吸收系数;越大越暗 |
scatterAnisotropy1 | 双叶 HG 相位函数第一项 |
scatterAnisotropy2 | 双叶 HG 相位函数第二项 |
scatterAnisotropyMix | 两个相位函数的混合比例 |
skyIrradianceScale | 天空辐照度缩放 |
powderScale | Beer-Powder 效果强度 |
powderExponent | Beer-Powder 曲线斜率 |
cloudLayers | 云层集合(默认 4 层),可通过索引 clouds.cloudLayers[i] 访问 |
lightShafts | 阴影长度 / 光投射相关;主分支默认 false(源码注释:"先关掉") |
每层独立可调:
| 参数 | 说明 |
|---|---|
altitude | 海拔高度(米) |
height | 厚度(米);设为 0 即可关闭该层 |
densityScale | 密度缩放;设为 0 等价于关闭 |
shapeAmount | 形状纹理影响系数 |
shapeDetailAmount | 形状细节纹理影响系数 |
weatherExponent | 天气图渐变锐度 |
shapeAlteringBias | 云形状垂直偏移(1 对称,0 底部完全偏移) |
coverageFilterWidth | 天气信号影响形状改变密度的过渡宽度 |
densityProfile | 密度随高度的分布(expTerm / exponent / linearTerm / constantTerm) |
clouds.cloudsPass.currentMaterial)multiScatteringOctaves、accurateSunSkyIrradiance、accuratePhaseFunction、maxIterationCount、minStepSize / maxStepSize、maxRayDistance、perspectiveStepScale、minDensity / minExtinction / minTransmittance、maxIterationCountToSun 等。
这些都属于材质层高级参数,主分支 demo 的 Clouds.html 已经把它们放进 GUI 调试面板,对照参考即可。
lightShafts主分支源码里 lightShafts 字段确实存在,但:
falseClouds.html 没有把它放进调试 GUI所以在主分支上,不要把 lightShafts 当成稳定的可调效果。它和"阴影长度""雾霭""丁达尔 / 太阳光柱"等扩展效果目前在主分支上都没有公开推荐路径。
CloudCollection 公开 APIconst cloud = map.cloudCollection.add({
position, // Vector3,单体云的位置
scale, // Vector2,X 宽度 / Y 高度(米)
maximumSize, // Vector3,云朵最大尺寸(决定形状)
slice, // number,0..1,控制沿 z 方向的横截面位置
color, // Color
brightness, // number,默认 1
show // boolean,默认 true
});
CumulusCloud 实例属性(可读可写):
cloud.position / cloud.scale / cloud.maximumSize / cloud.slice / cloud.color / cloud.brightness / cloud.showCloudCollection 实例方法:
add(options):新增单体云remove(cloud):移除指定云removeAll():移除全部contains(cloud):判断是否属于该集合get(index):按索引获取map.cloudCollection.show:整集合显隐map.setSunLightTime({ year, month, day, hours, minutes, seconds })map.setSunLightTimestamp(date.getTime())enableLight 和 setSunLightTime 放在 load 之后立即执行,避免首帧黑天对应 demo:demo/html/Clouds.html
map.enableLight();
map.enableClouds();
map.setTerrain({...});
map.on("load", () => {
const clouds = map.getClouds();
clouds.coverage = 0.3;
clouds.localWeatherVelocity = [0.005, 0];
});
const clouds = map.getClouds();
// 把第 1 层关掉
clouds.cloudLayers[1].height = 0;
clouds.cloudLayers[1].densityScale = 0;
// 把第 2 层做成"卷云"
clouds.cloudLayers[2].altitude = 7500;
clouds.cloudLayers[2].height = 500;
clouds.cloudLayers[2].densityScale = 0.003;
clouds.cloudLayers[2].shapeAmount = 0.4;
clouds.cloudLayers[2].shapeDetailAmount = 0;
对应 demo:demo/html/CloudCollection.html
const cloud = map.cloudCollection.add({
position: minemap.Math.Vector3.fromDegrees(116.0, 40.1, 1300),
scale: new minemap.Math.Vector2(3000, 500),
maximumSize: new minemap.Math.Vector3(50, 15, 13),
slice: 0.4,
brightness: 1.0
});
demo 通过 requestAnimationFrame + eastNorthUpToFixedFrame 计算当前位置的 East 单位向量,然后按时间步长平移 cloud.position,从而实现"东西向飘动"效果。
function stepCloudAnimation(timestamp) {
const dtSec = (timestamp - lastTime) / 1000;
const d = SPEED * dtSec;
for (const cloud of clouds) {
const east = getEastUnitVectorAtCartesian(cloud.position);
cloud.position = new minemap.Math.Vector3(
cloud.position.x + east.x * d,
cloud.position.y + east.y * d,
cloud.position.z + east.z * d
);
}
requestAnimationFrame(stepCloudAnimation);
}
业务上可以参考这个写法做自定义动画。
不要混用:
getClouds() 拿参数map.cloudCollection.add() 增加实例enableLight只 enableClouds() 不 enableLight(),云会失去明暗对比,呈现"灰团"。
业务上想隐藏云,推荐用 clouds.coverage = 0 或把所有层 densityScale = 0 / height = 0,而不是 disableClouds(),后者会拆掉整个 pass,重新打开有重建成本。
clouds.localWeatherVelocity = [0, 0];
不要用 demo 里没公开过的 enableAnimate 之类私有变量。
lightShafts 默认关闭主分支默认 false,不对应"丁达尔 / 太阳光柱 / crepuscular rays"等用户可见效果。把 lightShafts 视作内部调试字段,而不是业务上的可调功能。
slice 范围demo 推荐 0.2 ~ 0.7。低于 0.2 横截面过小会露出椭球体边缘;高于 0.7 云团会显得过小。
position 高度position.z(或 Vector3.fromDegrees 的第三参数)是海拔高度(米)。要云停留在地表附近就用几十到几百米;要做"高空云"就放到几千米。
enableLight / setSunLightTimemultiScatteringOctaves / maxIterationCount,关闭 turbulence / shapeDetailslice 是否在 0.2~0.7 区间、position.z 高度是否合理、map.cloudCollection.show 是否为 truemaximumSize 设得过小,或 slice 越界setTerrain 加载地形demo/html/Clouds.html:体积云 + 大气散射 + 调试 GUI(覆盖度 / 时间 / 形状细节 / 散射 / 多重散射 / 步长 / 早退阈值 / 多云层参数等)demo/html/CloudCollection.html:局部单体实例化云(随机生成 20 朵 + 显隐 + 东西向飘动 + 全部删除)minemap-scene-componentsminemap-lighting-and-shadowsminemap-terrain-and-analysisMineMap 3D 公告板(Billboard)专题。覆盖 BillboardMaterial / BillboardGeometry / BillboardInstance 动画、拾取高亮、动态纹理更新与轨迹对象联动;不与 DOM 覆盖物 Marker 混淆。
MineMap 事件订阅模型、图层事件代理、once/off 管理、矢量与三维对象拾取。
MineMap 热力图(heatmap)专题。用于二维 / 三维热力图、贴地热力、聚合权重、热力色阶与 3D 显示模式,重点说明 paint/layout 参数边界与典型失败场景。
MineMap KML 数据源。用于加载 KML / KMZ 文件,解析 LineStyle / IconStyle / LabelStyle / PolyStyle 等样式继承,并把 KML 属性映射为 line / circle / fill / symbol 派生图层。
MineMap 材质与着色规范。覆盖 `StandardMaterial`、`PhongMaterial`、`PhysicalMaterial`、`LambertMaterial`、`PolylineMaterial` 等主流材质的选型与调参。
MineMap 渲染后端(auto/webgpu/webgl2/webgl1)选择、降级策略、特效开关与性能调优。