Question

在标题中，我正在尝试做这样的事情：http://taggalaxy.de/ 我有这些图像，现在我正试图解决如何将它们放在一个球体上的问题。

谢谢！

Answer 1

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

此代码的唯一问题是图像的形状会像一个梯形，并且在其中一个对角线附近会有一些失真。也许更美观的解决方案是在球形区域周围排列一堆PlaneGeometry对象？如果是这样，我会在http://mrdoob.github.io/three.js/examples/css3d_periodictable.html

查看示例的源代码

three.js - 在一个Sphere上放置多个纹理/图像的最佳方法是什么？

1 个答案: