使用three.js映射球體上的圖像

Question

我是three.js的新手，我試圖將立方體貼圖紋理映射到球體上。我試圖將一個立方體貼圖映射到一個立方體上，這很容易。我有這個圖像將其映射到立方體如下：這裏 點擊打開圖像

這是最後的輸出（具有不同的圖像，同一類型的）[點此打開Output] [2]

我這是怎麼進行的UV貼圖爲上述任務：

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

A 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