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

我正在尝试构build一个使用3D进行image processing的Messenger软件，并返回一个全新的图像。 我使用THREE.CanvasRenderer和我的应用程序托pipe在Heroku上。

当一个用户/ POST附件到我的webhook，我想采取新创build的图像的url，并将其插入到我的3D场景。

这是我的代码（使用节点 – 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; }); } 

callback得到运行，我实际上可以console.log()图像的内容，但没有出现在场景中 – 我应该渲染的飞机只是变黑，没有任何错误…我在这里错过了什么？

我也尝试了其他几种方式，没有任何成功

我尝试使用THREE.TextureLoader并使用jsdom（模拟document ， window ）和node-xmlhttprequest ，但随后出现load事件（event.target未定义…）的错误。就像本示例

应该如何解决这个问题呢？ 我有一个由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是纯粹的迷人。