Three.js Tutorial: Grid Model

Recommended: Add NSDT Scene Editor to your 3D toolchain

Toolset: NSDT Jane Stone Digital Twins

Mesh model (triangle concept)

This lesson will show you the vertex coordinates of the mesh model Meshrendering custom geometry , through such an example to help you establish the concept of **triangle (face)**BufferGeometry

triangle (face)

The mesh model Mesh is actually formed by splicing triangles (surfaces) one by one. Use the mesh model Mesh to render the geometry, that is, all the coordinates of the vertices of the geometry are grouped into a group to form a triangle, and multiple groups of vertices form multiple triangles, which can be used to simulate the surface of the object.

Mesh Model Triangles: Front and Back

• Front: Counterclockwise
• Reverse: clockwise

A triangle in space has two sides, so how does the rule of Three.js distinguish the front and back? It's very simple, your eyes (camera) are facing a face of the triangle, if the order of the three vertices is counterclockwise, the face is regarded as the front face, and if the order of the three vertices is clockwise, the face is regarded as the reverse face.

Visible on both sides

The material of Three.js is visible by default on the front side, but invisible on the back side.

const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff, //材质颜色
    side: THREE.FrontSide, //默认只有正面可见
});

const material = new THREE.MeshBasicMaterial({
    side: THREE.DoubleSide, //两面可见
});

const material = new THREE.MeshBasicMaterial({
    side: THREE.BackSide, //设置只有背面可见
});

3D Modeling Learning Studio

Previous: Three.js Tutorial: Line Model Objects (mvrlink.com)

Next: Three.js Tutorial: Building Rectangular Plane Geometry (mvrlink.com)