Question

我正在尝试构建一个messenger bot，它在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

一样

如何解决这个问题？我有一个由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，因为它似乎在引擎盖下三个.js将纹理写入一个单独的画布。

所以快速而丑陋的方式是做我做的事情：

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

我真的希望这可以帮助那些人，因为除了所有的障碍，在服务器上渲染WebGL是非常棒的。

使用节点

1 个答案: