I have been working on customizing the transform controls in three.js for my current project. I successfully modified the rotation part and am now focusing on the translation aspect. In the translation Gizmo, there is an XYZ octahedron at the center. I have removed all other elements and functionalities, focusing solely on that central mesh, and it is functioning well. However, I am facing a minor challenge with the size and position of the controller.
The Octahedron has been changed to a boxGeometry, and I am writing the code to adjust the size of the controller to match the selected object. To achieve this, I thought of making the controller's size equal to the size of the boxHelper acting as the object's outline. I attempted this logic in a sample code where I created a box, obtained the size of the box helper, and then created another box of the same size, which worked perfectly. But when implementing the same code in three.js transform controls, the result was not as expected.
Here is the geometry code snippet:
XYZ: [[ new THREE.Mesh( new THREE.BoxGeometry( 0.1, 0.1, 0.1 ), pickerMaterial )]],
Next, I retrieve the size of box3 when attaching it to an object:
this.addBoxHelper = function () {
this.removeBoxHelper();
if(this.object.box3) {
**this.object.box3.getSize(selectionBoxSize);**
console.log(selectionBoxSize)
this.objectBoxHelper = new THREE.Box3Helper(this.object.box3, 0xffff00);
this.objectBoxHelper.canSelect = function () {
return false;
}
this.object.add(this.objectBoxHelper);
}
}
The following is my update function for transform controls:
this.update = function () {
if ( scope.object === undefined ) return;
scope.object.updateMatrixWorld();
worldPosition.setFromMatrixPosition( scope.object.matrixWorld );
worldRotation.setFromRotationMatrix( tempMatrix.extractRotation( scope.object.matrixWorld ) );
scope.object.box3.getSize(selectionBoxSize);
scope.object.getWorldPosition(selectionBoxPos);
camera.updateMatrixWorld();
camPosition.setFromMatrixPosition( camera.matrixWorld );
camRotation.setFromRotationMatrix( tempMatrix.extractRotation( camera.matrixWorld ) );
**scaleT = selectionBoxSize;**
// For dynamic size change based on camera position
//scaleT.x = worldPosition.distanceTo( camPosition ) / 6 * selectionBoxSize.x;
//scaleT.y = worldPosition.distanceTo( camPosition ) / 6 * selectionBoxSize.y;
//scaleT.z = worldPosition.distanceTo( camPosition ) / 6 * selectionBoxSize.z;
this.position.copy( selectionBoxPos );
this.scale.set( scaleT.x, scaleT.y, scaleT.z);
this.updateMatrixWorld();
Console log output:
TransformControls.js:526 Vector3 {x: 10.020332336425781, y: 2.621583938598633, z: 3.503500819206238}
TransformControls.js:601 Vector3 {x: 10.020332336425781, y: 2.621583938598633, z: 3.503500819206238}
The scale remains the same, but the results are different. The images below illustrate this disparity:
https://i.sstatic.net/I2BbB.png https://i.sstatic.net/dSeFK.png
As shown in the images, the red box at the bottom represents the translation controller, which is smaller than the selection box. Additionally, the pivot points of my objects are at the bottom, and I aim to have this controller positioned at the center of the selection box, but using the getCenter method of box3 has not yielded the desired outcome.
I would greatly appreciate help and guidance. Please let me know if my explanation of the issue is unclear.