[英]Add Texture to custom three.js Geometry
I have been looking for a way to add uv-mapping to my custom geometry in three.js.我一直在寻找一种将 uv 映射添加到three.js 中的自定义几何图形的方法。 I have found ways of doing it but none of the solutions I have found work.
我找到了这样做的方法,但我找到的解决方案都没有。 Could anyone explain how uv-mapping works and how to do it properly?
谁能解释 uv-mapping 的工作原理以及如何正确执行?
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;
};
Right now when I try adding UV-mapping to my geometry, the result is either a black material or my program doesn't run.现在,当我尝试将 UV 映射添加到我的几何体时,结果要么是黑色材质,要么是我的程序无法运行。
The texture coordinates have to be add per face, to the 1st layer UV layer.必须将每个面的纹理坐标添加到第一层 UV 层。
See THREE.Geometry.faceVertexUvs参见THREE.Geometry.faceVertexUvs
Create and array at the UV layer:在 UV 层创建和排列:
geo.faceVertexUvs[0] = [];
And add an array of 3 THREE.Vector2
for each triangle face:并为每个三角形面添加一个包含 3 个
THREE.Vector2
的数组:
geo.faceVertexUvs[0].push([
new THREE.Vector2(u0, v1),
new THREE.Vector2(u1, v1),
new THREE.Vector2(u2, v2)
]);
Apply this to your code as follows:将其应用到您的代码中,如下所示:
var geo = new THREE.Geometry();
var i;
var uv = [];
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));
uv.push(new THREE.Vector2((i-1)/s, (j-1)/s));
}
}
geo.faceVertexUvs[0] = [];
for (i = 0; i < (s)*(s-1); i++) {
if (!Number.isInteger((i+1)/s)){
var vi = [i, i+1, i+s+1, i+s];
geo.faces.push(new THREE.Face3(vi[0], vi[1], vi[2]));
geo.faces.push(new THREE.Face3(vi[0], vi[2], vi[3]));
geo.faceVertexUvs[0].push([ uv[vi[0]], uv[vi[1]], uv[vi[2]] ]);
geo.faceVertexUvs[0].push([ uv[vi[0]], uv[vi[2]], uv[vi[3]] ]);
}
}
geo.computeVertexNormals();
geo.computeFaceNormals();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.