在球体上使用多个纹理 [Three.js]答案

【问题标题】：Using multiuple textures on a sphere [Three.js]在球体上使用多个纹理 [Three.js]
【发布时间】：2013-12-19 10:58:08
【问题描述】：

是否可以在一个球体上加载多个纹理？

我的意思是说Three.js 中是否有任何方法可以将球体拆分为n 块，分别对它们进行纹理化，然后将这些块再次渲染为一个完整的球体？

我不想在球体上加载整个纹理，而是只渲染用户首先在屏幕上看到的那些部分，并且当用户旋转球体时，必须加载纹理的其余部分.

此外，当我在球体上使用单个图像时，它似乎会在两极处会聚，从而使情况变得更糟。

【问题讨论】：

你想要达到什么目的，也许还有其他方法可以做到？
我有一个球体，上面投影有全景图像，当我旋转相机时，它会给我 360 度的感觉（相机在球体内）。现在我不想一次加载整个图像。我正在考虑将全景图像切成“n”块并仅加载那些图像以填充用户将首先在屏幕上看到的场景。当用户旋转相机时，必须加载其他图像。
在 THREE.js 中球体是否支持多个纹理？？
它确实支持多种纹理，通过ShaderMaterial。
有什么我可以通过的例子吗？如果您能给我一个链接，将会很有帮助。

标签： javascript three.js webgl

【解决方案1】：

这应该会有所帮助：https://open.bekk.no/procedural-planet-in-webgl-and-three-js 尝试使用立方体并将其扩展为球体，而不是使用球体。立方体球体上的立方体逻辑将为您节省大量时间。

var geometry = new THREE.BoxGeometry( 1, 1, 1, 8, 8, 8 );
for ( var i in geometry.vertices ) {
    var vertex = geometry.vertices[ i ];
    vertex.normalize().multiplyScalar(radius);
}

var materialArray = [];
var faceMaterial = new THREE.MeshLambertMaterial({
    color: sphereColor,
    transparent: true,
    opacity: 0.4
});
for (var i = 0; i < 6; i++) {
    materialArray.push(faceMaterial);
}

var material = new THREE.MeshFaceMaterial(materialArray);
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

【讨论】：

非常注意。修复我的答案以获得更多细节。 @kleopatra，这是一个更好的答案吗？