Center pivot in a group of 3D objects in ThreeJS

Question

I am curently developing a prototype of a plugin that will enable customization of 3D objects trough ThreeJS. What I have so far done, can be seen here:

http://itemgl.kaleidoscop.net/

As you might have seen, when you hover either left arrow or right arrow, the object rotates having its origin point in the left-top corner. Anyone have any idea of how to change that in ThreeJS?

Here is the code:

var options =  $.extend({
    id: 'canvas',
    width: 1110,
    height: 650,
    clearColor: 0xEEEEEE,
    btnLeft: $('#btnPrevious'),
    btnRight: $('#btnNext'),
    imagesLeather: ('.imageWood'),
    imagesWood: ('.imageWood'),
    core: {object: [], renderer: null, camera: null, scene: null, light: null, canvas: null, spotLight: null, group: null, interval: null},
    items: {wood: null, leather: null},
    geometry: {ground: null, cube: null},
    numObj: 7,
    objGeometry: [{x: 15, y: 1, z: 15}, {x: 2, y: 16, z: 2}, {x: 2, y: 16, z: 2}, {x: 2, y: 32, z: 2}, {x: 2, y: 32, z: 2},{x: 12, y: 3, z: 1},{x: 12, y: 3, z: 1}],
    objPosition: [{x: 8, y: 6, z: 3}, {x: 1, y: -2, z: 10}, {x: 15, y: -2, z: 10}, {x: 1, y: 6, z: -5}, {x: 15, y: 6, z: -5}, {x: 8, y: 20, z: -5}, {x: 8, y: 15, z: -5}],
    objType: ['Leather', 'Wood', 'Wood', 'Wood', 'Wood','Leather','Leather']
}, options);

var methods = {

    init: function(settings){

        if(typeof settings === 'object'){
            $.extend(settings, this.options);
        }

        options.core.scene = new THREE.Scene();
        options.core.camera = new THREE.PerspectiveCamera(50, options.width/options.height, 0.1, 1000);
        options.core.renderer = new THREE.WebGLRenderer();
        options.core.renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        options.core.renderer.setSize(options.width, options.height);
        options.core.renderer.shadowMapEnabled = true;
        options.core.group = new THREE.Object3D();  
        options.core.group.position.x = 5;          
        for(var i=0; i<options.numObj; i++){
            var cubeGeometry = new THREE.BoxGeometry(options.objGeometry[i].x, options.objGeometry[i].y, options.objGeometry[i].z);
            options.core.object[i] = methods.addMaterial(cubeGeometry, 'images/Resources/UVMap.png');
            options.core.object[i].receiveShadow = true;
            options.core.object[i].position.x = options.objPosition[i].x;
            options.core.object[i].position.y = options.objPosition[i].y;
            options.core.object[i].position.z = options.objPosition[i].z;
            options.core.group.add(options.core.object[i]);
        }
        options.core.scene.add(options.core.group);
        options.core.camera.position.x = 10;
        options.core.camera.position.y = 30;
        options.core.camera.position.z = 60;
        options.core.camera.lookAt(new THREE.Vector3(10, 0, 0));
        options.core.light = new THREE.AmbientLight(0x0c0c0c);
        options.core.scene.add(options.core.light);
        options.core.spotLight = new THREE.SpotLight(0xffffff);
        options.core.spotLight.position.set(-30, 60, 60);
        options.core.spotLight.castShadow = true;
        options.core.scene.add(options.core.spotLight);
        $("#"+options.id).append(options.core.renderer.domElement);
        methods.render();
        methods.setupButtons();         
        options.core.renderer.render(options.core.scene, options.core.camera);
    },

    setupButtons: function(){
        options.btnLeft.hover(
          function(){
            options.core.interval = window.setInterval(function(){
                options.core.group.rotation.y += 0.05;
                options.core.renderer.render(options.core.scene, options.core.camera);
            }, 15);
          }, function() {
            window.clearInterval(options.core.interval);
          }
        );
        options.btnRight.hover(
          function(){
            options.core.interval = window.setInterval(function(){
                options.core.group.rotation.y -= 0.05;
                options.core.renderer.render(options.core.scene, options.core.camera);
            }, 15);
          }, function() {
            window.clearInterval(options.core.interval);
          }
        );
    },

    render: function(){
        requestAnimationFrame(methods.render);  
        options.core.renderer.render(options.core.scene, options.core.camera);
    },

    changeItem: function(type, obj){
        var texture = THREE.ImageUtils.loadTexture(obj.firstChild.src);
        for(var i=0; i<options.numObj; i++){
            if(options.objType[i] == type){
                options.core.object[i].material.map = texture;
            }           
        }
    },

    addMaterial: function(geom, imageFile){
        var texture = THREE.ImageUtils.loadTexture(imageFile)
        var mat = new THREE.MeshPhongMaterial();
        mat.map = texture;
        mat.needsUpdate = true;
        var mesh = new THREE.Mesh(geom, mat);
        return mesh;
    }

};

$.fn.ItemGL = function(method){

    if(typeof method === 'undefined'){
        method = 'init';    
    }
    if(methods[method]){
        return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1));
    }else if(typeof method === 'object' || !method){
        return methods.init.apply(this, arguments);
    }else{
        $.error('Method '+ method+' does not exist on jQuery');
    }    
};

Answer 1

group.applyMatrix( new THREE.Matrix4().makeTranslation( x,y,z ) );

what you can see in many other questions, didn't do the job for me. Maybe because it's a group and not a single object.

My solution (a bit long, but it worked for me):

1. finding out the center of all objPosition values

   var maxTrans  = {x:0, y:0, z:0};
   var minTrans  = {x:0, y:0, z:0};
   var translate2Center = {x:0, y:0, z:0};
   for(var i=0; i<options.objPosition.length; i++) {
       var temp = options.objPosition[i];
   
       if (temp.x > maxTrans.x) maxTrans.x = temp.x;
       else if (temp.x < minTrans.x) minTrans.x = temp.x;
       if (temp.y > maxTrans.y) maxTrans.y = temp.y;
       else if (temp.y < minTrans.y) minTrans.y = temp.y;
       if (temp.z > maxTrans.z) maxTrans.z = temp.z;
       else if (temp.z < minTrans.z) minTrans.z = temp.z;
   }
   translate2Center.x = minTrans.x + (maxTrans.x-minTrans.x)/2;
   translate2Center.y = minTrans.y + (maxTrans.y-minTrans.y)/2;
   translate2Center.z = minTrans.z + (maxTrans.z-minTrans.z)/2;
   

2. Translate each object before adding to group

   for(var i=0; i<options.numObj; i++){
   
       options.core.object[i].position.x = options.objPosition[i].x - translate2Center.x;
       options.core.object[i].position.y = options.objPosition[i].y - translate2Center.y;
       options.core.object[i].position.z = options.objPosition[i].z - translate2Center.z;
       options.core.group.add(options.core.object[i]);
   }
   

3. Move the whole group back

   options.core.group.applyMatrix( new THREE.Matrix4().makeTranslation(
         translate2Center.x, translate2Center.y, translate2Center.z)
   );