Question

我是three.js的新手，我尝试将立方体贴图纹理UV映射到球体上。我试图将立方体贴图映射到立方体上，这非常简单。我有这个映像映射到立方体，如下所示：点击此处打开图片

这是最终输出（具有相同类型的不同图像）[单击此处打开输出] [2]

这就是我为上述任务执行UV映射的方法：

 <p>{{mov?.Rating}}</p>

我在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

使用three.js在球体上映射图像

1 个答案: