Как сохранить изображение из холста Three.js?

Ответ 1

Поскольку toDataURL - это метод canvas html-элемента, который будет работать и для 3D-контекста. Но вам нужно позаботиться о двух вещах.

1. Убедитесь, что при инициализации 3D-контекста вы устанавливаете флаг preserveDrawingBuffer равным true, например:

   var context = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});
   

2. Затем пользователь canvas.toDataURL() чтобы получить изображение

В три раза вам нужно будет сделать следующее при создании экземпляра рендеринга:

new THREE.WebGLRenderer({
    preserveDrawingBuffer: true 
});

Кроме того, имейте в виду, что это может иметь последствия для производительности. (Читайте: https://github.com/mrdoob/three.js/pull/421#issuecomment-1792008)

Это относится только к средству рендеринга webgl, однако, если вы используете trjs canvasRenderer, вы можете просто сделать renderer.domElement.toDataURL(); напрямую, не требуется параметр инициализации.

Мой эксперимент webgl: http://jsfiddle.net/TxcTr/3/ нажмите ' p ' для скриншота.

Подкрепление к gaitat, я просто следил за ссылкой в его комментарии, чтобы получить этот ответ.

Ответ 2

Я прочитал разговор, отправленный Dinesh (https://github.com/mrdoob/three.js/pull/421#issuecomment-1792008), и придумал решение, которое не замедлит ваше приложение.

    function render() { 
        requestAnimationFrame(render);
        renderer.render(scene, camera);
        if(getImageData == true){
            imgData = renderer.domElement.toDataURL();
            getImageData = false;
        }
    } 

С помощью этого вы можете оставить флаг preserveDrawingBuffer-флагом ложным и получить изображение от THREE.js. Просто установите getImageData в true и вызовите render(), и вам хорошо идти.

getImageData = true;
render();
console.debug(imgData);

Надеюсь, это поможет людям, которые мне нравятся, которые нуждаются в высоких кадрах:)