使用three.js或p5.js在地图mapbox G1上添加3d(2d)对象
使用three.js或p5.js在地图mapbox G1上添加3d(2d)对象
提问于 2018-02-08 00:39:52
据我所知，我必须为mapbox G1和p5使用一个画布。但如何做到这一点呢？如果我有p5动画，它会用地图覆盖画布吗？有什么例子或提示吗？谢谢。我的代码，但没什么大不了的
mapboxgl.accessToken = 'pk.***';
var mapGL = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [-120.36603539685188, 50.68667605749022],
zoom: 11.6
});
var mainCanvas;
function setup() {
mainCanvas = createCanvas(720, 400, WEBGL);
}
function draw() {
background(102);
rotate(frameCount / 100.0);
rect(30, 20, 25, 25);
}回答 2
Stack Overflow用户
发布于 2018-02-08 01:39:55
在同一个画布上，不同的绘图库通常不能很好地配合。您可以尝试在mapbox画布上覆盖P5.js画布。
更好的是，使用已经与P5.js兼容的地图库，比如Mappa或p5.tiledmap。这允许您在P5.js中绘制地图，这使得在其上绘制地图变得更加容易。
Stack Overflow用户
发布于 2020-07-10 00:56:26
这是一个非常古老的问题，但对于那些重新考虑这个问题寻找选择的人来说……现在，这可以通过最新版本的threebox和几行代码轻松完成。结果如下所示：
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoianNjYXN0cm8iLCJhIjoiY2s2YzB6Z25kMDVhejNrbXNpcmtjNGtpbiJ9.28ynPf1Y5Q8EyB_moOHylw';
var origin = [2.294514, 48.857475];
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/satellite-v9',
center: origin,
zoom: 18,
pitch: 60,
bearing: 0
});
map.on('style.load', function () {
map
.addLayer({
id: 'custom_layer',
type: 'custom',
renderingMode: '3d',
onAdd: function (map, mbxContext) {
window.tb = new Threebox(
map,
mbxContext,
{
defaultLights: true,
}
);
// import tower from an external glb file, downscaling it to real size
// IMPORTANT: .glb is not a standard MIME TYPE, you'll have to add it to your web server config,
// otherwise you'll receive a 404 error
var options = {
obj: '/3D/eiffel/eiffel.glb',
type: 'gltf',
scale: 0.01029,
units: 'meters',
rotation: { x: 0, y: 0, z: 0 }, //default rotation
adjustment: { x: -0.5, y: -0.5, z: 0 } // place the center in one corner for perfect positioning and rotation
}
tb.loadObj(options, function (model) {
model.setCoords(origin); //position
model.setRotation({ x: 0, y: 0, z: 45.7 }); //rotate it
tb.add(model);
})
},
render: function (gl, matrix) {
tb.update();
}
});
})
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48668948
复制相关文章
相似问题
腾讯云开发者
