Resizing without stretching the child objects

Questions
1 
cubeGeo = new THREE.BoxGeometry(barSize, barSize, modSize);
    cubeMaterial = new THREE.MeshMatcapMaterial({ color: 0xe7e8e3 });

    spliterV1 = new THREE.Mesh(cubeGeo, cubeMaterial);
    spliterV1.position.set(5, 10, 6);
    spliterV1.name = "spliterV1";

    spliterV3 = new THREE.Mesh(cubeGeo, cubeMaterial);
    spliterV3.position.set(5, 0, 6);
    spliterV3.name = "spliterV3";

    cubeGeo = new THREE.BoxGeometry(barSize, modSize, barSize);

    spliterV5 = new THREE.Mesh(cubeGeo, cubeMaterial);
    spliterV5.position.set(5, 5, 11);
    spliterV5.name = "spliterV5";

    spliterV7 = new THREE.Mesh(cubeGeo, cubeMaterial);
    spliterV7.position.set(5, 5, 1);
    spliterV7.name = "spliterV7";

    spliterVContainer = new THREE.Group();

    spliterVContainer.add(spliterV1, spliterV3, spliterV5, spliterV7);

    editor.execute(new AddObjectCommand(editor, spliterVContainer));
``
I have this object in my three.js workspace and I need to resize this.When resizing only spliterV1, spliterV3 should be scaled along X axis keeping spliterV5 still  and only spliterV5, spliterV7 should scale along Y axis keeping spliterV3 still..I am using transform controls to make it functional like this.

for (let i = 0; i < object.children.length; i++) {
const scaleSensitivity = 0.1;
// console.log(object.children[i])
if (axis === ‘X’ ) {
// Calculate the scale factor for the X-axis
_tempVector.copy(this.pointStart);
_tempVector2.copy(this.pointEnd);

            _tempVector.applyQuaternion(this._worldQuaternionInv);
            _tempVector2.applyQuaternion(this._worldQuaternionInv);
    
            _tempVector2.divide(_tempVector);
     else if 
        (
        object.children[i].name === "spliterV1" ||
        object.children[i].name === "spliterV3" 


        ) {

            var adjustedScaleFactor = Math.pow(_tempVector2.x, scaleSensitivity);   
            var newScaleX = object.children[i].scale.x*(adjustedScaleFactor) ;
            object.children[i].scale.x= newScaleX;
            const newPosition3 = new THREE.Vector3( newScaleX*5.3,object.children[i].position.y, object.children[i].position.z );

            editor.execute(new SetPositionCommand(editor, object.children[i], newPosition3));

        }else if 
        (
        object.children[i].name === "spliterV5" 


        ) {
        var adjustedScaleFactor = Math.pow(_tempVector2.x*0.98, scaleSensitivity);
        var newScaleX = object.children[i].scale.x* adjustedScaleFactor;
        object.children[i].position.x*=newScaleX;

        }


but it seems its not quite correct...
![Untitled|452x341](upload://a2DbmP1BBjYMmCxvXYnq5xReDC2.png)
2

let container = theChild.parent;
scene.attach( theChild )
//Resize container here…
container.scale.x *= 2;
//Then attach the child back to it…
container.attach(theChild)

1 Like