使用节点在THREE.js中加载纹理使用节点

我正在尝试构建一个使用3D进行图像处理并返回一个全新图像的messenger bot。我使用THREE.CanvasRenderer，我的应用程序托管在Heroku上。使用节点在THREE.js中加载纹理使用节点

当用户/ 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.TextureLoader与jsdom修补它（模拟document，window）和node-xmlhttprequest，但随后出现的错误与我load事件（事件.target没有被定义...）就像in this example

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

来源

2017-01-20 Georgi B. Nikolov

您使用的是什么版本的three.js？ – Wilt

好吧，我想通了半天后，和我张贴的后代：

这里是没有的伎俩对我的代码：

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-20 15:15:24

我很高兴你发布了这个！如果它只适用于我的情况。你能告诉我你在实际渲染中使用什么吗？我已经通过了headless-gl，node-webgl，软件渲染器，并且我不知道在过去12个小时内还有多少人。没有纹理的骰子。当你想到这个时候，我会很感激这个帮助！ –

嘿，我正在使用THREE.CanvasRenderer。由于THREE使用单独的2d画布来编写纹理，Node.js显然不支持，所以我必须使用https://github.com/Automattic/node-canvas来修补它（也请参阅我的丑陋补丁document.createElement，所以它返回新的Canvas（））。我之前做过这个项目，并不是所有的东西都在我的记忆中，但是你可以看看https://github.com/gnikoloff/messenger-bot-vaporwavify-me，项目背后的回购:)祝你好运！ –

非常感谢Georgi！我会给它一个旋风。不是帆布能力只是WebGL能做的一个子集？你有没有注意到浏览器和服务器版本之间的渲染差异？ –

使用节点在THREE.js中加载纹理使用节点

回答

相关问题