Units in Three.js

I want to create a line of 1 cm in THREE.Scene.I make a line by passing vertices value of {0,0,0} to {1,0,0}
which makes straight horizontal line,But I have a doubt is it a 1 mm or 1 cm line ?? or is it measure in Pixel.

Thanks & Regards

1 Like

Edit: Quite embarrassingly, the answer I posted here was inaccurate, as explained below.

But that’s just imaginary… or related to the bullet physics engine.

You can define any world scale you want, it might depend on your need for precision. From my experience i use 1 unit as 1 cm, this prevents precision loss that occurs pretty quickly on animations on mobile phones (the more distant you are from the origin). But i also use a multi-dimension coordinate system for theoretical “infinite” large coordinates. So it also might depend on your scene size. Engines like bullet offer an option for world scale.

1 Like

Oops. Sorry. I didn’t know it could be modified. By default though, everything in three is in meters, no?

Metres, microns, parsecs. Any measurement unit you wish. Units in Three.js are abstract.


Hmm… so where do we set that? Can three convert English too? (although this stoopid american has become quite accustomed to working in meters in 3d)

There is no realworld unit relation anywhere besides the physics engine i guess. But using 1:1 meter doesn’t work well with phones and larger distances for the animations/GPU side.

I don’t want to hijack this poor persons thread… but Fyrestar & prisoner849, do guys just work strictly with dynamic geo you are creating programmatically (and thus defining their measurements is a snap), or are you, like myself, working extensively with meshes created in your 3d apps and importing them into three? 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.

1 Like

You should export everything at the same unit system from your modelling software. Just to make everything proportional. It also might depend on this software, as some have a different system. If i import Blender in C4D the models can be rediculous large or small. The software probably offers a independent unit, just as THREE which will be the same.

As mentioned i use a 1 unit 1 centimeter world scale, just cause of the precision issues that will appear on some mobile at larger distances. But i also use a coordinate system that is independent of larger numbers beyond 32 or 64 bit, so if you use smaller units as 1 you could hit the upper limit ealier if that is relevant to you at all.

Export a cube at 1 cm or 1 meter, by just looking in the model file (text-format), if the cube has coordinates like -0.5, 0.5 etc., the cube will have a size of exactly 1 unit. Most software uses the international standard you probably mentioned (1 = 1 Meter)

1 Like

Thank you very much for the explanation. I won’t likely ever need to work with anything other than meters, but I’m glad I have deeper understanding of this nonetheless, should my needs change.

This question was already answered multiple times by Ben Houston at stackoverflow:


Notice that when you resize a Three.js application, the height of the viewport affect object sizing, so there isn’t really an absolute size for everything. I’m thinking of how to introduce absolute sizing to Three.js. For starters, figuring this out will begin to help understand how to do that. Ultimately, Three is drawing to the pixels on the screen, so there is for sure some way to map a size in Three to a number of pixels on the screen given that the camera is configured in a specific way and that obbjects are position on a specific plane perpendicular to the camera’s line of site.

Once I figure that out (I’m sure someone already knows), then in certain environments (f.e. Electron, Cordova) it is possible to get the physical dimensions of a display. Then it would be possible to specify that something is 1 inch wide, and for us to be able to place the object somewhere in the camera’s frustum so that the size we see on the display is actually 1 inch (measured with a ruler).

Being able to do this sort of thing is useful for display-independent sizing, which would be nice to have for cross-platform applications.

Have you got the absolute sizing/mapping figured out?

1 Like

For anybody coming across this post, the “official” answer is that three.js uses SI units, meaning that
1 unit = 1 metre.

Even though this is abstract, it’ a good idea to stick to this as much as possible since it will make working with other applications easier.


Yes I have, for example if you try the following demo and resize the window, you’ll see the “buttons” stay the same size regardless of window size (the shadow and light is rendered with Three.js):

That example however uses infamous, which uses Three.js for WebGL rendering at the moment.

Here’s a simpler Three.js-only example showing absolute sizing:

In that example, the pink outline is a <div> element, and the skyblue background is a THREE.Mesh with THREE.PlaneGeometry, which is perfectly aligned behind the <div> element.

When you resize the window, the DIV element and the THREE.Mesh stay the same size and stay aligned. Both of them are sizes with “CSS pixels”.

There’s other better ways to do it too, but I haven’t posted the examples anywhere yet. That example may at least help you understand the math and how the camera is being positioned in order to make it happen.

If any questions, just let me know!

@June_Wang For more details on how I originally came up with it, see [SOLVED] How do we size something using screen pixels.

What do you mean it’s abstract? If 1 unit = 1 meter, then 1 unit is indeed 1 meter, no?

Abstract in the sense that 1 unit equals 1 metre just because we decided to follow the convention of SI units.

I guess saying that it’s ‘by convention’, rather than ‘abstract’, makes more sense.

1 Like

So if 1 unit = 1 meter, 0.001 unit = 0.001m, how precise can it get?

That depends on your scene, graphics card, and the values of the near and far clipping plane.

If you need to make really tiny scenes, then it’s OK to break this convention - just switch to using 1 unit = 1μm. Or, if you need to go from very tiny to very huge then use a logarithmic depth buffer instead:


1 Like