القائمة
MineMap 与 threejs 融合规范。覆盖 ThreeLayer、自定义 three 场景接入、OBJ/FBX/IFC/VTK 等多种数据加载，以及 GeoJSON 驱动的道路/围栏/雷达特效。
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/ming1zhou88/minemap-skills --skill minemap-threejs-integrationيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
MineMap 3D 公告板（Billboard）专题。覆盖 BillboardMaterial / BillboardGeometry / BillboardInstance 动画、拾取高亮、动态纹理更新与轨迹对象联动；不与 DOM 覆盖物 Marker 混淆。
MineMap 云与大气渲染链。用于启用体积云（多层 CloudLayer）、单片实例化云（map.cloudCollection）、大气散射与太阳 / 天空辐照度，重点说明主分支公开参数与禁用字段。
MineMap 事件订阅模型、图层事件代理、once/off 管理、矢量与三维对象拾取。
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | minemap-threejs-integration |
| description | MineMap 与 threejs 融合规范。覆盖 ThreeLayer、自定义 three 场景接入、OBJ/FBX/IFC/VTK 等多种数据加载，以及 GeoJSON 驱动的道路/围栏/雷达特效。 |
import * as THREE from "three";
import { ThreeLayer } from "../js/minemap-three-plugin/index.js";
map.on("load", () => {
map.addSource("imagery", {
type: "raster",
tiles: ["https://example.com/satellite/{z}/{r}/{c}/{z}_{x}_{y}.jpg"],
tileSize: 512
});
map.addLayer({
id: "imagery",
type: "raster",
source: "imagery",
"depth-test": true
});
const threeLayer = new ThreeLayer({
id: "three-scene",
refCenter: [120.301663, 28.576329]
});
map.addLayer(threeLayer);
const mesh = new THREE.Mesh(new THREE.BoxGeometry(20, 20, 20), new THREE.MeshStandardMaterial({ color: 0x00aaff }));
mesh.position.set(0, 0, 10);
threeLayer.addObject(mesh);
});
threejs 插件当前来自：
demo/js/minemap-three-plugin/index.jsdemo/js/minemap-three-plugin/index.d.ts它的定位要和 SceneModel / SceneTileset 分清：
SceneModel / SceneTileset 属于 MineMap 原生三维对象体系ThreeLayer 属于自定义渲染层，把 threejs 场景挂到 MineMap 地图渲染管线里因此推荐理解是：
addSceneComponent()ThreeLayer从 index.js 和 index.d.ts 可确认：
ThreeLayer.type = 'custom'ThreeLayer.renderingMode = '3d'map.addLayer(threeLayer) 挂到地图里也就是说它本质上是：
Scene、PerspectiveCamera、WebGLRenderer源码里 onAdd(map, gl) 会直接检查：
gl instanceof WebGL2RenderingContext如果不是 WebGL2：
console.warn所以文档里必须明确写：
refCenter 为基准做转换ThreeLayer 的最关键参数是：
refCenter作用：
对外可用方法：
getRefCenter()setRefCenter(center)toScenePosition(position, altitude?)这决定了 threejs 融合的基本工作流：
refCenter 的局部场景系里ThreeLayer 已确认入口new ThreeLayer(options)addObject(object)removeObject(object)getScene()getSceneRoot()getCamera()getRenderer()getWebGLRenderer()getMap()findObjectByName(name, root?)toScenePosition(...)ThreeLayer 参数从 index.d.ts 当前可确认：
idslot?refCenter?envTexture?envIntensity?createLight?当前 shipped demo 里最稳定、最明确使用的是：
idrefCentercreateLight 在实现里也有明确使用；默认会创建基础光。
对 envTexture / envIntensity：
最近与当前仓库已确认的 threejs 融合 demo 包括：
demo/html/Threejs-Box.htmldemo/html/Threejs-OBJ.htmldemo/html/Threejs-FBX.htmldemo/html/Threejs-FBX-New.htmldemo/html/Threejs-IFC.htmldemo/html/Threejs-VTK.htmldemo/html/Threejs-RoadEffect.html这说明 threejs 融合路径当前至少覆盖 3 类对象来源。
Threejs-Box.html 证明：
THREE.Mesh(...)positionthreeLayer.addObject(mesh)就可以进入 MineMap 场景。
这是最基础、最稳的融合路径。
当前 demo 已明确展示：
OBJ + MTLFBXIFCVTK这条能力非常关键，因为它说明 threejs 融合不是只会画程序化几何，而是真的能接更多外部格式。
对应 demo：
demo/html/Threejs-OBJ.html特点：
MTLLoader 先加载材质OBJLoader 再加载模型对应 demo：
demo/html/Threejs-FBX.htmldemo/html/Threejs-FBX-New.html特点：
FBXLoader 加载外部 FBX对应 demo：
demo/html/Threejs-IFC.html特点：
web-ifc + web-ifc-threeIFCLoader 加载 IFCIFCSPACE 等可选类别这条路径说明：
对应 demo：
demo/html/Threejs-VTK.html特点：
VTKLoader 加载科学可视化 / 医工类常见几何对应 demo：
demo/html/Threejs-RoadEffect.html这个 demo 很值得单独强调，因为它不是“再加载一个外部模型”，而是：
它证明的不是“支持某一种文件格式”，而是：
从 index.d.ts 当前能确认，插件公开了 3 个程序化 mesh 工厂：
createFenceMesh(...)createTubeMesh(...)createCircleMesh(...)createFenceMesh适用：
关键参数：
layercoordinatesmaterialcoloropacitynumspeedheightcreateTubeMesh适用：
关键参数：
layercoordinates: Position[][]materialspeedtubeRadius?tubularSegments?radialSegments?radius这里非常重要的一点是：
coordinates 支持多条线Threejs-RoadEffect.html 能把多份 road GeoJSON 组织进一张 three layer 的原因createCircleMesh适用：
已确认材质预设：
ripplespreadradar关键参数：
layercoordinatesmaterialcoloropacityradiussegmentsnumspeedfollowWidth推荐组织：
map.addSource(...) / map.addLayer(...) 先铺影像或底图map.addLayer(new ThreeLayer(...))ThreeLayer 里加这条路径在现有 demo 里非常一致。
如果对象本身不是直接放在 refCenter 附近局部坐标里，优先用：
threeLayer.toScenePosition(lnglat, altitude?)不要自己手写一套经纬度转 three world 的逻辑。
推荐职责分工：
ThreeLayer：桥接渲染和坐标转换如果需求是：
优先思路不是把 GeoJSON 直接塞 style layer 里硬做，而是：
createTubeMesh/createFenceMesh/createCircleMesh 作为可视化输出这意味着你不能期待它天然拥有：
feature-state不要默认把它当成 WebGL1 兼容能力写进公开文档。
SceneModel / SceneTileset如果你加载的是：
除非你确实需要 three 专属能力，否则仍优先用 MineMap 原生三维对象体系。
这条边界要写清：
ThreeLayer 当作普通 MineMap 图层来写它是 custom layer，不是 style layer。
没处理 refCenter 和坐标转换时，位置会完全错位。
这样会丢掉很多 MineMap 原生数据组织、查询和交互优势。
map.repaint = true，却期待 three 动画持续更新当前示例基本都显式开了：
map.repaint = true对于流动材质、雷达圈、tube 动效，这通常是必要前提。
demo/html/Threejs-Box.htmldemo/html/Threejs-OBJ.htmldemo/html/Threejs-FBX.htmldemo/html/Threejs-FBX-New.htmldemo/html/Threejs-IFC.htmldemo/html/Threejs-VTK.htmldemo/html/Threejs-RoadEffect.htmldemo/js/minemap-three-plugin/index.jsdemo/js/minemap-three-plugin/index.d.tsminemap-fundamentalsminemap-style-and-dataminemap-2d-3d-overlay-and-classificationminemap-scene-componentsminemap-primitives-and-materialsminemap-plugin-demo-editor