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

Question

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

谢谢!

Answer 1

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

编辑:下面的示例代码

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);

此代码的唯一问题是图像的形状将像梯形，并且在对 Angular 线之一附近会出现一点变形。也许更美观的解决方案是在球形区域周围排列一堆 PlaneGeometry 对象？如果是这样，我在以下位置查看示例的源代码:http://mrdoob.github.io/three.js/examples/css3d_periodictable.html