Визуализировать и сохранить сцену с помощью Three.js Int PNG или холст BitMap

Question

Мне интересно узнать, можно ли и как применять three.js для рендеринга 2d спрайтов и использовать на моей веб-странице

моя цель состоит в том, чтобы визуализировать сцену (например, в div) и сохранить ее как png (аналогично 3D-программе); нет необходимости сохранять кадр моей анимации (как я вижу, примеры представлены на форумах)

Может ли кто-нибудь привести простой пример создания и сохранения статичной сцены?

Answer 1

Да, вы можете сохранить его как PNG. Следующая функция берет текущий отрендеренный вывод, создает новое изображение и добавляет его на страницу (вы также можете загрузить изображение, если хотите, см. Раздел с комментариями).

   function copyCanvas() {
        imgData = renderer.domElement.toDataURL();

        // create a new image and add to the document
        imgNode = document.createElement("img");
        imgNode.src = imgData;
        document.body.appendChild(imgNode);

//        alternative way, which downloads the image 
//        var link = document.createElement("a");
//        link.download = 'capture.png';
//        link.href = imgData;
//        link.click();
    }

Полный пример можно найти здесь: https://github.com/josdirksen/threejs-cookbook/blob/master/06-particles-postprocessing/06.09-save-webgl-output.html