如何在 Three.js 中的球体上使用纹理
我从以下位置下载了一个球体示例： 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);
但我什么也看不见，一切都是黑色的。有人有球体纹理的工作示例吗？
I've downloaded a sphere example from: http://aerotwist.com/lab/getting-started-with-three-js/ and I can see the nice red sphere. I'd like to use a texture on it. I've tried this:
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);
but I can't see anything, all is black. Does anyone have a working example for sphere texture?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
你可能有两个问题。
首先，尝试像这样加载它：
确保纹理大小是 2 的幂（IE 为 512x512px）。
You might have two problems.
First, try loading it like this:
Make sure that the texture size is a power of two (512x512px for IE).
您使用的是火狐浏览器吗？这可能是您的浏览器出现问题。 Firefox 对纹理使用某种跨站点拦截器。结果是黑色。请查看此网站以获取更多信息：http://hacks.mozilla.org/2011/06/cross-domain-webgl-textures-disabled-in-firefox-5/
Are you using Firefox? This could be a problem in your browser. Firefox uses some kind of cross-site-blocker for textures. The result is black instead. Take a look at this site for more info: http://hacks.mozilla.org/2011/06/cross-domain-webgl-textures-disabled-in-firefox-5/
您是否有渲染循环，或者您只渲染场景一次？
您需要有一个渲染循环，以便当 THREE.ImageUtils 加载图像并更新纹理时，您可以使用现在更新的纹理重新渲染场景。
所有的 Three.js 示例似乎都依赖于这种技术。即，触发几个涉及远程资源获取的异步操作，启动渲染循环，让场景在远程资源到达时更新。
恕我直言，这是 Three.js 对于不熟悉异步操作如何工作的 Javascript 新手（比如我）来说最大的问题。
Do you have a rendering loop, or did you render the scene just once?
You need to have a rendering loop so that when the THREE.ImageUtils loads the image and updates the texture, you re-render the scene with the now updated texture.
All the three.js examples seem to rely on this technique. I.e., Fire off several async operations involving a fetch of a remote resource, start rendering loop, let scene be updated as remote resources arrive.
IMHO this is Three.js's biggest gotcha for Javascript newbs (like me) who are not familiar with how async operations work.
我遇到了这个问题，但是如果您将 html 作为文件加载（即本地不是网络服务器），许多浏览器（例如 Chrome）将不允许您以标准的 Three.js 方式加载图像，因为这是一种安全违规。
I had this problem, but if you are loading the html as a file (i.e. locally not a webserver), many browsers (chrome for e.g.) will not allow you to load images in the standard three.js way as it is a security violation.