使用three.js在球体上映射图像 [英] mapping of image on sphere using three.js

问题描述

我正在尝试将立方体贴图纹理 UV 映射到球体上.我尝试将立方体贴图映射到立方体上，这很容易.我有这张映射到立方体上的图像，如下所示:点击这里打开图片

I'm trying to UV map a cube-map texture onto a sphere. I have tried to Map a cube-map onto a cube and it was pretty easy. I had this image which was mapped onto the cube as follows: Click here to open image

这是最终的输出(不同的图像，相同的类型)[点击这里打开输出][2]

This is the final output (with a different image, of same type)[Click here to open the Output][2]

这是我为上述任务执行 UV 映射的方式:

This is how I carried out the UV mapping for the aforementioned task:

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

我在 OpenGL 中发现的东西很少，但对于 Three.js 几乎没有

There are few things that I found in OpenGL, but almost nothing for Three.js

如果您能想出任何有助于我执行此操作的方法，那将是一个很大的帮助.如果可能，请告诉我如何将一张图片映射到球体的相应部分，我会为其余部分做这件事.

If you can come up with anything that'll help me in executing this, it'll be a great help. If possible, please show me how to map one image onto corresponding part of the sphere and I'll do it for the rest of them.

推荐答案

SphereGeometry 在正确位置没有顶点来实现您想要的映射.但是，您可以通过将 BoxGeometry 变形为球体来轻松创建合适的几何体.

A SphereGeometry does not have vertices in the correct locations to achieve the mapping you want. However, you can easily create a suitable geometry by morphing BoxGeometry into a sphere.

// 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 r.77

这篇关于使用three.js在球体上映射图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！