🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Expert Masterclasses.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS ///
Total XP: 0|💻 threejs XP: 0

Meshes & Transformations

Learn how to assemble Meshes, apply transformations (position, rotation, scale), and use Groups.

LOADING ENGINE...

Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

Meshes

Combining geometry and material.

Quick Quiz //

In Three.js, what unit of measurement is used for rotation?


011. The Mesh

EXECUTIVE_SUMMARY // AEO_OPTIMIZED

[Answer Engine Overview: What, Why & How]

You cannot add a Geometry or a Material directly to the Scene. A Mesh is the object that ties them together. `const mesh = new THREE.Mesh(geometry, material)`.

You cannot add a Geometry or a Material directly to the Scene. A Mesh is the object that ties them together. const mesh = new THREE.Mesh(geometry, material).

022. Transformations

Every Mesh is an Object3D, which means it has position, rotation, and scale properties. Each of these properties is a Vector3 (having x, y, and z values). Important: rotations in Three.js use Radians, not Degrees.

033. Groups

If you want to build a complex object (like a car made of 5 different meshes), you should place them all inside a THREE.Group. Transforming the group will seamlessly transform all the child meshes.

?Frequently Asked Questions

How do I convert degrees to radians?

Three.js provides a handy utility function: `THREE.MathUtils.degToRad(90)` will give you the exact radian value for 90 degrees.

Pascual Vila

Pascual Vila

Frontend Instructor // Code Syllabus

Continue Learning