javascript - Three.js 在 10 个随机对象上生成颜色

Question

我正在尝试创建一个函数来更改随机选择的 10 个对象的 material 颜色，但我不知道如何将其“连接”到数组或向量中。我尝试将一些数组(如 meshArrayX)放入 color(selector) 中，但随后，对象的位置未定义，并且根本不会为任何对象着色。

var mesh, scene,
    MeshBasicMaterial = new THREE.MeshBasicMaterial({
      color: 0x000000,
      opacity: 0.3,
      transparent: true
    });
var BoxGeometry = new THREE.BoxGeometry(16, 16, 16);

function random(){
        var random = [0, 16, 32];
        var randomValue = random[Math.floor(random.length * Math.random())];
        console.log(randomValue);
}

function color(selector){
  for(var v=0; v<10; v++){
    selector.position.x = random();
    selector.position.y = random();
    selector.position.z = random();
    selector.material.color.setHex( 0x0000ff);
  }
}

var meshArrayX = [];
for (var x=0; x<3; x++) {
  var meshArrayY = [meshArrayX.push(mesh = new THREE.Mesh(BoxGeometry, MeshBasicMaterial))];
  for(var y=0; y<3; y++){
    var meshArrayZ = [meshArrayY.push(mesh = new THREE.Mesh(BoxGeometry, MeshBasicMaterial))];
    for(var z=0; z<3; z++){
      meshArrayZ.push(mesh = new THREE.Mesh(BoxGeometry, MeshBasicMaterial));
      mesh.position.x = 16*x;
      mesh.position.y = 16*y;
      mesh.position.z = 16*z;
      scene.add(mesh);


      console.log(meshArrayX.length, meshArrayY.length-1, meshArrayZ.length-1, mesh.position);
    }
  }
}
color(mesh);

Answer 1

我不确定我是否理解您的问题，但我会尽力帮助您。

我认为您想要创建一个 27 个盒子 (3x3x3) 的数组，但我不明白您的代码...，您使用全局变量网格，但仅在 z 循环中添加到场景。

我的此操作的代码是:

var BoxGeometry = new THREE.BoxGeometry(5, 5, 5);
var meshArray = [];
for (var x=0; x<3; x++) {
  for(var y=0; y<3; y++){
    for(var z=0; z<3; z++){
      var mesh = new THREE.Mesh(BoxGeometry, material.clone());
      meshArray.push(mesh);
      mesh.position.x = 16*x;
      mesh.position.y = 16*y;
      mesh.position.z = 16*z;
      scene.add(mesh);  
      console.log(meshArray.length, mesh.position);
    }
  }
}

请注意，为每个网格创建新的 Material 实例需要“material.clone()”。

你的颜色函数可以是这样的:

function color(selector){
  for(var v=0; v<10; v++){
   var pos= Math.floor((Math.random() * selector.length));

    selector[pos].material.color.setHex( 0x0000ff );
  }
}

调用者:

color(meshArray);

现在，当您调用颜色函数时，您可以从数组中随机选择 10 个框并应用颜色。

希望对你有用