Three.js 高效地将 Uvs 映射到平面 [英] Three.js Efficiently Mapping Uvs to Plane

问题描述

我正在开发一个游戏，其中有许多具有相同纹理但长度/高度不同的墙壁.目前我正在克隆基础纹理并为每面墙设置重复值.这会在内存中创建许多纹理.

I'm working on a game where there are many walls of the same texture but at different lengths/heights. Currently I am cloning a base texture and setting the repeat values for each wall. This creates to many textures in memory.

我想要做的是改变平面 uvs 以正确适应纹理.我试了一下，得出了一些不错的结果.

What I want to do is to alter the planes uvs to fit the textures properly. I took a stab at this a came up with some meh results.

            var X = 2000;
            var Y = 1000;

            var seg = Math.ceil(X/Y);

            var wallgeo = new THREE.PlaneGeometry(X,Y,seg,1);

            var uvs = [];
            for(var i=0,len=wallgeo.faces.length;i<len;i+=2){
                uvs.push([new THREE.Vector2(0,1),new THREE.Vector2(0,0),new THREE.Vector2(1,1)]);
                uvs.push([new THREE.Vector2(0,0),new THREE.Vector2(1,0),new THREE.Vector2(1,1)]);               
            }       

            wallgeo.faceVertexUvs = [uvs];
            wallgeo.uvsNeedUpdate = true;

            var walltex = DDSLoader.load('materialmaptextures/21_2048.dds');
            var wallmat = new THREE.MeshPhongMaterial({map:walltex, transparent:true, wireframe:false});
            wall = new THREE.Mesh(wallgeo,wallmat);
            wall.position.set(0,Y/2,-300);

            scene.add(wall);

您可能会说这个问题是因为创建了一个额外的面孔，没什么大不了的，但我真的很想避免这种情况.最重要的是，如果平面长度不能被其高度整除，则纹理将拉伸/压缩.此外，这里的平面高度段是固定的，因此受到限制.

The problems with this as you can probably tell are that for one additional faces are created, not a huge deal but I would really like to avoid this. Most importantly if the planes length is not evenly divisible by its height the texture will stretch/compress. Also, the planes height segments in this are fixed causing restrictions.

我不太关心创建额外的面孔.这是必要的吗?一张脸每个三角形可以有多个 uv 吗?需要吗?

I'm not so much concerned with creating additional faces. Is this necessary? Can one face have more than one uv per triangle? Does it need to?

我不熟悉 Uv，必须有一种有效的方法让我的墙壁看起来不荒谬，同时又不会破坏内存，对吧?

I am new to messing with Uv's, there has got to be an efficient way to make my walls not look absurd without blowing up memory, right?

演示:http://www.titansoftime.com/uv.php

推荐答案

您希望能够修改 PlaneGeometry 的 UV，这样无论尺寸如何，重复的纹理始终呈现相同的大小飞机的.这是设置 texture.repeat 值的替代方法.

You want to be able to modify the UVs of a PlaneGeometry so a repeated texture always renders the same size, regardless of the dimensions of the plane. This is an alternative to setting texture.repeat values.

这是要遵循的模式:

// geometry
var width = 20;  // width of plane in world units
var height = 10; // height of plane in world units
var size = 5;    // texture block size in world units

var w = width / size;
var h = height / size;
var geometry = new THREE.PlaneGeometry( width, height, 1, 1 );

var uvs = geometry.faceVertexUvs[ 0 ];
uvs[ 0 ][ 0 ].set( 0, h );
uvs[ 0 ][ 1 ].set( 0, 0 );
uvs[ 0 ][ 2 ].set( w, h );
uvs[ 1 ][ 0 ].set( 0, 0 );
uvs[ 1 ][ 1 ].set( w, 0 );
uvs[ 1 ][ 2 ].set( w, h );

// texture
var texture = THREE.ImageUtils.loadTexture( "..." );
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

three.js r.69

three.js r.69

这篇关于Three.js 高效地将 Uvs 映射到平面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！