javascript - 编写一个函数来防止冗余

Question

我刚刚开始学习 Javascript，我认为通过使用函数可以减少我正在做的事情的冗余，但是我不确定如何构建它。我不是要求别人为我编写该函数，而是让我走上正确的轨道。

我的项目的目标是能够将动态纹理映射到每个立方体，每个立方体都指向一个唯一的链接。使用this例如，我已经能够成功地将唯一的纹理映射到每个立方体，但正如我之前提到的，我的解决方案非常多余。

       for ( var i = 0; i < 16; i++ ) {




   var object = new THREE.Mesh( geometry, materialArray[0]);
          object.position.x = Math.random() * 800;
          object.position.y = Math.random() * 800;
          object.position.z = Math.random() * 800;

          object.rotation.x = Math.random() * 2 * Math.PI;
          object.rotation.y = Math.random() * 2 * Math.PI;
          object.rotation.z = Math.random() * 2 * Math.PI;

          object.scale.x = Math.random() + 0.5;
          object.scale.y = Math.random() + 0.5;
          object.scale.z = Math.random() + 0.5;

          object.name ="object";

   var object2 = new THREE.Mesh( geometry, materialArray[1] );
          object2.position.x = Math.random() * 800 - 400;
          object2.position.y = Math.random() * 800 - 400;
          object2.position.z = Math.random() * 800 - 400;

          object2.rotation.x = Math.random() * 2 * Math.PI;
          object2.rotation.y = Math.random() * 2 * Math.PI;
          object2.rotation.z = Math.random() * 2 * Math.PI;

          object2.scale.x = Math.random() + 0.5;
          object2.scale.y = Math.random() + 0.5;
          object2.scale.z = Math.random() + 0.5;

           object2.name ="object2";

     var object3 = new THREE.Mesh( geometry, materialArray[2] );
          object3.position.x = Math.random() * 800 - 400;
          object3.position.y = Math.random() * 800 - 400;
          object3.position.z = Math.random() * 800 - 400;

          object3.rotation.x = Math.random() * 2 * Math.PI;
          object3.rotation.y = Math.random() * 2 * Math.PI;
          object3.rotation.z = Math.random() * 2 * Math.PI;

          object3.scale.x = Math.random() + 0.5;
          object3.scale.y = Math.random() + 0.5;
          object3.scale.z = Math.random() + 0.5;

           object3.name ="object3";

    var object4 = new THREE.Mesh( geometry, materialArray[3] );
          object4.position.x = Math.random() * 800 - 400;
          object4.position.y = Math.random() * 800 - 400;
          object4.position.z = Math.random() * 800 - 400;

          object4.rotation.x = Math.random() * 2 * Math.PI;
          object4.rotation.y = Math.random() * 2 * Math.PI;
          object4.rotation.z = Math.random() * 2 * Math.PI;

          object4.scale.x = Math.random() + 0.5;
          object4.scale.y = Math.random() + 0.5;
          object4.scale.z = Math.random() + 0.5;

           object4.name ="object4";

    var object5 = new THREE.Mesh( geometry, materialArray[4] );
          object5.position.x = Math.random() * 800 - 400;
          object5.position.y = Math.random() * 800 - 400;
          object5.position.z = Math.random() * 800 - 400;

          object5.rotation.x = Math.random() * 2 * Math.PI;
          object5.rotation.y = Math.random() * 2 * Math.PI;
          object5.rotation.z = Math.random() * 2 * Math.PI;

          object5.scale.x = Math.random() + 0.5;
          object5.scale.y = Math.random() + 0.5;
          object5.scale.z = Math.random() + 0.5;

           object5.name ="object5";

}

我已经创建了一系列 Material ，因此我能够为每个立方体引用唯一的 Material ，但我似乎不知道如何为对象执行此操作。我相信编写一个函数来生成对象就是解决方案，只需要一个提示即可让我走上正确的轨道。

Answer 1

在这种情况下，它实际上就是复制和粘贴。由于代码实际上并没有引用太多，因此很容易将所需的变量作为参数传递:

function createMesh(name, geometry, material) {
     var object = new THREE.Mesh( geometry, material );
     object.position.x = Math.random() * 800 - 400;
     object.position.y = Math.random() * 800 - 400;
     object.position.z = Math.random() * 800 - 400;

     object.rotation.x = Math.random() * 2 * Math.PI;
     object.rotation.y = Math.random() * 2 * Math.PI;
     object.rotation.z = Math.random() * 2 * Math.PI;

     object.scale.x = Math.random() + 0.5;
     object.scale.y = Math.random() + 0.5;
     object.scale.z = Math.random() + 0.5;

     object.name = name;
}

然后在循环中使用它就非常简单了:

for (var i = 1; i < 5; ++i) {
    createMesh("object" + i, geometry, materialArray[i]);
}

我还考虑编写用于随机位置和旋转的实用程序:

function randomRotation() {
     var rotation = {};
     rotation.x = Math.random() * 2 * Math.PI;
     rotation.y = Math.random() * 2 * Math.PI;
     rotation.z = Math.random() * 2 * Math.PI;
}

function randomPosition(min, max) {
    var position = {};
    position.x = Math.random() * (max.x-min.x) + min.x;
    position.y = Math.random() * (max.y-min.y) + min.y;
    position.z = Math.random() * (max.z-min.z) + min.z;
}

然后您可以使用:

object.rotation = randomRotation();
object.position = randomPosition({x: -400, y: -400, z: -400}, {x: 400, y: 400, z: 400});