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

**URL:** <https://discourse.threejs.org/t/the-dimensions-of-the-object-in-millimeters-in-three-js/38555>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [May 26, 2022, 4:24pm UTC](https://discourse.threejs.org/t/the-dimensions-of-the-object-in-millimeters-in-three-js/38555 "2022-05-26T16:24:24Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![belyavsky](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/belyavsky/32/26581_2.png) [@belyavsky](https://discourse.threejs.org/u/belyavsky)\
**Post date:** [May 26, 2022, 4:24pm UTC](https://discourse.threejs.org/t/the-dimensions-of-the-object-in-millimeters-in-three-js/38555/1 "2022-05-26T16:24:24Z")

</div>

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?

```javascript
  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](https://codepen.io/ybelyavsky/pen/rNJppMo?editors=1010)**

![Opera Снимок_2022-05-26_153425_kalkulator](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/0/b0b56aad2af3adfe9fe8e5d4a52c301f9af98b3b.png)

![Opera Снимок_2022-05-27_152425_kalkulator](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/d/1dac8264b7c60d6a38cc7f171bc4b4e4ded73991.png)

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [May 26, 2022, 4:34pm UTC](https://discourse.threejs.org/t/the-dimensions-of-the-object-in-millimeters-in-three-js/38555/2 "2022-05-26T16:34:35Z")

</div>

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

see also [Units in Three.js](https://discourse.threejs.org/t/units-in-three-js/1174)

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [May 26, 2022, 4:44pm UTC](https://discourse.threejs.org/t/the-dimensions-of-the-object-in-millimeters-in-three-js/38555/3 "2022-05-26T16:44:23Z")

</div>

In three.js 1 unit is 1 meter.

```javascript
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

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/c/2c129c9152dee20af4f23a57ee12b9c393ac862f.jpeg)

---

<div class="post-metadata">

**Author:** ![belyavsky](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/belyavsky/32/26581_2.png) [@belyavsky](https://discourse.threejs.org/u/belyavsky)\
**Post date:** [May 27, 2022, 9:26am UTC](https://discourse.threejs.org/t/the-dimensions-of-the-object-in-millimeters-in-three-js/38555/4 "2022-05-27T09:26:05Z")

</div>

Hi!  
I have [created an example](https://codepen.io/ybelyavsky/pen/rNJppMo?editors=1010), please tell me where is my mistake?

---

<div class="post-metadata">

**Author:** ![belyavsky](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/belyavsky/32/26581_2.png) [@belyavsky](https://discourse.threejs.org/u/belyavsky)\
**Post date:** [May 27, 2022, 9:26am UTC](https://discourse.threejs.org/t/the-dimensions-of-the-object-in-millimeters-in-three-js/38555/5 "2022-05-27T09:26:36Z")

</div>

Hi!  
I ve [created an example](https://codepen.io/ybelyavsky/pen/rNJppMo?editors=1010), please tell me where is my mistake?

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [May 27, 2022, 9:33am UTC](https://discourse.threejs.org/t/the-dimensions-of-the-object-in-millimeters-in-three-js/38555/6 "2022-05-27T09:33:34Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![belyavsky](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/belyavsky/32/26581_2.png) [@belyavsky](https://discourse.threejs.org/u/belyavsky)\
**Post date:** [May 27, 2022, 9:54am UTC](https://discourse.threejs.org/t/the-dimensions-of-the-object-in-millimeters-in-three-js/38555/7 "2022-05-27T09:54:41Z")

</div>

[I added](https://codepen.io/ybelyavsky/pen/rNJppMo?editors=1010), but is it only the conversion of units, or do I not understand something?

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

```

---

<div class="post-metadata">

**Author:** ![belyavsky](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/belyavsky/32/26581_2.png) [@belyavsky](https://discourse.threejs.org/u/belyavsky)\
**Post date:** [May 27, 2022, 2:12pm UTC](https://discourse.threejs.org/t/the-dimensions-of-the-object-in-millimeters-in-three-js/38555/8 "2022-05-27T14:12:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [May 27, 2022, 3:30pm UTC](https://discourse.threejs.org/t/the-dimensions-of-the-object-in-millimeters-in-three-js/38555/9 "2022-05-27T15:30:06Z")

</div>

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.

https://codepen.io/forerunrun/embed/preview/GRQyXbM?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=GRQyXbM

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.

---

<div class="post-metadata">

**Author:** ![belyavsky](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/belyavsky/32/26581_2.png) [@belyavsky](https://discourse.threejs.org/u/belyavsky)\
**Post date:** [May 29, 2022, 12:58pm UTC](https://discourse.threejs.org/t/the-dimensions-of-the-object-in-millimeters-in-three-js/38555/10 "2022-05-29T12:58:26Z")

</div>

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?

![2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/5/55502f1be28a2613f836b44eb49c4fd5b3f0da56.png)

 ![1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/f/3fd06d921468f5abd399b6e5e50f467e6d6ae2e9.png)

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [May 29, 2022, 1:27pm UTC](https://discourse.threejs.org/t/the-dimensions-of-the-object-in-millimeters-in-three-js/38555/11 "2022-05-29T13:27:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![belyavsky](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/belyavsky/32/26581_2.png) [@belyavsky](https://discourse.threejs.org/u/belyavsky)\
**Post date:** [May 29, 2022, 1:46pm UTC](https://discourse.threejs.org/t/the-dimensions-of-the-object-in-millimeters-in-three-js/38555/12 "2022-05-29T13:46:13Z")

</div>

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

 ![state_architecture](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/1/41d2241def55cd0665e8e1ec32b81d3aeca36c20.jpeg)

---

<div class="post-metadata">

**Author:** ![belyavsky](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/belyavsky/32/26581_2.png) [@belyavsky](https://discourse.threejs.org/u/belyavsky)\
**Post date:** [May 29, 2022, 1:59pm UTC](https://discourse.threejs.org/t/the-dimensions-of-the-object-in-millimeters-in-three-js/38555/13 "2022-05-29T13:59:08Z")

</div>

[Is that what you’re writing about?](https://stackoverflow.com/questions/38030370/what-is-the-center-of-a-three-js-object)  
You need to calculate the center of each object and shift the coordinates of the object by 1/2

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [May 29, 2022, 3:53pm UTC](https://discourse.threejs.org/t/the-dimensions-of-the-object-in-millimeters-in-three-js/38555/14 "2022-05-29T15:53:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![chax9088](https://avatars.discourse-cdn.com/v4/letter/c/c5a1d2/32.png) [@chax9088](https://discourse.threejs.org/u/chax9088)\
**Post date:** [July 4, 2022, 1:11pm UTC](https://discourse.threejs.org/t/the-dimensions-of-the-object-in-millimeters-in-three-js/38555/15 "2022-07-04T13:11:32Z")

</div>

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

```javascript
{
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

```javascript
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](https://discourse.threejs.org/t/how-to-plot-bounding-box-with-respect-to-a-point-cloud/37366/13):
>
> 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

 ![Capture](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/c/acb7af98ab0a62648b82f7fe365180502b534d51.png)  
But I want to display this point cloud along with the bounding boxes something like this  
[![](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/9/09148a89adedabee7fc529ef4f7ea12eb35fb6da.png) ](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/9/09148a89adedabee7fc529ef4f7ea12eb35fb6da.png)

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [July 4, 2022, 1:45pm UTC](https://discourse.threejs.org/t/the-dimensions-of-the-object-in-millimeters-in-three-js/38555/16 "2022-07-04T13:45:22Z")

</div>

> [@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

---

<div class="post-metadata">

**Author:** ![chax9088](https://avatars.discourse-cdn.com/v4/letter/c/c5a1d2/32.png) [@chax9088](https://discourse.threejs.org/u/chax9088)\
**Post date:** [July 4, 2022, 3:18pm UTC](https://discourse.threejs.org/t/the-dimensions-of-the-object-in-millimeters-in-three-js/38555/17 "2022-07-04T15:18:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [July 4, 2022, 4:00pm UTC](https://discourse.threejs.org/t/the-dimensions-of-the-object-in-millimeters-in-three-js/38555/18 "2022-07-04T16:00:18Z")

</div>

> [@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.