Скриншот a-frame работает только с примитивами - PullRequest
Новая
       16

Скриншот a-frame работает только с примитивами

0 голосов
/ 28 апреля 2019

У меня есть сцена с примитивной коробкой и созданной мной 3d-моделью. Когда я делаю скриншот, на изображении появляется только рамка.

Это моя сцена my scene printscreen

Это мой скриншот my scene screenshot

Мой код 

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

1 Ответ

1 голос
/ 28 апреля 2019

Убедитесь, что модель загружена, прежде чем делать снимок экрана.Загрузчики моделей генерируют событие model-loaded ( документы ), поэтому вы можете подождать:

  • , пока не загрузится: document.getElementById("glbtest").addEventListener('model-loaded', takeScreenshot)
  • пару секунд с setTimeout(takeScreenshot, 5000)
...