Threebox实现在mapbox上添加threejs内容

mapbox-gl-V50版本开始用户可以添加自己的WebGL代码呈现到自定义的图层。在GitHub上的功能改进中如图1显示。

图1 代码的更新

所以我们就能在mapbox图层中添加自己需要的webGL图层了。

那么如何添加呢？我们先来看一下APIMapbox GL JS API。其中说明了我们可以通过Map#addLayer来添加我们需要的图层。而且必须使用render方法。看到render我们应该很清楚想到webGL中的渲染方法，mapbox中我们需要两个参数分别是gl（地图的gl上下文）以及matrix（地图的相机矩阵）。同时我们还要初始化和添加我们的WebGL图层通过onAdd方法需要的参数为map（添加的自定义图层的地图）和gl（地图的上下文）。同时指定其图层的id和他的类型，注意此类型必须为“custom”才可以使用。如图2.

图2 添加图层

那么如何添加我们的threejs对象呢？这里就要用到我们的threeboxjs了。目前threeboxjs网上的教程很少，初学的只能从其例子中学习，这里给出我使用threeboxjs版本的GitHub下载地址。GitHub - peterqliu/threebox: A three.js plugin for Mapbox GL JS, with support for basic animation and advanced 3D rendering.以后的版本可能有较大改动，以当时的版本为主。此版本给我的感觉是与threejs混合起来的感觉。我们只要初始化threebox然后添加我们的threejs代码就行了。首先我们初始化我们的threeboxjs。

window.threebox = new Threebox(map, mbxContext);//初始化

我截一段初始化的源码大家就能知道与threejs的联系了。

图3 初始化

是不是特别亲切？然后我们需要添加场景的系统光源，让obj呈现在地图中的光照效果。

threebox.setupDefaultLights();//设置系统光

之后直接添加我们的threejs对象，这里的代码需要理解的可以看我的threejs的发光半球的博客。

图4 设置对象

接着把创建好的obj添加到threebox场景中

threebox.addAtCoordinate(cube1.clone(), origin);

第一个参数是添加的obj对象，第二个参数为添加在地图上的坐标（经度、纬度、高度）之后我们添加动画

图5 设置动画

最后在更新时添加跟新threebox的代码。

threebox.update();

这是他更新的源码的大致流程

图6 更新流程

最后效果

图7 最后效果