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

}

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

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

Answer 2

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

迭代回调对象并获取密钥，然后迭代给定的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>');

编写函数以防止冗余

2 个答案: