Noah277的博客

threebox加载三维模型浏览器全屏以后模型偏移问题

打印查看indexArray数组，发现原因是使用turf.js的tesselate构造的三角形不太正确，tesselate构造的三角形index数组为：[5, 0, 1, 2, 3, 4, 4, 5, 1, 1, 2, 4]，但是正确的应该是[0,1,2,0,2,5,2,3,5,3,4,5]之类的，错误地构建了4,5,1和1,2,4两个三角形。构建了一个类似的形状放到指定位置，如下图所示，发现还是构建的三角形有问题，同使用turf.js的tesselate构造的三角形。

需求：mapbox基于geojson数据生成的二维面虽然可以通过fill-pattern属性去使用图片填充，但是效果并不好（放大缩小时贴图会重新渲染），因此想使用threebox基于geojson数据生成二维面叠加到mapbox地图上，并使用纹理贴图。这样子虽然实现了效果，加载效果如下图，但是由于geojson数据较大加载太慢了（猜测还是因为构建的是三维的extrusion），响应时间在十几秒甚至几十秒，于是放弃了这种做法。将depth设为0发现确实可以实现纯色填充，然后替换纹理材质。