ThreejsLayer
构造函数
创建 three.js 图层。需全局
THREE已加载参数 类型 说明 options可选ThreejsLayerOptions配置项 属性 类型 说明 afterRenderFunction每帧绘制后回调 alphaboolean传给 THREE.WebGLRenderer 的 alpha animationboolean是否每帧自动重绘。three 场景大多需要动画；不需要就别开 —— 地图渲染线程本来会睡 antialiasboolean传给 THREE.WebGLRenderer 的 antialias。注意上下文是与底图共用的， 这个值只在 three 侧生效，实际是否多重采样由地图创建上下文时决定 maxZoomnumber最大显示缩放等级 minZoomnumber最小显示缩放等级 onDestroyFunction图层销毁时回调，此时 renderer / scene 还没释放 onErrorFunction渲染器创建失败或渲染抛错时回调 onInitFunctionrenderer / scene / camera 就绪时回调 onRenderFunction每帧绘制回调。不提供时图层会自动执行 renderer.render(scene, camera)； 提供了就完全由你决定画什么，框架不再自动渲染 opacitynumber透明度。本图层不消费这个值 —— three 的材质透明度请在材质上设 （material.transparent / material.opacity） preRenderFunction每帧绘制前回调 referCenterPoint图层参考中心点，决定 three 场景原点对应的地理位置。强烈建议传 —— 顶点是 float32，绝对墨卡托坐标量级 1e7 会丢精度 renderStage"building" | "poi"绘制阶段，图层绘制在该阶段之后（即叠在其上）。 不设表示默认落点：覆盖物之后、3D 楼块之前 visibleboolean是否显示 zIndexnumber显示层级，小的先画 返回值 ThreejsLayer
示例代码1
const center = new BMap.Point(116.404, 39.915);
const layer = new BMap.ThreejsLayer({
referCenter: center,
animation: true,
onInit(ctx) {
const size = 1500;
const mesh = new THREE.Mesh(
new THREE.BoxGeometry(size, size, size),
new THREE.MeshBasicMaterial({color: 0x00ffcc})
);
const xy = ctx.projectToLayer([center.lng, center.lat]);
mesh.position.set(xy[0], xy[1], size / 2);
ctx.scene.add(mesh);
}
});
map.addLayer(layer);
动画
返回值 boolean
返回值 ThreejsLayer
返回值 ThreejsLayer
返回值 void
坐标换算
经纬度 → 图层局部坐标（three 场景里的 x / y）
参数 类型 说明 lngLat[number, number]返回值 [number, number]
- projectToLayer(lngLat: [number, number][]): [number, number][]
经纬度 → 图层局部坐标（three 场景里的 x / y）
参数 类型 说明 lngLat[number, number][]返回值 [number, number][]
接入与移除
参数 类型 说明 mapMap返回值 ThreejsLayer
返回值 Map
返回值 ThreejsLayer
three.js 接入图层，用于在地图的 WebGL 上下文中以 three.js 的场景图绘制 3D 内容。
使用方自行引入全局
THREE，支持的最高版本是 r162。 r163 及以上版本的WebGLRenderer会在创建时直接抛错，此时图层走onError、getStatus()变为'error'，底图不受影响。坐标
three 场景与 WebGLCustomLayer 使用同一套坐标：图层局部坐标，即相对
referCenter的百度墨卡托米。z 轴朝上，z = 0 是地面。 把物体立在地面上需要mesh.position.z = height / 2（BoxGeometry 原点在中心）。用
projectToLayer([lng, lat])换算经纬度到场景 x / y， 或回调里用ctx.projectToLayer()。相机
投影矩阵每帧由地图相机驱动，开发者无需手动同步。 代价：
modelViewMatrix不是眼空间矩阵，依赖它的 three 内置光照 （Lambert / Phong / Standard 的normalMatrix）会不正确。 需要光照的场景请在onRender(ctx)里自己接管相机矩阵。