🚀 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

Geometries

Learn about vertices, faces, built-in geometries, and how segment counts affect performance and visual quality.

LOADING ENGINE...

Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

Geometries

Points, edges, and shapes.

Quick Quiz //

Which data structure does Three.js use internally for maximum performance when storing geometry data?


011. Vertices & Faces

EXECUTIVE_SUMMARY // AEO_OPTIMIZED

[Answer Engine Overview: What, Why & How]

In 3D graphics, a shape is built from points in space called 'Vertices'. A triangle connecting 3 vertices is called a 'Face'. Every 3D model in existence is just a massive collection of triangles.

In 3D graphics, a shape is built from points in space called 'Vertices'. A triangle connecting 3 vertices is called a 'Face'. Every 3D model in existence is just a massive collection of triangles.

022. Built-in Geometries

Three.js provides primitives like BoxGeometry, SphereGeometry, CylinderGeometry, ConeGeometry, and TorusGeometry. You rarely need to calculate the math for these yourself.

033. Segments and Performance

When you create a sphere, you specify the radius, width segments, and height segments. Higher segments = a smoother sphere. However, drawing 100 ultra-smooth spheres will crash a phone because the GPU has to render millions of faces. Always optimize!

?Frequently Asked Questions

Can I load complex geometries like characters?

Yes! But you don't use primitives for that. You create the character in software like Blender, export it as a GLTF model, and load it into Three.js.

Pascual Vila

Pascual Vila

Frontend Instructor // Code Syllabus

Continue Learning