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

Question

我想知道，如果你在 THREE.JS 的 Geometry 实例中设置更多的段，例如:

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

您会看到您的平面被分成(如果打开线框模式)为 10x10 的部分。

是否可以将一些生成的图像(例如 map 片段)应用到具有以下图像( map 的一部分)的平面(或其他几何对象)的每个部分？

我只想创建一个平面并将许多图像应用到它的每个部分(当然要先准备好圆形部分)，这样它看起来就像一张 map 。

如果可以，怎么做？ 我是 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