MineMap 与 threejs 融合规范。覆盖 ThreeLayer、自定义 three 场景接入、OBJ/FBX/IFC/VTK 等多种数据加载，以及 GeoJSON 驱动的道路/围栏/雷达特效。
MineMap 与 threejs 融合规范。覆盖 ThreeLayer、自定义 three 场景接入、OBJ/FBX/IFC/VTK 等多种数据加载，以及 GeoJSON 驱动的道路/围栏/雷达特效。
npx skills add https://github.com/ming1zhou88/minemap-skills --skill minemap-threejs-integration复制此命令并粘贴到 Claude Code 中以安装该技能
MineMap 二三维叠加规范。覆盖矢量贴地、贴模型、对象接受/拒绝贴合、symbol 自动赋高、以及 raster 深度测试与图层顺序控制。
MineMap 全局配置、key/solution、域名地址、sprite/fonts、minemapCDN 与启动前配置顺序。用于指导用户正确完成地图初始化前的配置，不再把 accessToken 作为主推荐路径。
MineMap 的 Marker 与 Popup 规范。涵盖 DOM 覆盖物、三维高度、distanceDisplayCondition、拖拽、内容 API、地形场景与常见失败场景。
MineMap 模型运行时调试规范。用于爆炸视图、材质/纹理更新、线框显示、属性外挂、运行时查看与距离可见性控制。
MineMap 三维场景组件体系：SceneModel、SceneTileset、SceneObject（Earth/Skybox/AirLine 等），重点补全 glTF/glb 与 3D Tiles 参数边界。
MineMap 样式规范（style v8）、source/layer 管理、图标资源、GeoJSON 更新与数据源组织，重点补全 VectorTileSource 参数与约束。
| 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