The dimensions of the object in millimeters in Three.js?

[belyavsky]

It is necessary to display cubes on the plane, their dimensions are given in mm. and their coordinates in mm. When I transmit this data to THREE, huge holes are obtained between the cubes, although they stand wall to wall, tell me how to convert the units correctly so that it looks like reality?

  const itemGeometry = new THREE.BoxGeometry(200, 200, 100); // mm.
  const itemMaterial = new THREE.MeshNormalMaterial({ color: 0xffffff }); 
  const mesh = new THREE.Mesh(itemGeometry, itemMaterial);
  
  // mm. from 0.0.0
  mesh.position.x = 0;
  mesh.position.y = 100;
  mesh.position.z = 200;

Example

[hofk]

Your code results in only one cube.
Please post a live example (jsfiddle, codepen) that gives your image.

see also Units in Three.js

[Chaser_Code]

In three.js 1 unit is 1 meter.

const itemGeometry = new THREE.BoxGeometry(2, 2, 1); // meter.
const itemMaterial = new THREE.MeshNormalMaterial({ color: 0xffffff }); 
const mesh = new THREE.Mesh(itemGeometry, itemMaterial);
  
// mm. from 0.0.0
mesh.position.x = 0;
mesh.position.y = 1;
mesh.position.z = 2;

Without holes: First box position 0,0,0 second box position 2,0,0 third box 4,0,0 etc

[belyavsky]

Hi!
I have created an example, please tell me where is my mistake?

[belyavsky]

Hi!
I ve created an example, please tell me where is my mistake?

[Lawrence3DPK]

Three’s units are in meters, you are also setting your scales to 0.1 so should only be moving the cubes by a factor of 0.1…

[belyavsky]

I added, but is it only the conversion of units, or do I not understand something?

var mUnit = 1000;
itemPositionLength = containers[index]['position']['length'] / mUnit;
itemLength = (containers[index]['rotation']['length'] - gap) / mUnit;

[belyavsky]

Using the experiment method, I realized that it is necessary to reduce the coordinates 3-9 times, but I do not understand why, and how to do it correctly.

[Lawrence3DPK]

here are your boxes lined up on the x axis by width, to stack high or deep you would need to setup some sort of indexing system of an area.

please try to provide at least some limited styling in examples so people can help easier

EDIT: i have used * index which will not work if each box is a different width, you would have to use the total previous sum of containers[ index ].width to offset accordingly.

[belyavsky]

Thank you, I have solved the first problem.
As you noticed, if the objects are different widths there will be problems.

The center of coordinates coincides with the center of the object, my algorithm considers that the origin of coordinates is the bottom corner of the object.

When you layer different objects, they don’t lay down correctly. How can this be fixed?

[Lawrence3DPK]

There are a number of solutions to this, for example one way is to create a bounding box for the first layer to obtain the greatest height (if heights will also all be different) from here you can move the mesh down to the last indexed sum of heights plus the lower half height of the latest box by generating the bounding box of each current box, if you are working from the closest bottom left corner you can translate your original geometry with geometry.translate(x,y,x) Once at the start of each geometry generation by the half of the overall box and then go on to use the full box height instead of half heights.
Hope this helps.

[belyavsky]

I honestly tried to understand what you wrote, but I don’t understand.
The photo below is an example of what you should get.

[belyavsky]

Is that what you’re writing about?
You need to calculate the center of each object and shift the coordinates of the object by 1/2

[Lawrence3DPK]

Yes. Look into box helper and bounding boxes, from the image you are going to have to creat a bounding box for each object and move it upwards until it doesn’t intersect another box

[chax9088]

Can someone in this thread pls tell me, how can I make a bounding box with the following coordinates data:

{
pos:{
x:49754.891900327755,
y:36682.65824592283,
z:108.6824678750207,
},
rot:{
x:0,
y:0,
z:0.5331106969643833,
},

scale:{
x:12.745152036697608,
y:3.4765292357818036,
z:3.7974907141831835
}
}

My current implementation works but does not display on the screen as the position coordinates are too high

createBoundingBoxInstance(
    geometry: THREE.BoxBufferGeometry,
    color: string | THREE.Color | number,
    coords: Coordinates,
    vector: THREE.Vector3,
    label: string,
    wireframe?: boolean,
    transparent?: boolean,
    depthWrite?: boolean,
    doubleSide?: boolean,
    opacity?: number
  ) {
    const _color = color ? color : this.defaults.boundingBoxConfig.color;
    const _wireframe = wireframe
      ? wireframe
      : this.defaults.boundingBoxConfig.wireframe;
    const _transparent = transparent
      ? transparent
      : this.defaults.boundingBoxConfig.transparent;
    const _depthWrite = depthWrite
      ? depthWrite
      : this.defaults.boundingBoxConfig.depthWrite;
    const _side = doubleSide
      ? THREE.DoubleSide
      : this.defaults.boundingBoxConfig.side;
    const _opacity = opacity
      ? opacity
      : this.defaults.boundingBoxConfig.opacity;
    const material = new THREE.MeshBasicMaterial({
      color: _color,
      wireframe: _wireframe,
      transparent: _transparent,
      opacity: _opacity,
      depthWrite: _depthWrite,
      side: _side,
    });
    material.name = label;
    const cube = new THREE.Mesh(geometry, material);
   
    cube.visible = false; // initialize as an invisible bounding box.
    
    cube.position.x = coords.position.x;
    cube.position.y = coords.position.y;
    cube.position.z = coords.position.z;
   
    
    cube.rotation.x = coords.rotation.x;
    cube.rotation.y = coords.rotation.y;
    cube.rotation.z = coords.rotation.z;
   

    cube.scale.x = coords.scale.x;
    cube.scale.y = coords.scale.y;
    cube.scale.z = coords.scale.z;
     
    const myText = this.addTextToBBox(label);
    myText.sync();
    cube.add(myText);
   
 
    this.boundingBoxText.push(myText);
    cube.updateWorldMatrix(true, false);
    vector.project(this.camera);
    this.scene.add(cube);
    this.scene.matrixWorldNeedsUpdate=true
  
 
  }

I tried using worldToLocal but no luck.
Here is one related link with this topic opened by me

How to plot bounding box with respect to a point cloud

Why do you work with geometry of points, instead of the object of points? Find the center of the object and move your camera to it, not the other way round.

Can someone pls let me know/help how are large coordinates in three js handled so that they appear on the screen.

The final output of my implementation is a point cloud output which works fine and looks like this

But I want to display this point cloud along with the bounding boxes something like this

[vielzutun.ch]

@chax9088

Can someone pls let me know/help how are large coordinates in three js handled so that they appear on the screen.

Before giving some advice,
can you please clarify where the “size” (i.e.: size.x, size.y, size.z) of the bounding box comes from?
Are you thinking of a unit-sized cube-shaped box, which will be scaled according your scale data?
Would the “position” refer to the center coordinates of the box?
Does the “rotation” imply, that you want to have a non-axis-aligned box?

@chax9088

Can someone pls let me know/help how are large coordinates in three js handled so that they appear on the screen.

Large coordinates are not a problem per se. Use those large position values to position (or translate) your mesh. Then make sure, it is within the camera frustum. There are at least two ways to achieve the latter:

• leave the camera.position at the origin, then carefully aim at your far away mesh, using a small camera.fov and sufficiently large .near and .far planes
• move the camera.position close to your far away mesh and be done with a fairly large camera.fov

[chax9088]

Hi @vielzutun.ch thank you for replying. Here are answers to your questions:

• can you please clarify where the “size” (i.e.: size.x, size.y, size.z) of the bounding box comes from? There is no explicit size data. However, data such as position, rotation and scaling come from an API response as a json collection representing the collection of bboxes.

• Are you thinking of a unit-sized cube-shaped box, which will be scaled according your scale data?
  The bounding box needs to be scaled as per the incoming scaling data, which means the scaling data shall be responsible for its shape/appearance. So, yes it is a unit sized bbox

• Would the “position” refer to the center coordinates of the box? The values in the position object would refer to the position where the box would appear/placed in the point cloud. Not sure what exactly you mean when you say center coordinates.

• Does the “rotation” imply, that you want to have a non-axis-aligned box? No, the bounding box axis-aligned(AABB)

Also I saw your couple of solution, I am not sure if I understand them fully. But I will check. However, if you have any other suggestions based on my answers, pls comment. It is really appreciated.

[vielzutun.ch]

@chax9088

Are you thinking of a unit-sized cube-shaped box, which will be scaled according your scale data?
The bounding box needs to be scaled as per the incoming scaling data, which means the scaling data shall be responsible for its shape/appearance. So, yes it is a unit sized bbox

OK. So you have a 1 x 1 x 1 cube which will be scaled to scale.x, scale.y, scale.z. That makes sense.

Since this bounding box has extensions in each of the three axes, you need to decide/define, for which point of the box you’ll want to apply the position data. The center coordinates of a box-shaped entity would be at the intersection of its spatial diagonals. Like: lower-left-front to upper-right-back, lower-left-back to upper-right-front, upper-left-front to lower-right-back, upper-left-back to lower-right-front.

@chax9088

Does the “rotation” imply, that you want to have a non-axis-aligned box? No, the bounding box axis-aligned(AABB)

If the bounding box shall be axis-aligned, please specify how the “rotation” data should be taken into account.