如何将大量图像应用于Three.js中的平面段

Question

我想知道，如果你在THREE.JS的几何实例中设置更多的分段，例如：

new THREE.PlaneGeometry(1, 1, 10, 10);

您将看到您的飞机被划分（如果要打开线框模式）为10x10个零件。

是否可以使用以下图像（地图的一部分）应用一些生成的图像（例如地图片段）和平面（或其他几何对象）的每个片段？

我想创建一个平面并将许多图像应用到它的每个部分（当然，以及准备好的部分），所以它看起来像地图。

如果有可能，怎么做？ 我是WebGL/THREE.JS的新手，所以我需要帮助。

PS主要的是我不会询问具有相同纹理的重复段，而是要为一个几何对象使用大量不同的纹理并将它们应用到其段中。

感谢您的建议！

Answer 1

您可以覆盖UV以在脸部上映射图像

geometry.faceVertexUvs[0].push([
        new THREE.Vector2( 0,0 ),
        new THREE.Vector2( 0,1 ),
        new THREE.Vector2( 1,1 ),    
        new THREE.Vector2( 1,0 ),    
]);

并为面部设置materialIndex。

geometry.faces[i].materialIndex = i;
materials.push(material);

Full example in jsfiddle