Javascript 如何使一组对象居中？

我开始使用Three.js（新手），但我不知道如何更改一组对象的中心原点。在本例中，您可以看到原点设置为添加到编组的第一个对象，问题是如何将此原点设置为编组中心

var three = THREE;

var scene = new three.Scene();
var camera = new three.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

var renderer = new three.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);
camera.position.z = 30;
var cubeMatrix = new THREE.Object3D();

var nextHeight = 0;
for(var j = 0, x = 0, y = 0; j < 220; j++, x++) {
var z = Math.floor(Math.random() * 12) + 1;
    var geometry = new THREE.BoxGeometry(1,  1 , z);

    var material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});

    var color = Math.random() * 0xFFFFFF;

    for(var i = 0; i < geometry.faces.length; i += 2) {
        geometry.faces[i].color.setHex(color);
      geometry.faces[i + 1].color.setHex(color);
    }
    var cube = new THREE.Mesh(geometry, material);
    cube.position.set(x,y,z/2);

    if (x === 10) {
        x = -1;
      y++;
    }

    //cube.position.y = y * 1;
    cubeMatrix.add(cube);

}

scene.add(cubeMatrix);
scene.add(new THREE.AxisHelper());


var isDragging = false;
var previousMousePosition = {
    x: 0,
    y: 0
};
$(renderer.domElement).on('mousedown', function(e) {
    isDragging = true;
})
.on('mousemove', function(e) {
    //console.log(e);
    var deltaMove = {
        x: e.offsetX-previousMousePosition.x,
        y: e.offsetY-previousMousePosition.y
    };

    if(isDragging) {

        var deltaRotationQuaternion = new three.Quaternion()
            .setFromEuler(new three.Euler(
                (Math.PI / 180) * (deltaMove.y * 1),
                (Math.PI / 180) * (deltaMove.x * 1),
                0,
                'XYZ'
            ));

        cubeMatrix.quaternion.multiplyQuaternions(deltaRotationQuaternion, cubeMatrix.quaternion);
    }

    previousMousePosition = {
        x: e.offsetX,
        y: e.offsetY
    };
});
/* */

$(document).on('mouseup', function(e) {
    isDragging = false;
});



// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

function render() {
    renderer.render(scene, camera);
    requestAnimFrame(render);
}

render();

var三=三；
var scene=new three.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new three.WebGLRenderer（{antialas:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
摄像机位置z=30；
var cubeMatrix=new THREE.Object3D（）；
var nextHeight=0；
对于（变量j=0，x=0，y=0；j<220；j++，x++）{
Varz=Math.floor（Math.random（）*12）+1；
var geometry=新的3.BoxGeometry（1,1,z）；
var material=新的三个.MeshBasicMaterial（{vertexColors:THREE.vertexColors}）；
var color=Math.random（）*0xFFFFFF；
对于（变量i=0；i

通过

var bbox=new THREE.Box3（）.setFromObject（cubeMatrix）；

将

cubeMatrix

置换为边界框长度和宽度的负一半：

cubeMatrix.position.set（-（bbox.min.x+bbox.max.x）/2，-（bbox.min.y+bbox.max.y）/2,0）；

将

cubeMatrix

添加到另一组

pivot

：

var pivot=new THREE.Group（）；
pivot.add（立方体矩阵）；

并将组

pivot

添加到场景中：

scene.add（pivot）；

在

“mousemove”

事件中，旋转组

轴

，而不是

立方体矩阵

：

if（isDraging）{
var deltaRotationQuaternion=new three.Quaternion（）
.setFromEuler（新的三个.Euler(
（数学PI/180）*（deltaMove.y*1），
（数学PI/180）*（deltaMove.x*1），
0,
“XYZ”
));
pivot.quaternion.MultiplyQuaternion（三角旋转四元数，pivot.quaternion）；
}

请参见示例，其中我将更改应用于原始代码：

var三=三；
var scene=new three.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new three.WebGLRenderer（{antialas:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
container=document.getElementById（'container'）；
container.appendChild（renderer.domeElement）；
摄像机位置z=30；
var cubeMatrix=new THREE.Object3D（）；
var nextHeight=0；
对于（变量j=0，x=0，y=0；j<220；j++，x++）{
Varz=Math.floor（Math.random（）*12）+1；
var geometry=新的3.BoxGeometry（1,1,z）；
var material=新的三个.MeshBasicMaterial（{vertexColors:THREE.vertexColors}）；
var color=Math.random（）*0xFFFFFF；
对于（变量i=0；i