编写函数以防止冗余

Writing a function to prevent redundancy

本文关键字：冗余 函数      更新时间：2023-09-26

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

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

       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";
}

我已经创建了一个材质数组，因此我能够为每个立方体引用一种独特的材质，但我似乎无法弄清楚如何为对象执行此操作。我相信编写一个函数来生成对象是解决方案，只需要一个提示就可以让我走上正确的轨道。

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

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

也许你正在寻找这样的东西：

它遍历回调对象并获取键，然后迭代给定的 obejct 并为对象中的每个属性分配调用回调。

var object = {
        position: { x: 0, y: 0, z: 0 },
        rotation: { x: 0, y: 0, z: 0 },
        scale: { x: 0, y: 0, z: 0 }
    },
    callback = {
        position: function () { return Math.random() * 800; },
        rotation: function () { return Math.random() * 2 * Math.PI; },
        scale: function () { return Math.random() + 0.5; }
    }
function set(object, cb) {
    Object.keys(cb).forEach(function (k) {
        Object.keys(object[k]).forEach(function (kk) {
            object[k][kk] = cb[k]();
        });
    });
}
set(object, callback);
document.write('<pre>' + JSON.stringify(object, 0, 4) + '</pre>');

相关文章：