mars3d中bookmark视⻆书签，⽣成包含threejs加载模型的图⽚_mars3d threejs

作者：我家小花儿 | 2024-06-08 00:03:42

踩

mars3d threejs

问题 :

expImage示例⽣成书签视⻆图⽚时：

1.如果地图中有threejs加载的模型，⽣成视⻆书签后，⽣成的图⽚中没有模型

效果图如下：

期望效果 :

地图上three加载模型时，⽣成视⻆书签时，视⻆图⽚中也有模型显示

解决⽅式 :

参考这个示例，将threejs对应的canves导出png图⽚后合并下。

http://mars3d.cn/editor.html?id=map/fun/expImage

// 合并2张图片

function mergeImage(base1, base2, width, height) {

return new Promise((resolve, reject) => {

const canvas = document.createElement("canvas")

canvas.width = width

canvas.height = height

const ctx = canvas.getContext("2d")

const image = new Image() // MAP图片

image.crossOrigin = "Anonymous" // 支持跨域图片

image.onload = () => {

ctx.drawImage(image, 0, 0, width, height)

const image2 = new Image() // div图片

image2.crossOrigin = "Anonymous" // 支持跨域图片

image2.onload = () => {

ctx.drawImage(image2, 0, 0, width, height)

// 合并后的图片

const base64 = canvas.toDataURL("image/png")

resolve(base64)

}

image2.src = base2

}

image.src = base1

})

}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/687600