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

Question

我正在尝试构建一个 Messenger 机器人，它在 3d 中进行一些图像处理和 returns 一个全新的图像。我使用 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 (mock 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 将纹理写入一个单独的 canvas。

所以快速而丑陋的方法就是做我所做的：

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

我真的希望这对那里的人有所帮助，因为除了所有障碍之外，在服务器上渲染 WebGL 真是太棒了。

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

Loading a texture in THREE.js using Node

node.js

three.js

node-canvas