# Units in Three.js

**URL:** <https://discourse.threejs.org/t/units-in-three-js/1174>\
**Category:** Questions\
**Tags:** coordinate-system, units\
**Created:** [November 9, 2017, 12:44pm UTC](https://discourse.threejs.org/t/units-in-three-js/1174 "2017-11-09T12:44:02Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![June\_Wang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/june_wang/32/2539_2.png) [@June\_Wang](https://discourse.threejs.org/u/June_Wang)\
**Post date:** [January 29, 2019, 4:20am UTC](https://discourse.threejs.org/t/units-in-three-js/1174/21 "2019-01-29T04:20:37Z")

</div>

Then it’s still unitless, right? If it’s real unit, it shall not depend on anything.

> **[Make quick measurements on shaded models | Alias Products 2019 | Autodesk...](https://knowledge.autodesk.com/support/alias-products/learn-explore/caas/CloudHelp/cloudhelp/2019/ENU/Alias-Modeling/files/GUID-63C550DE-5B55-4D45-AF0C-AA89281B769D-htm.html)**
>
> How to quickly measure distances on shaded models using Evaluate \> Dynamic Measurement. This tool also works on wireframe models. Create a dynamic measurement Choose Evaluate \> Dynamic Measurement. Click anywhere in an orthographic or perspective...

  

> **[View models at a 1:1 scale | Alias Products 2019 | Autodesk Knowledge Network](https://knowledge.autodesk.com/support/alias-products/learn-explore/caas/CloudHelp/cloudhelp/2019/ENU/Alias-InterfaceGeneralTasks/files/GUID-D21EDA85-1119-4745-8DB6-A9E9522067ED-htm.html)**
>
> View your models at true scale (1:1) in orthographic windows. Calibrate the view to be 1:1 Choose View \> View 1:1 \> Calibrate 1:1. The option box opens, and a distance measurement (red line) appears in the current orthographic window. Note: This also...

  
or  
[https://helpx.adobe.com/photoshop/using/grid-guides.html](https://helpx.adobe.com/photoshop/using/grid-guides.html)

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [January 29, 2019, 3:24pm UTC](https://discourse.threejs.org/t/units-in-three-js/1174/22 "2019-01-29T15:24:27Z")

</div>

> If it’s real unit, it shall not depend on anything.

All units are defined in one of two ways:

1. Base units. In the SI system these are metres, kilograms and seconds and so on. These are defined in terms of some natural constant, but the choice is arbitrary. Basically, a metre is one metre long just because we all agreed that one ten-millionth of the distance from the equator to the North Pole should be called a metre.

2. Derived units, defined in terms of these base units, e.g watts are defined by joules and seconds. Joules are defined by newtons and metres. Newtons are defined by kilograms and metres and seconds. Three.js units are defined by metres.

All units in the end are just conventions designed to make sharing calculations easier. But you don’t have to follow any of these conventions. If it’s more useful to you to use a metre that’s defined as the distance from Earth to the Moon, then go ahead. If it’s more useful to you to use a three.js unit that’s defined based on cubits or stadions then that’s fine too. But the rest of us will still keeping using the standard metre and the standard threejs unit (unless we need to make really tiny or really big scenes).

---

<div class="post-metadata">

**Author:** ![June\_Wang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/june_wang/32/2539_2.png) [@June\_Wang](https://discourse.threejs.org/u/June_Wang)\
**Post date:** [January 29, 2019, 7:35pm UTC](https://discourse.threejs.org/t/units-in-three-js/1174/23 "2019-01-29T19:35:15Z")

</div>

I think my question is the relationship between 3js unit and reality.

Softwares like Maya, or Alias or Catia or AutoCAD or Photoshop all have a way to map/calibrate to reality units.  
Say we have a 10mm_20mm_30mm cube in Maya, or Alias or Catia or AutoCAD, we export to .stl then make a physical prototype, it’ll give me a 10mm_20mm_30mm cube. We also have a way to view it in computer with it’s true size.

Or say we have a 10mm_20mm rectangle in Photoshop, we print it true size. The print we get is a 10mm_20mm rectangle on paper.

But there isn’t something like this in 3js, or is there?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 29, 2019, 7:49pm UTC](https://discourse.threejs.org/t/units-in-three-js/1174/24 "2019-01-29T19:49:35Z")

</div>

> [@June\_Wang](#):
>
> We also have a way to view it in computer with it’s true size.

Even if screens are of different sizes? All you will see is just a box (at all the respect, but 10 x 20 x 30 is not a cube) with markers around it with numbers of chosen units.

My recent project:  
 ![MeasurementBox_dynamic_values](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/7/76892b9d4b33c77ba1d87301bd858bfa9695ffbd.gif)  
Values of dimensions can be presented with different units.

> [@June\_Wang](#):
>
> we print it true size

Printer’s driver does all the job.

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [January 29, 2019, 8:38pm UTC](https://discourse.threejs.org/t/units-in-three-js/1174/25 "2019-01-29T20:38:42Z")

</div>

From this page on [STL file spec](https://www.fabbers.com/tech/STL_Format#Sct_specs)

> The StL file does not contain any scale information; the coordinates are in arbitrary unit

Other places I’ve seen say that STL units are usually interpreted as millimetees.

What might be happening in your case is that you’re creating a model scaled in cm, exporting it to STL where it has arbitrary units, then loading it in the printer where the units are again interpreted as cm.

Or possibly AutoCAD is smart enough to know that all 3d printers interpret STL units as mm, so when you export a model that’s in cm it puts a scale factor so that it prints the right size.

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [January 29, 2019, 8:46pm UTC](https://discourse.threejs.org/t/units-in-three-js/1174/26 "2019-01-29T20:46:23Z")

</div>

> the relationship between 3js unit and reality.

As @prisoner849 points out, there cannot be a fixed relationship between three.js units and reality, unless you’re always viewing your scene on the same screen. A cube that measures 1cm across on my phone might be 2.5cm across on your laptop with the camera the same distance away from it.

So, you can choose the length of the unit. But since the ‘base’ unit of length is the metre, that’s always the default choice for units involving length.

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [January 29, 2019, 8:55pm UTC](https://discourse.threejs.org/t/units-in-three-js/1174/27 "2019-01-29T20:55:56Z")

</div>

There is one other important reason for choosing metres, and that’s lighting calculations. If you want to use physically correct lighting, then you should always scale your scene realistically. I.e. a bedroom should be around 5 metres across.

Then, if you set up a 100w (~1700 lumen) bulb like this it _should_ illuminate your scene in a very realistic manner:

```auto
renderer.physicallyCorrectLights = true;

const light = new PointLight(
0xffffff, 
1, // intensity, over written by power below
0, // 0 means infinite distance
2 // decay of two means physically accurate
) 

light.power =1700

```

---

<div class="post-metadata">

**Author:** ![June\_Wang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/june_wang/32/2539_2.png) [@June\_Wang](https://discourse.threejs.org/u/June_Wang)\
**Post date:** [January 29, 2019, 8:55pm UTC](https://discourse.threejs.org/t/units-in-three-js/1174/28 "2019-01-29T20:55:59Z")

</div>

> [@prisoner849](#):
>
> Even if screens are of different sizes? All you will see is just a box (at all the respect, but 10 x 20 x 30 is not a cube) with markers around it with numbers of chosen units.

Yes. I don’t use Maya, but in Alias, you can calibrate it in orthographic then view in true size.

> [@prisoner849](#):
>
> Printer’s driver does all the job.

Not really, you can also view in true size in photoshop. Under ‘View’-\> ‘100%’.

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [January 29, 2019, 9:01pm UTC](https://discourse.threejs.org/t/units-in-three-js/1174/29 "2019-01-29T21:01:43Z")

</div>

> calibrate it in orthographic then view in true size

You could do that in three.js as well, using an orthographic camera and measuring your screen.

The only difference really is that in three.js you have to do that yourself since it’s just a framework whereas in Alias, which is a full modeling program, it’s already been set up for you.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 29, 2019, 9:08pm UTC](https://discourse.threejs.org/t/units-in-three-js/1174/30 "2019-01-29T21:08:10Z")

</div>

Anyway, it relies on the information about how many points (physical dots of a display) within an inch on a screen. Thus, it relies on resolution of a device, so a software has to know about it, retrieving this information from device driver or having its own database of devices and their resolutions.

---

<div class="post-metadata">

**Author:** ![June\_Wang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/june_wang/32/2539_2.png) [@June\_Wang](https://discourse.threejs.org/u/June_Wang)\
**Post date:** [January 30, 2019, 3:57am UTC](https://discourse.threejs.org/t/units-in-three-js/1174/31 "2019-01-30T03:57:04Z")

</div>

> [@looeee](#):
>
> there cannot be a fixed relationship between three.js units and reality, unless you’re always viewing your scene on the same screen

I still don’t get why is screen(resolution) related. In reality a cube LOOKS like 1cm by someone with blurry vision will still LOOK like 1cm by someone with clear vision standing in the same distance away. If we send a ruler to measure the cube, it shall tell us ‘this is xcm(fixed)’.  
I’m confused in here.  
But how does Photoshop always have the exactly the same unit as reality?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 30, 2019, 6:57am UTC](https://discourse.threejs.org/t/units-in-three-js/1174/32 "2019-01-30T06:57:26Z")

</div>

> [@June\_Wang](#):
>
> But how does Photoshop always have the exactly the same unit as reality?

Because of information on DPI (dots per inch) or PPI (pixels per inch) of a device.

> **[Dots per inch](https://en.wikipedia.org/wiki/Dots_per_inch)**
>
> Dots per inch (DPI, or dpi) is a measure of spatial printing, video or image scanner dot density, in particular the number of individual dots that can be placed in a line within the span of 1 inch (2.54 cm). Similarly, dots per centimetre (d/cm or dpcm) refers to the number of individual dots that can be placed within a line of 1 centimetre (0.394 in).
> DPI is used to describe the resolution number of dots per inch in a digital print and the printing resolution of a hard copy print dot gain, wh...

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [January 30, 2019, 8:03am UTC](https://discourse.threejs.org/t/units-in-three-js/1174/33 "2019-01-30T08:03:44Z")

</div>

I wasn’t aware that Photoshop has such accurate measurement. Have you tried getting out a ruler to test it?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 30, 2019, 8:37am UTC](https://discourse.threejs.org/t/units-in-three-js/1174/34 "2019-01-30T08:37:35Z")

</div>

@looeee  
I tried it, when I was developing a software for printing, so it all depends on correctness of information from device’s driver 🙂 Usually 9 out of 10 monitors gave wrong results with longer, than 1 cm, length of a line on a screen. But printers are more precise with it, so I always took correct result. At least, on laser printers (I worked with Xerox big stations - VIPP language, templates for documents, ah, good ol’ times 😌 )

It was several years ago, so maybe now the situation became better 🙂 Or maybe I had such bad monitors or wrong rulers 😄 and thus everything was perfectly okay with size of lines 😆.

---

<div class="post-metadata">

**Author:** ![June\_Wang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/june_wang/32/2539_2.png) [@June\_Wang](https://discourse.threejs.org/u/June_Wang)\
**Post date:** [January 30, 2019, 2:05pm UTC](https://discourse.threejs.org/t/units-in-three-js/1174/35 "2019-01-30T14:05:28Z")

</div>

> [@looeee](#):
>
> Have you tried getting out a ruler to test it?

1. In photoshop, set 100%/or print size, in View.
2. set units to be mm, type to be points. in Edit-\>Preference-\>Units&rulers.
3. Ctrl+R to show ruler, drag the horizontal/vertical ruler to make a 50mmx50mm square.
4. Measure it with real ruler.

And it turns out to be 3mm longer than 50mm on real ruler, 6% off, almost fooled me.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 30, 2019, 2:32pm UTC](https://discourse.threejs.org/t/units-in-three-js/1174/36 "2019-01-30T14:32:48Z")

</div>

> [@June\_Wang](#):
>
> And it turns out to be 3mm longer than 50mm

That’s what I was talking about 🙂

> [@prisoner849](#):
>
> wrong results with longer, than 1 cm, length of a line on a screen

---

<div class="post-metadata">

**Author:** ![JohanaN](https://avatars.discourse-cdn.com/v4/letter/j/6f9a4e/32.png) [@JohanaN](https://discourse.threejs.org/u/JohanaN)\
**Post date:** [June 9, 2019, 1:33pm UTC](https://discourse.threejs.org/t/units-in-three-js/1174/37 "2019-06-09T13:33:13Z")

</div>

I am using this [Photoshop grid generator](https://www.photoshopsupply.com/brushes/grid-photoshop) to make custom grids.

---

<div class="post-metadata">

**Author:** ![Arso](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arso/32/12521_2.png) [@Arso](https://discourse.threejs.org/u/Arso)\
**Post date:** [October 30, 2019, 2:35pm UTC](https://discourse.threejs.org/t/units-in-three-js/1174/38 "2019-10-30T14:35:41Z")

</div>

Hi,  
The result on a picture is awesome. Do you have live demo to get this result?

---

<div class="post-metadata">

**Author:** ![EliasHasle](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eliashasle/32/3010_2.png) [@EliasHasle](https://discourse.threejs.org/u/EliasHasle)\
**Post date:** [October 31, 2019, 1:04pm UTC](https://discourse.threejs.org/t/units-in-three-js/1174/39 "2019-10-31T13:04:53Z")

</div>

> [@FrankSilvaHM](#):
>
> Those meshes I create are all in meters – and if I have a one meter wide mesh and move it with mesh.position.set(1, 2, 0);, it will move it one meter (the equivalent of one width of itself) to the right and 2 meters off ground… So I just can’t imagine how I could suddenly be working in some other measurement with these… Please elaborate if you can. I want to be well informed and have all options available.

A simple solution is to apply a uniform scale transform to the imported mesh. For example, if you have a model specified in inches, and you want to have it in meters, just `model.scale.setScalar(0.0254)`. 🙂

---

<div class="post-metadata">

**Author:** ![FrankSilvaHM](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/franksilvahm/32/117_2.png) [@FrankSilvaHM](https://discourse.threejs.org/u/FrankSilvaHM)\
**Post date:** [October 31, 2019, 1:21pm UTC](https://discourse.threejs.org/t/units-in-three-js/1174/40 "2019-10-31T13:21:22Z")

</div>

Thanks pal! I got that stuff all squared away two years ago, when I posted that… 😉

[Previous page](https://discourse.threejs.org/t/units-in-three-js/1174.md?page=1)

[Next page](https://discourse.threejs.org/t/units-in-three-js/1174.md?page=3)