Блог

Главная - Вопросы по программированию - Как сделать скриншот 3D-рендеринга CSS в трех JS?

Как сделать скриншот 3D-рендеринга CSS в трех JS?

#javascript #three.js #html2canvas

#javascript #three.js #html2canvas

Вопрос:

У меня есть приложение с тремя JS, в котором используется 3D-рендеринг CSS. Я использую библиотеку html2canvas для создания скриншотов document.body.

Единственная проблема в том, что он делает скриншот всего, кроме 3D-рендерера CSS.

Вот код для создания скриншота:

 window.addEventListener("keyup", function(e){

    //Listen to 'P' key
    if(e.which !== 80) return;

    html2canvas(document.body, {
      onrendered: function(canvas) {
        var img = canvas.toDataURL();
        window.open( img , 'Final' );
      }
    });
});

Для демонстрации, пожалуйста, посетите:

http://nobelbrothers.com/test/CanvasShot и http://nobelbrothers.com/CanvasShot

Примечание: Нажмите P, чтобы сделать снимок экрана (вам нужно отключить блокировку всплывающих окон).

Спасибо

Комментарии:

1. Я не верю, что какие-либо средства визуализации html для canvas обрабатывают 3D CSS.

2. Тогда есть ли альтернативный способ синхронизации 3D-сцен CSS на нескольких дисплеях / экранах @ gman?

Ответ №1:

Я реализовал эту функцию благодаря js lib для сохранения файлов

  <script type="text/javascript" src="js/filesaver.js"></script>

window.addEventListener("keyup", function(e){

    //Listen to 'P' key
    if(e.which !== 80) return;
    Render.domElement.toBlob(function(blob) {
        saveAs(blob, "Final");
    });
});
Метки: