Подтвердить что ты не робот

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

Я пытаюсь использовать Canvas2Image, но он не любит играть с Threejs. Поскольку холст не определен, пока он не имеет div для прикрепления объекта canvas.

http://ajaxian.com/archives/canvas2image-save-out-your-canvas-data-to-images

Ответ 1

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

Убедитесь, что при инициализации 3D-контекста вы устанавливаете флаг preserveDrawingBuffer равным true, например:
```
var context = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});
```
Затем пользователь 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);

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