I've recently developed a custom Geometry function for Three.js, inspired by the Plane Geometry. While everything seems to be working well with my function, I'm struggling to get the UV mapping right. My approach involves using 4 triangles per square, contrasting with the default THREE.PlaneGeometry which uses only 2 triangles per square.
The UV code snippet from the PlaneGeometry goes 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 );
In contrast, here's the snippet in my 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 );
It's clear that my approach is incorrect. Trying to replicate the UV setting from PlaneGeometry results in distorted output, leaving me unsure about the correct calculation method. For instance:
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 );
This produces undesired results: BAD UV
Despite seeking help in the THREE.JS ChatRoom, the explanation regarding UV vectors and textures failed to clarify my doubts:
(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
Unfortunately, the discussion did little to dissipate my confusion, especially concerning the concept of vertices having textures. How can a point be associated with a texture?
If anyone can provide guidance or examples on how to properly position UVs, it would be greatly appreciated.
For reference, here's the relevant segment from my source code:
THREE.DiamondGeometry = function ( width, height, widthSegments, heightSegments ) {
// Code for DiamondGeometry implementation...
};
THREE.DiamondGeometry.prototype = Object.create( THREE.Geometry.prototype );