Geometry & Material basics

In Three.js, 3D objects are typically created by combining a Geometry (which defines the shape of the object) and a Material (which defines its appearance, like color, texture, and how it reacts to light). These two components are then combined into a Mesh object, which can be added to your scene.

Geometries

Geometries define the shape and structure of a 3D object. They consist of vertices (points in 3D space) and faces (triangles that connect the vertices to form surfaces).

BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)

Creates a rectangular cuboid.

• width, height, depth: Dimensions along the X, Y, and Z axes.
• widthSegments, heightSegments, depthSegments: Optional. The number of segmented faces along the width, height, and depth of the sides. Useful for more detailed shading or deformations.

SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)

Creates a sphere.

• radius: The radius of the sphere.
• widthSegments, heightSegments: The number of horizontal and vertical segments. Higher values result in a smoother sphere but more polygons.
• phiStart, phiLength, thetaStart, thetaLength: Optional. Used to create partial spheres (e.g., a hemisphere or a slice).

PlaneGeometry(width, height, widthSegments, heightSegments)

Creates a flat rectangular plane.

• width, height: Dimensions of the plane along the X and Y axes.
• widthSegments, heightSegments: Optional. The number of segmented faces along the width and height.

Materials

Materials define the visual properties of a geometry, such as color, transparency, shininess, and how it interacts with light.

MeshBasicMaterial(parameters)

A non-photorealistic material that doesn't react to light. It's good for simple colored objects or when you don't have lights in your scene.

• color: (e.g., 0xff0000 for red)
• wireframe: (boolean) Renders the object as a wireframe.

MeshStandardMaterial(parameters)

A physically based rendering (PBR) material that accurately simulates how light interacts with surfaces. It requires lights in the scene to be visible.

• color: (e.g., 0x00ff00 for green)
• roughness: (0.0 to 1.0) How rough the surface is. A value of 0.0 means a smooth, mirror-like surface, 1.0 means a completely diffuse surface.
• metalness: (0.0 to 1.0) How metallic the surface is. A value of 0.0 means a non-metal (dielectric), 1.0 means a metal.

Example: Basic Geometries with Materials

Here's a complete example demonstrating how to create and display a box, sphere, and plane with different materials in Three.js: