在three.js中加载随机纹理

时间:2016-10-28 18:24:13

标签: javascript three.js

假设我有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); }

1 个答案:

答案 0 :(得分:3)

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

...
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 });
...