Babylonjs 使用 DynamicTexture 渲染HTML

哈哈哈嗝哈哈哈

已于 2023-06-08 17:42:06 修改

阅读量926

点赞数

分类专栏： Babylonjs 文章标签： html javascript 前端 Babylonjs

于 2023-06-08 17:35:34 首次发布

本文链接：https://blog.csdn.net/weixin_43387812/article/details/131112476

版权

Babylonjs 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

Babylonjs文档
使用 html2canvas 将 html 转换成 canvas,将 canvas更新到 DynamicTexture 中；

//伪代码
		let div = document.createElement("div");
            div.id = "124578"
            div.style.width = "100px";
            div.style.height = "100px"
            div.style.background = "green"
            div.innerText = "啊阿达";
            div.style.color = "red";
            div.style.position = "fixed"
            div.style.top = "100px"
            document.body.appendChild(div)
         
            html2canvas(div, { width: 100, height: 100}).then(canvas => {
                const disc = MeshBuilder.CreatePlane("plane", { width: 100,height:100, sideOrientation: Mesh.DOUBLESIDE }, this.scene);
                const myDynamicTexture = new DynamicTexture("dynamic", { width: 100, height: 100 }, scene);
                const ctx = myDynamicTexture.getContext();
                let getCtx = canvas.getContext('2d');
                ctx.putImageData(getCtx.getImageData(0, 0, 100, 100), 0, 0);
                myDynamicTexture.update();
                disc.billboardMode = 7;
                const mat2 = new StandardMaterial("mater", scene);
                mat2.diffuseTexture = myDynamicTexture;
                mat2.emissiveTexture = myDynamicTexture;
                disc.material = mat2;
               
                disc.position = new Vector3(0, 0, 0);
            }).catch(err => {
                console.log(err)
            })