javascript - three.js - 将多个纹理/图像放在单个球体上的最佳方法是什么？

Question

如标题所示，我正在尝试做这样的事情：http : //taggalaxy.de/ 我有图像，现在我试图不明白如何将它们放在一个球体上。

谢谢！

Answer 1

首先，您需要更改球体中使用的默认 UV 坐标，以便每个正方形区域的角获得 UV 坐标 (0,0)、(1,0)、(0,1) 和 (1,1) . 然后，在创建网格时，为材质使用 MeshFaceMaterial，它应该包含要在球体上使用的材质数组。最后，对于网格几何体中的每个面，您需要将 materialIndex 字段设置为数组中材质的相应索引。对于相关问题，您应该查看：Three.js - 多材质平面

编辑：下面的示例代码

var v00 = new THREE.Vector2(0,0);
var v01 = new THREE.Vector2(0,1);
var v10 = new THREE.Vector2(1,0);
var v11 = new THREE.Vector2(1,1);

var m1 = new THREE.MeshBasicMaterial( {map:  new THREE.ImageUtils.loadTexture('images/background.jpg') } );
var m2 = new THREE.MeshBasicMaterial( { map:  new THREE.ImageUtils.loadTexture('images/special-square.png') } );
var m  = new THREE.MeshFaceMaterial( [m1, m2] );

var g = new THREE.SphereGeometry( 60, 6, 5 );
g.faces[6].materialIndex = 1;
g.faces[7].materialIndex = 1;
g.faceVertexUvs[0][6] = [ v11.clone(), v01.clone(), v10.clone() ] ;
g.faceVertexUvs[0][7] = [ v01.clone(), v00.clone(), v10.clone() ] ;

mesh = new THREE.Mesh( g, m );
scene.add(mesh);

这段代码的唯一问题是图像的形状会像梯形，并且在其中一条对角线附近会有一点失真。也许更美观的解决方案是在球形区域周围安排一堆 PlaneGeometry 对象？如果是这样，我在以下位置查看示例的源代码：http: //mrdoob.github.io/three.js/examples/css3d_periodictable.html