THREE.js текстурирование на кубической сфере

Я пытаюсь текстурировать кубическую сферу, куб превратился в сферу с помощью этой гномической проекции, теперь я пытаюсь текстурировать ее с помощью одной квадратной или прямоугольной текстуры, созданной с помощью перлин-шума. этот

Затем я попытался использовать этот код сопоставления ультрафиолетовых лучей из codepen, но это оставило шов на спине. Вот

я думаю, что мне нужен ответ сферического отображения на этот вопрос, но я не уверен, как его применить, я попытался использовать его следующим образом:

function assignUVs3(geometry) {

    geometry.faceVertexUvs[0] = [];

    geometry.faces.forEach(function(face) {

        var uvs = [];
        var ids = [ 'a', 'b', 'c'];
        for( var i = 0; i < ids.length; i++ ) {
            var vertex = geometry.vertices[ face[ ids[ i ] ] ].clone();

            var n = vertex.normalize();
            var u = .5 - Math.atan( n.z, - n.x ) / ( 2.0 * Math.PI );
            var v = .5 - Math.asin( n.y ) / Math.PI;
            uvs.push( new THREE.Vector2( u, v ) );
        }
        geometry.faceVertexUvs[ 0 ].push( uvs );
    });

    geometry.uvsNeedUpdate = true;
}

но это дало ему этот странный растянутый взгляд image3

моя логика неверна? Есть ли более простой способ применить квадратную или прямоугольную текстуру к кубической сфере?, я генерирую текстуры в реальном времени, поэтому дополнительная работа над самими текстурами на самом деле не вариант, и, поскольку я не компьютерная графика, я не действительно готов перейти на уровень шейдеров.

Может ли кто-нибудь найти лучшее решение или указать мне в направлении некоторого материала для чтения, который поможет мне, большое спасибо.

РЕДАКТИРОВАТЬ: Ну, вроде как решил, и не совсем моя проблема, функция была ошибка и исправила ее в соответствии с этим руководством сферического УФ-картографирования.

Теперь функция выглядит так:

function assignUV(geometry) { 
    geometry.faceVertexUvs[0] = []; 
    geometry.faces.forEach(function(face) { 
       var uvs = [];
       var ids = [ 'a', 'b', 'c'];
       for( var i = 0; i < ids.length; i++ ) {
           var vertex = geometry.vertices[ face[ ids[ i ] ] ].clone();
           var n = vertex.normalize();
           var u =  .5 + Math.atan2( n.z, - n.x ) / ( 2.0 * Math.PI ) ;
           var v =  .5 - Math.asin(n.y) / Math.PI ;
           uvs.push( new THREE.Vector2( u, v ) );
       }
       geometry.faceVertexUvs[ 0 ].push( uvs );
   });
   geometry.uvsNeedUpdate = true;
}

и дает мне этот результат: Текстурированная планета

И хотя пока выглядит лучше, шов все же есть. Ну, может быть, это поможет кому-то в будущем. Любые идеи приветствуются, спасибо.

0 ответов

Другие вопросы по тегам