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

您是否有渲染循环，或者您只渲染一次场景？

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

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

恕我直言，对于不熟悉异步操作如何工作的Javascript newbs（像我一样），这是Three.js最大的问题。

Answer 4

我遇到了这个问题，但是如果你把html作为文件加载（即本地不是网络服务器），很多浏览器（例如chrome）都不允许你以标准的three.js方式加载图像，因为它是安全违规。

如何在three.js中的球体上使用纹理

4 个答案: