ThreeJS纹理问题 [英] ThreeJS texture issue

问题描述

我的 Three.js 3D 应用程序有问题 - 至少据我认识的一些人所说.

I have a problem with my Three.js 3D application - at least according to some people I know.

我的应用程序位于 [http://176.9.149.205/planungstool/].一些据称拥有最新版本的 Chrome 和 Firefox 的人看不到纹理区域.例如，他们看不到 3D 房屋的屋顶或正面.然而，他们确实看到了无纹理的东西，比如树或地板.

My application rests at [http://176.9.149.205/planungstool/]. Some people who supposedly have the most recent version of Chrome and Firefox, can not see the textured areas. For example, they do not see the roof or front of the 3D house. They do, however, see the non-textured stuff like the tree or the floor.

奇怪的是，我没有这个问题，而且我问过的大多数其他人也没有这个问题.这是它应该是什么样子，对我来说确实是这样:[http://176.9.149.205/planungstool/house.jpg]

What's weird is that I don't have that problem and most of the other people I asked do not have it as well. Here is what it should look like and does look like for me: [http://176.9.149.205/planungstool/house.jpg]

有谁知道是什么导致了这种情况?可能是一些客户端设置吗?或者也许是一些访问控制策略?

Does anyone have an idea what could cause this? Could it be some client-side settings? Or maybe some access control policy?

我正在加载这样的纹理:

I'm loading the textures like this:

var myTexture = new THREE.ImageUtils.loadTexture('gfx/textures/texture.jpg');

然后我只是使用lambert材质创建网格，并将此纹理作为贴图.

And then I just create meshes with lambert material that have this texture as their map.

如果您阅读本文但不知道是什么原因导致此错误，那么如果您至少能告诉我您是否看到了纹理区域，那将会很好，因为您使用的是最新版本的 Chrome 或 Firefox.

If you read this and do not know what could cause this error, it would be nice if you could at least tell me if you see the textured areas or not, given you have a recent version of Chrome or Firefox.

推荐答案

我可以在 mac 上看到当前 chrome 上的纹理.我在画布渲染器上遇到了类似的问题(任何纹理都是不可见的).对我来说，我从使用 ImageUtils.loadTexture 改为使用纹理和纹理加载器，它可以工作.

I can see the textures on current chrome on mac. I had a similar problem with the canvas renderer (anything textured was invisible). For me I changed from using the ImageUtils.loadTexture to a texture and texture loader and it works.

var texture = new THREE.Texture();
var texLoader = new THREE.ImageLoader();
texLoader.addEventListener( 'load', function(event){
    texture.image = event.content;
    texture.needsUpdate = true;
} );
texLoader.load('texture.png');

然而，我在 safari 中使用画布渲染器仍然有问题，但您似乎只使用 webgl 渲染器.希望这会有所帮助.

I do however still have problems with a canvas renderer in safari but you appear to only be using the webgl renderer. Hope this helps.

这篇关于ThreeJS纹理问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！