I have been struggling to implement UV-mapping on my custom geometry in three.js. Despite trying various solutions, none seem to be working. Can someone provide a clear explanation of how UV-mapping functions and the correct way to implement it?
var s = 100;
var MapHeight = function(x, y, mult){
var map = new Array(x);
for(var i = 0; i < x; i++){
map[i] = new Array(y);
for (var j = 0; j < y; j++) {
map[i][j] = Math.sin((i*12+j)/10)*mult;
}
}
return map;
};
var heightMap = MapHeight(s, s, 0.3);
var loader = new THREE.TextureLoader();
var sandTex = loader.load("Textures/sand.jpeg");
var div = 2;
var Sand = function(color){
var geo = new THREE.Geometry();
var i;
for (i = 0; i < s; i++) {
for (var j = 0; j < s; j++) {
geo.vertices.push(new THREE.Vector3(i/div, heightMap[i][j], j/div));
}
}
for (i = 0; i < (s)*(s-1); i++) {
if (!Number.isInteger((i+1)/s)){
geo.faces.push(new THREE.Face3(i, i+1, i+s+1));
geo.faces.push(new THREE.Face3(i, i+s+1, i+s));
}
}
geo.computeVertexNormals();
geo.computeFaceNormals();
geo.center();
var mesh = new THREE.Mesh(
geo,
new THREE.MeshStandardMaterial({map: map})
);
return mesh;
};
My attempts to add UV-mapping to my geometry have resulted in either a black material or my program failing to run properly.