使用 Node 在 THREE.js 中加载纹理

Question

我正在尝试构建一个 3D 图像处理并返回全新图像的信使机器人。我使用 THREE.CanvasRenderer，我的应用托管在 Heroku 上。

当用户 /POST 将附件发送到我的 webhook 时，我想获取新创建的图像的 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 未定义... ) 就像in this example

应该如何解决这个问题？我有一个由 Facebook 生成的url，我想从中下载图像并将其放置在我的场景中？

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 真是太棒了。