一帧屏幕截图仅适用于基元答案

【问题标题】：a-frame screenshot only works with primitives一帧屏幕截图仅适用于基元
【发布时间】：2019-04-28 19:51:52
【问题描述】：

我有一个带有原始盒子和我创建的 3d 模型的场景。当我截取屏幕截图时，图像中仅出现该框。

这是我的场景

这是我的截图

我的代码

!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>

【问题讨论】：

标签： javascript screenshot aframe

【解决方案1】：

确保在截屏之前加载模型。模型加载器会发出 model-loaded 事件 (docs)，因此您可以等待：

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

【讨论】：