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

Question

我從http://aerotwist.com/lab/getting-started-with-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);

但我看不到任何東西，一切都是黑色的。 有沒有人有球體紋理的工作示例？

Answer 1

你可能有兩個問題。

首先，嘗試加載它：

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

texture.needsUpdate = true;

確保紋理大小為2的冪（IE為512x512px）。

Answer 2

你在使用Firefox嗎？ 這可能是您瀏覽器中的問題。 Firefox使用某種跨站點攔截器來構建紋理。 結果是黑色。 請訪問此站點以獲取更多信息： http ： //hacks.mozilla.org/2011/06/cross-domain-webgl-textures-disabled-in-firefox-5/

Answer 3

我有這個問題，但是如果你把html作為文件加載（即本地不是網絡服務器），很多瀏覽器（例如chrome）都不允許你以標准的three.js方式加載圖像，因為這是一個安全違規。

Answer 4

你有一個渲染循環，或者你只渲染一次場景？

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

所有這三個例子似乎都依賴於這種技術。 即，觸發幾個涉及獲取遠程資源的異步操作，開始渲染循環，讓場景在遠程資源到達時更新。

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