a-frame截图仅适用于基元

Question

我有一个带有原始框和我创建的三维模型的场景。当我只截取屏幕截图时，图片中会出现一个框。

这是我的场景

这是我的截图

我的代码

!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="html2canvas.js"></script>
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
</head>
<body>


<a-scene id="mainDiv">
    <a-entity id="box" geometry="primitive: box; width: 1; depth: 1; height: 1" position="0 0 -3" rotation="0 45 0" material="color: #4CC3D9"></a-entity>
    <a-entity id="glbtest" gltf-model="teste2.glb" position="0 0 -3"  scale="0.05 0.05 0.05">
      </a-entity>
  <a-entity id="sky" geometry="primitive: sphere; radius: 100" material="color: #ECECEC; shader: flat; side: back"></a-entity>
  <a-entity light="type: directional; color: #CCC; intensity: 1; castShadow: true;" position="-2 3 2" target="#glbtest"></a-entity>
    </a-scene>


<script>
html2canvas(document.querySelector("#mainDiv"))
.then(
    canvas => {
        var imagedata = canvas.toDataURL('image/jpg');
        var imgdata = imagedata.replace(/^data:image\/(png|jpg);base64,/, "");
        //ajax call to save image inside folder
        $.ajax({
            url: 'save_image.php',
            data: {
                   imgdata:imgdata
                   },
            type: 'post',
            success: function (response) {   
               //alert (response);
               //$('#image_id img').attr('src', response);
            }
        });
});
</script>
</body>
</html>

Answer 1

在拍摄屏幕截图之前，请确保已加载模型。模型加载器发出model-loaded事件（docs），所以你可以等待：

直到它加载：document.getElementById("glbtest").addEventListener('model-loaded', takeScreenshot)
与setTimeout(takeScreenshot, 5000)几秒钟

a-frame截图仅适用于基元

问题描述投票：0回答：1

1个回答

最新问题

a-frame截图仅适用于基元

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1