1

我正在尝试构建一个信使机器人，它在 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.TextureLoaderjsdom (mock document, window) and来使用和修补它node-xmlhttprequest，但是我的load事件出现错误（event.target 没有定义......）就像在这个例子中一样

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

4

1 回答 1

2

好的，我半天后想通了，发给后人看：

这是对我有用的代码：

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

于 2017-01-20T15:15:24.337 回答