Position, Rotation & Scale
Foundations
Lesson 2 of 15
Compare three meshes that share geometry but use different local transforms.
Place, rotate, and stretch three boxes to distinguish geometry data from object transforms.
How this scene works
The boxes share one BoxGeometry, but each Mesh has its own position, rotation, and scale. Changing mesh.scale does not rewrite the shared vertices. Each transform acts around the object's local origin. Three.js uses a right-handed coordinate system, with Y pointing up in these lessons. The small AxesHelper on each box follows that box's local transform.
Position, Rotation & Scale
Helper snippet · Three.js 0.183.1 · WebGL
Loading draft
1 files · local only
Drag to orbit, scroll to zoom, right-drag to pan.
Make it your own
Give the middle box a 45-degree Z rotation using Math.PI / 4. Then double only its Y scale and compare the local axes with the other boxes.
Change one thing, run the scene, and compare. Pause animation to inspect the result; reset the example to return to its original code and files.
