Отображение изображения на сфере с использованием three.js

Question

Я новичок в three.js и пытаюсь нанести UV на карту текстуры кубической карты на сферу. Я попытался нанести карту куба на куб, и это было довольно легко. У меня было это изображение, которое было отображено на куб следующим образом: Нажмите здесь, чтобы открыть изображение

Это окончательный вывод (с другим изображением того же типа)[Нажмите здесь, чтобы открыть вывод][2]

Вот как я выполнил УФ-картирование для вышеупомянутой задачи:

var geometry = new THREE.CubeGeometry( 10, 10, 10); 

var material = new THREE.MeshPhongMaterial( { map:THREE.ImageUtils.loadTexture('images/texture-atlas.jpg') } );

В OpenGL я нашел несколько вещей, но для Three.js почти ничего

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

Спасибо!

Answer 1

SphereGeometry не имеет вершин в правильных местах для достижения желаемого отображения. Тем не менее, вы можете легко создать подходящую геометрию, морфируя BoxGeometry в сферу.

// geometry
var geometry = new THREE.BoxGeometry( 10, 10, 10, 8, 8, 8 );

// morph box into a sphere
for ( var i = 0; i < geometry.vertices.length; i ++ ) {

    geometry.vertices[ i ].normalize().multiplyScalar( 10 ); // or whatever size you want

}

// texture is a collage; set offset/repeat per material index
var repeat = new THREE.Vector2( 1/3, 1/2 );
var offsets = [ 
    new THREE.Vector2( 0, 0 ),
    new THREE.Vector2( 0, 1/2 ),
    new THREE.Vector2( 1/3, 0 ),
    new THREE.Vector2( 1/3, 1/2 ),
    new THREE.Vector2( 2/3, 0 ),
    new THREE.Vector2( 2/3, 1/2 )
];

// redefine vertex normals consistent with a sphere; reset UVs
for ( var i = 0; i < geometry.faces.length; i ++ ) {

    var face = geometry.faces[ i ];

    face.vertexNormals[ 0 ].copy( geometry.vertices[ face.a ] ).normalize();
    face.vertexNormals[ 1 ].copy( geometry.vertices[ face.b ] ).normalize();
    face.vertexNormals[ 2 ].copy( geometry.vertices[ face.c ] ).normalize();

    var uvs = geometry.faceVertexUvs[ 0 ];

    for ( var j = 0; j < 3; j ++ ) {

        uvs[ i ][ j ].multiply( repeat ).add( offsets[ face.materialIndex ] );

    }

    // face.normal - will not be used; don't worry about it

}

var loader = new THREE.TextureLoader();
var texture = loader.load( 'texture.jpg' );

// mesh
var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { map: texture } ) );
scene.add( mesh );

three.js r.77