三.js 创建多个对象答案

【问题标题】：Three.js Create multiple objects三.js 创建多个对象
【发布时间】：2023-03-19 04:51:01
【问题描述】：

我想创建多个对象。

    var distance = 10;
    var geometry = new THREE.BoxGeometry(10,10,10);
    var material = new THREE.MeshBasicMaterial({color:0x00ff44});

    for(var i = 0; i < 4;i++){
        var mesh  = new THREE.Mesh(geometry, material);
        mesh.position.z = distance;
        scene.add(mesh);
        distance += 5;
    };`

我使用此代码创建它，但仅在一行中。我想在第一行的后面创建更多行。喜欢这张图片：

What i want to create - Image

我想在 Red X 位置上有更多的立方体。

【问题讨论】：

标签： javascript for-loop three.js

【解决方案1】：

var xDistance = 50;
var zDistance = 30;
var geometry = new THREE.BoxGeometry(10,10,10);
var material = new THREE.MeshBasicMaterial({color:0x00ff44});

//initial offset so does not start in middle.
var xOffset = -80;

for(var i = 0; i < 4; i++){
    for(var j = 0; j < 3; j++){
            var mesh  = new THREE.Mesh(geometry, material);
            mesh.position.x = (xDistance * i) + xOffset;
            mesh.position.z = (zDistance * j);
            scene.add(mesh);
    }
};

See this fiddle

【讨论】：