如何在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);

但是我什么都看不见，全都是黑色。有人有球体纹理的工作示例吗？

- Gavriel

---

这只是一个猜测，因为我对此一无所知，但如果您将材料从平面颜色更改为纹理，则可能需要添加光源？可能常量颜色着色器不需要光源，而纹理对象则需要。 - Beska

Answer 1

你可能有两个问题。

首先，尝试像这样加载它：

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

texture.needsUpdate = true;

确保纹理大小是2的幂次方（IE为512x512像素）。

- frenski

---

推迟渲染直到图片加载完成对我很有效 - 谢谢！ - poshaughnessy

@poshaughnessy 你是如何去除纹理重复时出现的空白（白色）间隙的？ - Faizan

Answer 2

您是否在使用Firefox浏览器？这可能是您的浏览器存在问题。Firefox使用了一种跨站点阻止程序来处理纹理，结果会变成黑色。请访问此网站以获取更多信息：http://hacks.mozilla.org/2011/06/cross-domain-webgl-textures-disabled-in-firefox-5/

- musse1

---

看起来当前版本的Chrome也有相同的“问题”。实际上这是一个安全问题：http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html - musse1

Answer 3

你有一个渲染循环吗？还是只渲染了一次场景？

你需要有一个渲染循环，这样当THREE.ImageUtils加载图像并更新纹理时，您可以使用现在更新的纹理重新渲染场景。

所有的three.js例子似乎都依赖于这种技术。即，触发几个涉及远程资源获取的异步操作，开始渲染循环，让场景在远程资源到达时更新。

在我看来，这是Three.js对于不熟悉异步操作工作方式的Javascript新手（像我）最大的陷阱。

- Argenti Apparatus

Answer 4

我曾经遇到过这个问题，但如果你是将HTML文件作为文件加载（即本地而非Web服务器），许多浏览器（例如Chrome）将不允许您以标准的three.js方式加载图像，因为这是一种安全违规。

- gazhay