javascript - 在 Three.js 中加载随机纹理

Question

假设我有 10 个对象，并且我希望为每个对象提供从 10 个纹理池中随机挑选的纹理。我该如何处理这个网格对象？

for(var int = 0; int <= 10 ; int++)
  { var loader = new THREE.TextureLoader();
    var testMat = new THREE.MeshPhongMaterial({ map: loader.load('images/image1') });
    var testGeo = new THREE.SphereGeometry(50, 50, 50);

    testSphere = new THREE.Mesh(testGeo, testMat);
    testSphere.position.set(distance, 100, 100);
    scene.add(testSphere); }

Answer 1

假设所有纹理图像都以数字/顺序方式命名，您可以这样做:

...
var testMat = new THREE.MeshPhongMaterial({ map: loader.load('images/image' + THREE.Math.randInt(1, 10) ) });
...

如果没有，那么您将以与此类似的方式创建文件名列表，并从列表中选择一个随机值:

var texturesList = [
    'images/image1',
    'images/some-other-image',
    'images/yet-another-image',
    ...
    'images/10th-image'
];
...
...
var randIndex = THREE.Math.randInt(0, texturesList.length - 1);
var randTexture = loader.load(texturesList[randIndex]);
var testMat = new THREE.MeshPhongMaterial({ map: randTexture });
...