Custom UV Mapping

Questions
,
1

I can’t for the life of me find any documentation on UV mapping. I understand the concept, but there’s no docs on what’s the syntax to apply one. I found references to faceVertexUvs, but it was removed. In the repo there’s one file still mentioning it (three.js/threejs.js at 3daf128f34da9cdb1e339766a4aae21b5989f131 · mrdoob/three.js · GitHub) which is really confusing.

There’s a nice guide on this, but no code that helps:

I’m generating the mesh vertices with code, but I don’t know where to put the uv coordinates.

2

Take a look at these examples from the Collection of examples from discourse.threejs.org .

BufferGeometryIndexed
BufferGeometryNonIndexed

RoundedRectangle
RoundEdgedBoxFlat

CircleDynamicallyFormable

BeginnerExample step 12

A little more complicated:
Curved2Geometry

see

function BasicGeometry( radialSegments, heightSegments, withTop, withBottom ) { ...
1 Like
3

As the examples do not explain everything I think there is no good documentation?

1 Like
4

When I started programming uv coordinates I searched the net for a good tutorial.

Everything I found either referred to the general theory of what you need uv coordinates for and then modeling software like Blender was always used to explain it.

So I looked at three.js examples to see how the concept of uv coordinates is implemented. I tried until I could then do quite simple mappings piece by piece and later more complicated mappings.

I have now looked again on the net for uv tutorials, nothing has changed there. But maybe someone else knows a good source?

The examples above are not a tutorial, almost all just extracted from the collection to fit the topic. You can use them to experiment.

In the beginner’s example, you can easily understand the construction by the representation of the flower and the numbered representation of the arrangement of the vertices and faces on the quarter sphere.

1 Like
5

I made a stack overflow question here, and answered it. I think it has some useful info in it thats relevant to this question

6 
let a = mesh.geometry.attributes.uv.array 

a[0] = 0;  //write some uvs. a.length is 2*number of vertices
a[1] = 1;
a[2] = 1; 
a[3] = 1;
....
mesh.geometry.attributes.uv.needsUpdate = true;
1 Like
7

More usefully, there is one uv coordinate per vertex coordinate.

If you have 10 vertices, you have 30 numbers for the vertices, and you have 10 uv coordinates or 20 numbers for the uvs, and 20 is twice 10 (hence “a.length is 2*number of vertices”)

1 Like