更改纹理大小时的UV映射问题

I'm developing an application for editing minecraft models. I'm using ThreeJS for displaying drawn texture mapped on the 3D player model, but there's an issue related to texture size change.

我正在开发一个编辑minecraft模型的应用程序。我正在使用ThreeJS来显示映射在3D播放器模型上的绘制纹理,但是存在与纹理大小更改相关的问题。

So, initially I have a texture mapped on the model like this, and when I change the texture height to 64, it becomes like this.

所以,最初我有一个像这样的模型映射的纹理,当我将纹理高度更改为64时,它就像这样。

I create texture like this:

我创建这样的纹理:

/* Texture */
var texture = new THREE.Texture(canvas);

texture.minFilter = texture.magFilter = THREE.NearestFilter;

Where canvas is HTMLCanvasElement, and when the canvas' content is changed, I refresh the texture like that:

canvas是HTMLCanvasElement,当画布的内容发生变化时,我刷新纹理:

this.skin.render(canvas.getContext("2d"), this.skin.w, this.skin.h);

this.limbs.forEach(function (limb) {
    limb.mapUV(self.skin.w, self.skin.h);
});

this.material.map.needsUpdate = true;
this.material.needsUpdate = true;

Where this.material is double sided transparent material with attached texture above. The UV's are appear to be correct.

这个材料是双面透明材料,上面附有纹理。 UV似乎是正确的。

I fixed similar problem in my previous application by recreating the whole mesh, but for this case it seems like it's going to be expensive.

我通过重新创建整个网格来修复我之前的应用程序中的类似问题,但是对于这种情况,它看起来会很昂贵。

How do I fix that? It's seems like the texture being cached or something, if I'm right, how can I uncache it?

我该如何解决这个问题?这似乎是缓存的纹理或其他东西,如果我是对的,我怎么能解开呢?

Thank you for attention!

感谢您的关注!

P.S.: Sorry for pictures. Due to my reputation, I can't post images yet.

P.S。:对不起图片。由于我的声誉,我还不能发布图片。

1 个解决方案

#1

I spent several hours tweaking my code to get the desired result, and in the end, I finally could solve my problem. The problem was that UV array elements of geometry.faceVertexUvs were cached somewhere in the core of ThreeJS.

我花了几个小时调整我的代码以获得所需的结果,最后,我终于可以解决我的问题了。问题是geometry.faceVertexUvs的UV数组元素被缓存在ThreeJS核心的某个地方。

My previous code of UV mapping was assigning the array of Vector2 directly to geometry.faceVertexUvs:

我之前的UV映射代码是将Vector2数组直接分配给geometry.faceVertexUvs:

geo.faceVertexUvs[0][side] = [faces[1], faces[2], faces[0]];

First time it works, but next times it gets cached, even though I'm marking UVs dirty (geo.uvsNeedUpdate = true), so instead of assigning the array, I end up with copying Vector2 from faces array to each triangle vertex in geo.faceVertexUvs[0][side]:

第一次它工作,但下次它被缓存,即使我标记UV脏(geo.uvsNeedUpdate = true),因此我不是分配数组,而是最终将faces2从faces数组复制到geo中的每个三角形顶点.faceVertexUvs [0] [方]:

geo.faceVertexUvs[0][side][0].copy(faces[1]);
geo.faceVertexUvs[0][side][1].copy(faces[2]);
geo.faceVertexUvs[0][side][2].copy(faces[0]);

I wish this (how to map UVs properly) was explained in the documentation of ThreeJS.

我希望这(如何正确映射UV)在ThreeJS的文档中进行了解释。

#1