Добавить текстуру к пользовательской геометрии three.js - PullRequest
Новая
       82

Добавить текстуру к пользовательской геометрии three.js

2 голосов
/ 01 апреля 2019

Я искал способ добавить UV-отображение в мою пользовательскую геометрию в three.js. Я нашел способы сделать это, но ни одно из найденных мной решений не нашло работы. Кто-нибудь может объяснить, как работает ультрафиолетовое картирование и как это сделать правильно? 

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-отображение в мою геометрию, получается черный материал или моя программа не запускается.

1 Ответ

2 голосов
/ 04 апреля 2019

Координаты текстуры должны быть добавлены для каждой грани к 1-му слою УФ-слоя.
См. THREE.Geometry.faceVertexUvs

Создание и массив в УФ-слое: 

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