使用節點在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中加載紋理使用節點

回答

相關問題