Question

我一直在寻找一种在three.js中将uv映射添加到自定义几何中的方法。我已经找到了解决方法，但是没有找到有效的解决方案。谁能解释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;
};

现在，当我尝试向几何图形添加UV贴图时，结果是黑色材质或程序无法运行。

Answer 1

必须将每个面的纹理坐标添加到第一层UV层。
参见THREE.Geometry.faceVertexUvs

在UV层创建并排列：

geo.faceVertexUvs[0] = [];

并为每个三角形面添加3个THREE.Vector2数组：

geo.faceVertexUvs[0].push([
    new THREE.Vector2(u0, v1),
    new THREE.Vector2(u1, v1),
    new THREE.Vector2(u2, v2)
]);

将其应用于您的代码，如下所示：

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();

将纹理添加到自定义three.js几何

1 个答案: