Загрузка текстуры в THREE.js с использованием Node

Question

Я пытаюсь построить мессенджер-бот, который выполняет некоторую обработку изображений в 3d и возвращает совершенно новое изображение. Я использую THREE.CanvasRenderer, и мое приложение размещено на Heroku.

Когда пользователь /POST прикрепляет вложение к моему веб-крюку, я хочу взять URL вновь созданного изображения и вставить его в мою 3D-сцену.

Это мой код (с использованием библиотеки node-canvas):

const addTexture = (imageUrl) => {

    request({
        uri: imageUrl,
        method: 'GET'
    }, (err, res, body) => {
        let image = new Canvas.Image();
        image.src = body;
        mesh.material.map = new THREE.Texture(image);
        mesh.material.needsUpdate = true;
    });
}

Обратный звонок запускается, и я могу на самом деле console.log() содержимое изображения, но ничего не появляется на сцене - самолет, который я должен визуализировать, просто чернеет без каких-либо ошибок... Что мне здесь не хватает?

Я также попробовал несколько других способов, но безуспешно...

Я пытался с помощью THREE.TextureLoader и залатать его с помощью jsdom (макет document, window) а также node-xmlhttprequest, но тогда есть ошибка с моим load событие (event.target не определено...) Как и в этом примере

Как следует подходить к этой проблеме? у меня есть url сгенерированный Facebook, я хочу загрузить изображение с него и поместить в мою сцену?

Answer 1

Хорошо, я понял это через полдня и выкладываю это для будущих поколений:

Вот код, который помог мне:

const addTexture = (imageUrl) => {
    request.get(imageUrl, (err, res, data) => {
        if (!err && res.statusCode == 200) {
            data = "data:" + res.headers["content-type"] + ";base64," + new Buffer(data).toString('base64');

            let image = new Canvas.Image();

            image.onload = () => {
                mesh.material.map = new THREE.Texture(image);
                mesh.material.map.needsUpdate = true;
            }
            image.src = data;
        }
    });
}

Таким образом, я все еще получаю ошибку: document is not definedпотому что кажется, что под капотом three.js записывает текстуру на отдельный холст.

Так что быстрый и уродливый способ сделать то, что я сделал:

document.createElement = (el) => {
    if (el === 'canvas') {
        return new Canvas()
    }
}

Я действительно надеюсь, что это кому-то поможет, потому что, помимо всех препятствий, рендеринг WebGL на сервере - это просто потрясающе.