Programmatically generate simple UV mapping for models

Question

Based on this question, I'm trying to generate UV Mappings programmatically using Three.js for some models, I need this because my models are also generated programmatically, and I need to apply a simple texture to them. I read here and successfully generated a UV display for simple 3D text, but when applying the same display to more complex models, it just doesn't work.

The texture I'm trying to apply looks something like this:

The black background is simply transparent in the PNG image. I need to apply this to my models, it’s just a gloss effect, so I don’t care about the exact position in the model, is there a way to create a simple UV map programmatically for these cases?

, , :

assignUVs = function( geometry ){

    geometry.computeBoundingBox();

    var max     = geometry.boundingBox.max;
    var min     = geometry.boundingBox.min;

    var offset  = new THREE.Vector2(0 - min.x, 0 - min.y);
    var range   = new THREE.Vector2(max.x - min.x, max.y - min.y);

    geometry.faceVertexUvs[0] = [];
    var faces = geometry.faces;

    for (i = 0; i < geometry.faces.length ; i++) {

      var v1 = geometry.vertices[faces[i].a];
      var v2 = geometry.vertices[faces[i].b];
      var v3 = geometry.vertices[faces[i].c];

      geometry.faceVertexUvs[0].push([
        new THREE.Vector2( ( v1.x + offset.x ) / range.x , ( v1.y + offset.y ) / range.y ),
        new THREE.Vector2( ( v2.x + offset.x ) / range.x , ( v2.y + offset.y ) / range.y ),
        new THREE.Vector2( ( v3.x + offset.x ) / range.x , ( v3.y + offset.y ) / range.y )
      ]);

    }

    geometry.uvsNeedUpdate = true;
}

Answer 1

. UV

for (i = 0; i < geometry.faces.length ; i++) {
   geometry.faceVertexUvs[0].push([
     new THREE.Vector2( 0, 0 ),
     new THREE.Vector2( 0, 0 ),
     new THREE.Vector2( 0, 0 ),
   ]);
}

?

-.

for (i = 0; i < geometry.faces.length ; i++) {
   geometry.faceVertexUvs[0].push([
     new THREE.Vector2( Math.random(), Math.random() ),
     new THREE.Vector2( Math.random(), Math.random() ),
     new THREE.Vector2( Math.random(), Math.random() ),
   ]);
}

. , , . , , .

, , - .

, .

• , , , , ( ) . , UV

  , , . , , , , .

  , , , . , . , x, y, z , ,

  U = Math.atan2(z, x) / Math.PI * 0.5 - 0.5;
  V = 0.5 - Math.asin(y) / Math.PI;
  

• . 2d , . , ( ) .

  2D- 3D-, WebGL.

  gl_Position = matrix * position;
  

  matrix = worldViewProjection.

  clipSpace = gl_Position.xy / gl_Position.w
  

  x, y, -1 +1. 0 1 UV

  uv = clipSpace * 0.5 + 0.5;
  

  , UV JavaScript, .

• , , , , , , . , , , , - .

  , .

• Cube Mapping?

  6 . , , 6 . , , , , .

  , . , , U, V, W U, V. , , , U, V, W.

• , , . , , , , x, y, z ( , ), .

  U = Math.atan2(x, z) / Math.PI * 0.5 + 0.5
  V = y
  

2

1. , ?

   1 , .

2. , , Maya Blender, - -.