html显示到 Babylonjs GUI

最新推荐文章于 2023-10-13 10:39:28 发布

哈哈哈嗝哈哈哈

最新推荐文章于 2023-10-13 10:39:28 发布

阅读量326

点赞数

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

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

版权

Babylonjs 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

使用 html2canvas 将html 转成 canvas;通过 canvas.toDataURL() 生成 dataURL 传给GUI

  html2canvas(dom, { width: this.width, height: this.height }).then(canvas => {
            // dom.remove();
            // 关联GUI
            addButton(transForm, canvas.toDataURL(), callBack)
        }).catch(err => {
            console.log(err)
        })
   addButton(mesh: Mesh | TransformNode, bash64Img: string, callBack: (eventData: Vector2WithInfo, eventState: EventState) => void) {
        const advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI(uuid(), true, this.scene);
        advancedTexture.rootContainer.scaleX = window.devicePixelRatio;
        advancedTexture.rootContainer.scaleY = window.devicePixelRatio;
  
        const buttonImg = Button.CreateImageWithCenterTextButton(uuid(), "", bash64Img);
        buttonImg.width = this.width + "px";
        buttonImg.height = this.height + "px";
        buttonImg.color = "rgba(0,0,0,0)";
        buttonImg.background = "rgba(0,0,0,0)";
        advancedTexture.addControl(buttonImg);
        buttonImg.linkWithMesh(mesh)
        buttonImg.linkOffsetY = -95;
        buttonImg.onPointerClickObservable.add(callBack)
        //----连线
        const line = new Line();
        line.lineWidth = 2;
        line.color = "Orange";
        line.y2 = 90;
        line.y1 = -10;
        line.linkOffsetY = -75;
        // line.dash = [5, 10];
        advancedTexture.addControl(line);
        line.linkWithMesh(mesh);
        line.connectedControl = buttonImg;
        // // //底部圆点
        const ellipse = new Ellipse();
        ellipse.width = "10px";
        ellipse.height = "10px";
        ellipse.color = "rgba(0,0,0,.5)";
        ellipse.thickness = 4;
        ellipse.background = "rgba(0,0,0,0)";
        advancedTexture.addControl(ellipse);
        ellipse.linkWithMesh(mesh);
        const b1 = new gImage(uuid(), "/image/a98a7f2f28243e66c014ab6e28cfbe45.png");
        b1.width = "10px";
        b1.height = "10px";
        b1.stretch = gImage.STRETCH_EXTEND;
        ellipse.addControl(b1);

    }