如何在three.js球體上使用紋理

我已經下載了球體示例：http://aerotwist.com/lab/getting-started-with-three-js/，我可以看到漂亮的紅色球體。我想使用它的紋理。我試過這個：如何在three.js球體上使用紋理

var texture = THREE.ImageUtils.loadTexture("ball-texture.jpg"); 
texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping; 
texture.repeat.set(125, 125); 
texture.offset.set(15, 15); 
texture.needsUpdate = true; 
var sphereMaterial = new THREE.MeshBasicMaterial({ map: texture }); 
var sphere = new THREE.Mesh(new THREE.Sphere(radius, segments, rings),sphereMaterial);

但我什麼也看不見，全是黑色的。有沒有人有球形紋理的工作示例？

來源

2011-08-02 Gavriel

這是一個總的猜測，因爲我知道*沒有*關於這個，但如果你已經將材料從平面顏色改變爲紋理，你可能需要添加一個光源？它可能是一個恆定的顏色着色器不需要一個，而有紋理的對象會。 – Beska

我確實有燈 – Gavriel

您使用的是Firefox嗎？這可能是您瀏覽器中的問題。 Firefox使用某種跨站點攔截器進行紋理。結果是黑色的。看看這個網站的更多信息：http://hacks.mozilla.org/2011/06/cross-domain-webgl-textures-disabled-in-firefox-5/

來源

2011-08-04 09:16:35 musse1

不，我在鉻 – Gavriel

似乎目前的Chrome版本有相同的「問題」。它實際上是一個安全問題：http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html – musse1

你可能有兩個問題。

首先，嘗試加載它是這樣的：

var texture = THREE.ImageUtils.loadTexture('ball-texture.jpg', {}, function() { 
    renderer.render(scene, camera); 
}); 

texture.needsUpdate = true;

確保紋理大小是兩個（512x512px爲IE）的功率。

來源

2011-10-09 12:09:23 frenski

推遲渲染，直到圖像加載爲我工作 - 謝謝！ – poshaughnessy

@poshaughnessy您是如何去除紋理重複時出現的空白（空白）空間的？ – Faizan

你有渲染循環嗎，還是隻渲染一次場景？

您需要有一個渲染循環，以便當THREE.ImageUtils加載圖像並更新紋理時，使用現在更新的紋理重新渲染場景。

所有three.js示例似乎都依賴於這種技術。即，啓動涉及獲取遠程資源的多個異步操作，開始渲染循環，讓場景在遠程資源到達時更新。

恕我直言，這是Three.js對Javascript newbs（像我這樣）不熟悉異步操作如何工作的最大困擾。

來源

2012-01-30 13:31:29

我有這個問題，但如果你是加載HTML作爲一個文件（即本地不是一個網絡服務器），許多瀏覽器（例如鉻）將不會允許您以標準three.js方式加載圖像，因爲它是一種安全違規行爲。

來源

2012-04-15 12:10:54 gazhay

如何在three.js球體上使用紋理

回答

相關問題