node.js - 使用 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;
        }
    });
}

这样，我仍然收到错误:文档未定义，因为在幕后， Three.js 似乎将纹理写入单独的 Canvas 。

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

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

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