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

Question

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

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

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

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 события (события .target не определен ...) Точно так же, как in this example

Как подойти к этой проблеме? У меня есть 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 на сервере чистый обалденный.