Mapping von Bild auf Kugel mit three.js

Question

Ich bin neu bei three.js und ich versuche, eine Cube-Map-Textur auf eine Kugel UV-Karte. Ich habe versucht, eine Würfelkarte auf einen Würfel zu mappen, und das war ziemlich einfach. Ich hatte dieses Bild, das auf den Würfel abgebildet wurde wie folgt: Klicken Sie hier, das Bild zu öffnen

Dies ist die letzte Ausgabe (mit einem anderen Bild, vom gleichen Typ) [Hier klicken, um das Output zu öffnen] [2]

Dies ist, wie ich das UV-Mapping für die oben erwähnte Aufgabe durchgeführt:

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

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

Es gibt nur wenige Dinge, die ich in OpenGL gefunden, aber so gut wie nichts für Three.js

Wenn Sie kommen können mit allem, was mir in ex helfen wird Dies wird eine große Hilfe sein. Wenn möglich, zeige mir bitte, wie man ein Bild auf den entsprechenden Teil der Kugel abbildet und ich mache es für den Rest von ihnen.

Danke!

Answer 1

Ein SphereGeometry hat keine Scheitelpunkte an den richtigen Stellen, um das gewünschte Mapping zu erzielen. Sie können jedoch leicht eine geeignete Geometrie erstellen, indem Sie BoxGeometry zu einer Kugel morphen.

// 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