Rotating Cube
Foundations
Lesson 1 of 15
Build your first mesh and animate its rotation with elapsed time.
Combine box geometry, a standard material, and an edge outline into a live rotating cube.
How this scene works
A Mesh combines the shape stored in a geometry with the surface described by a material. scene.add makes it visible to the camera. The playground supplies a renderer, perspective camera, orbit controls, and starter lights. Rotation is measured in radians. Assigning rotation from elapsedTime gives the same angle at the same time regardless of frame rate. The edge outline is a separate object, so its rotation is copied from the cube.
Rotating Cube
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
Make the cube twice as tall without changing its width. Stop its X rotation, reverse the Y rotation, and predict the orientation after two seconds.
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.
