How to make the helper align with the box

Questions
,
1

Hi,
I have a model where i can drag the box to the location and place them back.
A helper is added to identify the boxes when placed over each other.
I have a rotate button.
when we click on the rotate button and Later click on any box,the box gets rotated but the helper is still in the same position.
Is there anyway to fix this issue.
Thanks
Below is the image of the design after we click rotate and click on the box
and the code snippet

image
image1366×768 42.2 KB

The box is created using the below code

function createcontainer( posX, posY, posZ, length, height, width ,binname) {
 
    // Create the container.
     width = Scalingvalue * width;
     height = Scalingvalue * height;
     length = Scalingvalue * length;
     var geometry = new THREE.BoxGeometry(  width, height, length );
     var material = new THREE.MeshBasicMaterial( { color: 'green'} );
 
     container = new THREE.Mesh( geometry, material );
     outlineContainer = new THREE.BoxHelper( container, '#3E424B' );

     container.name = binname; 
     container.add( outlineContainer );
     scene.add( container );
    tooltipEnabledObjects.push(container);
     objects.push( container );
    collisions.push(container);
     validatearrayfornewbin.push(container); /* new_bin*/
 
    container.position.x =  (width/2) + parseInt(Scalingvalue*posZ);
    container.position.y = ( height / 2) + 0.1; 
    container.position.z =  (length/2)+ parseInt(Scalingvalue*posX) ;
    container.userData.currentPosition = new THREE.Vector3();
  
    }

code for rotating the box done by

     raycaster.setFromCamera(mouse, camera); 
     var intersects = raycaster.intersectObjects(collisions);
      if (intersects.length > 0) {
      
            var item = intersects[0];
   
   var objectHit = item.object;
   var objectHitname = item.object.name;
     controls.enabled = true;

   var geometry = new THREE.BoxGeometry( item.object.geometry.parameters.depth, 
   item.object.geometry.parameters.height, item.object.geometry.parameters.width );
    item.object.geometry = geometry;
   }
    animate();
    return false;

I want to retain the drag as well as rotate operation.
can somebody guide me on this.
i have attached the zip file of entire code
warehousehelper.zip (1.3 MB)

2

Try to call BoxHelper.update() when you change the transformation of your base object.

Keep in mind that BoxHelper visualizes an AABB which means the box will always be axis-aligned. So the bounding box will be never rotated.

3

Hi Michael,

I tried to add outlineContainer.update(item.object) in the rotation code.
by rotate i mean: just switching the width and the depth.
so when i rotate the width and depth is switched but the helper still remains the same and does not get updated.
could you please suggest some other method or any other way to resolve this.

4

Here my question to you

So for object axis aligned Box helper do we need OBB?

Or whats the way to do that?

5

BoxHelper always shows the AABB. Meaning it internally works with Box3.

If you want a helper for OBBs, I suggest you use a simple box mesh and apply the transformation of the OBB like in the official example.

4 Likes