У THREE есть утилита для загрузки холстов асинхронным способом?

Question

У меня есть холст с некоторыми изображениями, и я хотел бы загрузить его на текстуру, похожую на изображение с ImageUtils. Как вы знаете, у canvas нет «onfinished» обратного вызова рендеринга, поэтому я нахожусь во власти THREE здесь. Я столкнулся с this, но это, похоже, тесно связано с AJAX.

Answer 1

Вы можете прочитать изображение с холста в качестве URL данных:

var canvas = document.getElementById("canvas"); 
var dataURL = canvas.toDataURL(); 

После выполнения DrawImage на холсте, данные изображения уже будет там внутри.

Эти URL-адреса данных затем могут использоваться как текстуры в Three.js.

var texture = THREE.ImageUtils.loadTexture(dataURL); 

Update

Вы также можете попробовать это для отладки:

var texture = THREE.ImageUtils.loadTexture(dataURL, undefined, function(texture){ 
    // Handler for onLoad, this returns the img 
    console.log(texture); 
}, 
function(event){ 
    // Handler for onError, it returns the error event 
    console.log(event); 
});