2

I have created a custom Geometry function for Three.js, based on the Plane Geometry. Everything works fine, except that I don't know how to make the UV display correctly. I use 4 triangles per Square, while the THREE.PlaneGeometry is only using 2 triangles per square.

The code for PlaneGeometry UV's looks like this:

var uva = new THREE.Vector2( ix / gridX, 1 - iz / gridZ );
var uvb = new THREE.Vector2( ix / gridX, 1 - ( iz + 1 ) / gridZ );
var uvc = new THREE.Vector2( ( ix + 1 ) / gridX, 1 - ( iz + 1 ) / gridZ );
var uvd = new THREE.Vector2( ( ix + 1 ) / gridX, 1 - iz / gridZ );

And my Code in the Source Code:

var uva = new THREE.Vector2( a );
var uvb = new THREE.Vector2( b );
var uvc = new THREE.Vector2( c );
var uvd = new THREE.Vector2( d );
var uve = new THREE.Vector2( e );

Obviously that is wrong. But I have tried to use the PlaneGeometry code, and I get odd distortions, and I am not sure how to calculate the proper positions. This: 

var uva = new THREE.Vector2( ix / gridX, 1 - iz / gridZ );
var uvb = new THREE.Vector2( ix / gridX, 1 - ( iz + 1 ) / gridZ );
var uvc = new THREE.Vector2( ( ix + 1 ) / gridX, 1 - ( iz + 1 ) / gridZ );
var uvd = new THREE.Vector2( (( ix ) / gridX) + gridX, 1 - iz / gridZ );
var uve = new THREE.Vector2( ( ix + 1 ) / gridX, 1 - iz / gridZ );

Gives me this: BAD UV

I got some sort of answer in the THREE.JS ChatRoom, but I did not understand it, and the person did not elaborate...

(Q) So.. are the Vector2 for UV's not supposed to be the same position as the verticies ?

(A) no an UV is a vector that maps into a texture if you have a 512x512 texture, and an UV with [0.25, 0.75], it would map to the pixel in the texture at 256, 768 each vertex has an uv this means that this vertex maps into the texture like explained above this is done for each face of a vertex, and all fragments in the face are then interpolated using those three uvs

So that did not remove my confusion.. I did not understand the [0.25, 0.75] part. Or that every vertex has a texture. How can a point have a texture.

Could someone point me in the right direction please ? All I need is to know how the UV is positioned. But an example would be great.

Here is the source if you would like to take a look:

THREE.DiamondGeometry = function ( width, height, widthSegments, heightSegments ) {

    THREE.Geometry.call( this );

    this.width = width;
    this.height = height;

    this.widthSegments = widthSegments || 1;
    this.heightSegments = heightSegments || 2;

    var long_row = this.widthSegments + 1;
    var short_row = this.widthSegments;
    // First Row is the long_row, the ternary statement will toggle this.
    var current_row = short_row;
    var gridY = 0;
    var vX = width / 2, vY = height / 2;

    var ix, iz;
    var width_half = width / 2;
    var height_half = height / 2;

    var gridX = this.widthSegments;
    var gridZ = this.heightSegments;

    var gridX1 = gridX + 1;
    var gridZ1 = gridZ + ( gridZ - 2) + 1;

    var segment_width = this.width / gridX;
    var segment_height = this.height / gridZ;

    var normal = new THREE.Vector3( 0, 0, 1 );
                     // Height Segments Verticies
    for ( iz = 0; iz < (gridZ1 + 1) * 2; iz ++ ) {
        // Ternary Operator:
        current_row === long_row ? (current_row = short_row, vX = width_half - (segment_width / 2) ) : (current_row = long_row, vX = width_half );
                        // Width Segment Verticies
        for ( ix = 0; ix < current_row; ix ++ ) {

            var x = ix * segment_width - vX ;
            var y = (iz * segment_height - vY) / 2 - (vY / 2);

            this.vertices.push( new THREE.Vector3( x, - y, 0 ) );
        }
    }

    for ( iz = 0; iz < gridZ ; iz ++ ) {

            for ( ix = 0; ix < gridX; ix ++ ) {
                var a = ix + gridX * iz + (iz * gridX1) ;
                var b = a + 1;
                var c = a  + gridX1;
                var d = c + gridX;
                var e = d + 1;

                // THIS IS THE BAD PART THAT I NEED TO CALCULATE THE UV POSITIONS FOR:
                var uva = new THREE.Vector2( a );
                var uvb = new THREE.Vector2( b );
                var uvc = new THREE.Vector2( c );
                var uvd = new THREE.Vector2( d );
                var uve = new THREE.Vector2( e );



                // UP
                var face = new THREE.Face3( c, b, a );
                face.normal.copy( normal );
                face.vertexNormals.push( normal.clone(), normal.clone(), normal.clone() );

                this.faces.push( face );
                this.faceVertexUvs[ 0 ].push( [ uva, uvb, uvc ] );

                // DOWN
                face = new THREE.Face3( e, c, d );
                face.normal.copy( normal );
                face.vertexNormals.push( normal.clone(), normal.clone(), normal.clone() );

                this.faces.push( face );
                this.faceVertexUvs[ 0 ].push( [ uvd, uvc.clone(), uve ] );

                // LEFT
                face = new THREE.Face3( d, c, a );
                face.normal.copy( normal );
                face.vertexNormals.push( normal.clone(), normal.clone(), normal.clone() );

                this.faces.push( face );
                this.faceVertexUvs[ 0 ].push( [ uva.clone(), uvc.clone(), uvd.clone() ] );

                // RIGHT
                face = new THREE.Face3( e, b, c );
                face.normal.copy( normal );
                face.vertexNormals.push( normal.clone(), normal.clone(), normal.clone() );

                this.faces.push( face );
                this.faceVertexUvs[ 0 ].push( [ uvc.clone(), uvb.clone(), uve.clone() ] );

            }

    }

    this.computeCentroids();

};

THREE.DiamondGeometry.prototype = Object.create( THREE.Geometry.prototype );
4

1 回答 1

2

看到这张图片： http ://cgkit.sourceforge.net/tutorials/_images/uvmap.png 如上所述，对于没有纹理重复的 1 个纹理，UV 坐标在 (0,0) 到 (1,1) 的范围内. 如果您有一个四边形并将 UV 分配给图像中的顶点，则整个纹理将显示在四边形上。如果您添加边缘循环/镶嵌您的四边形，例如在 4 个较小的四边形中，但仍希望纹理完全显示而不重复，则需要计算顶点在 UV 空间中的位置之间的值。例如，中间的顶点（由您的镶嵌产生）现在是 UV (0.5, 0.5)，中间顶部的顶点是 (0, 0.5)。看看PlaneGeometry是怎么做的，并尝试从中学习^^

于 2013-11-06T09:28:48.543 回答