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;
}
но это дало ему этот странный растянутый взгляд
моя логика неверна? Есть ли более простой способ применить квадратную или прямоугольную текстуру к кубической сфере?, я генерирую текстуры в реальном времени, поэтому дополнительная работа над самими текстурами на самом деле не вариант, и, поскольку я не компьютерная графика, я не действительно готов перейти на уровень шейдеров.
Может ли кто-нибудь найти лучшее решение или указать мне в направлении некоторого материала для чтения, который поможет мне, большое спасибо.
РЕДАКТИРОВАТЬ: Ну, вроде как решил, и не совсем моя проблема, функция была ошибка и исправила ее в соответствии с этим руководством сферического УФ-картографирования.
Теперь функция выглядит так:
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;
}
и дает мне этот результат:
И хотя пока выглядит лучше, шов все же есть. Ну, может быть, это поможет кому-то в будущем. Любые идеи приветствуются, спасибо.