Advanced Mesh and Geometry Techniques

When it comes to creating interactive 3D applications in the browsers, Three.js is a powerful tool that takes the complexity away from WebGL and offers a simple API to build, render and animate 3D objects. One of the major aspects of this library deals with meshes and geometries, which can be rendered using advanced techniques to create visually stunning applications. We'll delve more into this, using characters and features from popular movies for our examples.

What are Meshes and Geometries?

In three-dimensional spaces, objects are represented by a collection of vertices and faces in a process known in computer graphics as polygonal modeling. In this regard, Three.js offers two basic building blocks: geometry, that define the shape of an object, and mesh, which enchases the geometry with material.

Let’s start by creating a basic mesh using the geometry. Assume Darth Vader's spaceship from "Star Wars" is a simple cube. We'll make a mesh for it.

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 'gray'});
const mesh = new THREE.Mesh(geometry, material);

This code creates a cube with each side being 1 unit long. Material defines that it is gray in color. Finally, the mesh binds the geometry and material together to create the final object.

Advanced Mesh Techniques

Once you’re familiar with the core concept of meshes and geometries, you start pushing boundaries by learning some advanced techniques. One interesting technique is the manipulation of mesh vertices.

Manipulating Vertices

As we dive deeper into the world of geometries, it becomes useful to think of objects more as a collection of vertices than solid objects. For example, if we wanted the James Bond's Aston Martin DB5 haul to morph into another shape, we’d start by reaching into the geometry.vertices array and changing the positions. This could result in an effect that makes our cube morph into a completely unique shape.

mesh.geometry.vertices[0].y += 2;
mesh.geometry.vertices[0].x += 2;
mesh.geometry.verticesNeedUpdate = true;

This manipulation impacts only a single vertex in our mesh's geometry. Remember to also set verticesNeedUpdate to true, so Three.js is aware of the changes.

Custom Geometries

In some cases, the simple primitives provided by Three.js may not suffice. You may need to create custom geometries.

For instance, let's build a simple triangle to represent the Deathly Hallows symbol from "Harry Potter".

var geometry = new THREE.Geometry();
geometry.vertices.push(
  new THREE.Vector3(-1, -1, 0),
  new THREE.Vector3(0, 1, 0),
  new THREE.Vector3(1, -1, 0),
);
geometry.faces.push( new THREE.Face3(0, 1, 2) );

Vertices are created in a counter-clockwise order that determines the outside surface of the shape. We finally create a face using three vertices.

Advanced Geometry Techniques

We've been working with basic shapes and vertices, but there's much more we can do using advanced geometry techniques available in Three.js.

Parametric Geometries

In Three.js, a parametric geometry defines a surface using a function of two parameters. Parametric geometries make it possible to generate complex shapes. For instance, let’s demonstrate by creating a strange time-twisted object similar to Doctor Strange's magic from "Avengers".

function timeTwist(u, v, vector) {
  u *= Math.PI;
  v *= 2 * Math.PI;
  vector.set(
    Math.sin(u),
    Math.cos(u) + Math.sin(v),
    Math.sin(v)
  );
}
var geometry = new THREE.ParametricGeometry(timeTwist, 32, 32);

This script creates a mesh having a shape defined by the timeTwist function.

Extrusion

Extrusion is the process of reshaping a 2D shape into a 3D object. In Three.js, we achieve this using ExtrudeGeometry.

To vividly portray this, let's try to create a simplified star, the representation of "Star of Mufasa" from "The Lion King".

var starShape = new THREE.Shape();
starShape.moveTo(2, 10);
starShape.lineTo(14, 12);
starShape.lineTo(6, 22);
starShape.lineTo(10, 8);
starShape.lineTo(22, 6);
starShape.lineTo(12, 14);
starShape.lineTo(10, 2);
starShape.lineTo(8, 14);
starShape.lineTo(-2, 6);
starShape.lineTo(10, 8);

var extrudeSettings = {
    steps: 2,
    depth: 2,
    bevelEnabled: true,
    bevelThickness: 1,
    bevelSize: 1,
    bevelSegments: 1
};

var geometry = new THREE.ExtrudeGeometry( starShape, extrudeSettings );

The shape is a flat 2D shape that can be extruded into the third dimension.

In conclusion, while Three.js geometry and mesh techniques offer a powerful and fulfilling method of creating visual elements, they are only the tip of the iceberg. There is a host of various techniques waiting to be explored and manipulated to create astonishing 3D applications in a variety of domains.