Three.js initial test - basic concepts (2)

foreword

Companion article: Three.js Trial - Basic Concepts introduces some core element concepts Three.jsof , and this article will talk about its key element concepts.

We learned before that to display a 3D image, we must have the core elements of scene, camera, and renderer. These are not enough. We also need to place objects (subjects) and light sources in the scene to display 3D images.

object (subject)

To draw a 3D model, a common practice is to use a mesh composed of triangles to simulate.

Geometry

Three.jsSome 2D and 3D geometric models are preset in .

Among them, the two-dimensional geometric model:

• Plane Geometry
• Circle Geometry (CircleGeometry)
• Ring Geometry
• …

3D geometry model:

• BoxGeometry
• SphereGeometry
• Cylinder Geometry (CylinderGeometry)
• Cone Geometry (ConeGeometry)
• Torus Geometry (TorusGeometry)
• …

When used, instantiate the corresponding geometry object.

Example:

// 创建一个圆环几何体（环面半径为10，管道半径为3，管道横截面分段数为16，管道分段数为100，圆环圆心角为Math.PI * 2）
const geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );

illustrate:

// 构造器
TorusGeometry(radius: Float, tube: Float, radialSegments: Integer, tubularSegments: Integer, arc: Float)

• radius - The radius of the annulus, from the center of the annulus to the center of the pipe cross section. The default value is 1.
• tube — the radius of the tube, the default value is 0.4.
• radialSegments — the number of segments of the pipe cross section, default value is 8.
• tubularSegments — the number of segments for the pipeline, the default is 6.
• arc — the central angle of the circle (in radians), the default value is Math.PI * 2.

Online Example: TorusGeometry Demo

Three.js Geometry

Material

Three.jsSeveral material objects are preset in .

• Basic line material (LineBasicMaterial)
  • A material for drawing wireframe style geometry.
• Basic Mesh Material (MeshBasicMaterial)
  • A material that paints geometry in a simple shaded (flat or wireframe) manner.
  • This material is not affected by lighting.
• Lambert mesh material (MeshLambertMaterial)
  • A material with a non-glossy surface, without specular highlights.
• Normal Mesh Material (MeshNormalMaterial)
  • A material that maps normal vectors to RGB colors.
• Standard Mesh Material (MeshStandardMaterial)
  • A physically based standard material using the Metallic-Roughness workflow.
• …

Please refer to the material

Example:

const material = new THREE.MeshBasicMaterial( {
    
     color: 0xffff00 } );

Online example: MeshBasicMaterial Demo

Three.js Material

Grid (Mesh)

A class representing objects based on a triangle-based polygon mesh.

When we have the geometric model and material, we need to combine the two through a mesh (Mesh) to create the subject being photographed.

Two different methods of subject construction:

import * as THREE from 'three'
import {
    
     createMultiMaterialObject } from 'three/examples/jsm/utils/SceneUtils'

// 第一个参数代表物体的形状，第二个参数代表物体的材质。
// 只能是一种材质
new THREE.Mesh(geometry, material)
// 可以使用多种材质（数组格式）
createMultiMaterialObject(geometry,[materials...])

Example:

// 创建基础网格材质
let materialBasic = new THREE.MeshBasicMaterial({
    
    
  color: 0xFF4500,
  wireframe: true   // 是否将几何体渲染为线框，默认值为false（即渲染为平面多边形）
});
// 创建法线网格材质
let materialNormal = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
// 创建多种网格（因为有多个材质）
const cube2 = createMultiMaterialObject(geometry, [
  materialBasic,
  materialNormal
]);

Finally, to place the object in the scene, call addthe method .

scene.add(cube);

Three.js torus geometry model

light source

Three.jsThere are several light sources preset in .

• Ambient Light (AmbientLight)
  • Ambient light illuminates all objects in the scene evenly.
  • Ambient light cannot be used to cast shadows because it has no direction.
• Directional Light
  • Parallel light is light emitted along a specific direction. This light behaves as if it were infinitely far away, and the rays emanating from it are all parallel.
  • Parallel light is often used to simulate the effect of sunlight.
  • Directional lights can cast shadows.
• Point Light (PointLight)
  • A light source emitting from a point in all directions. A common example is simulating the light from a light bulb.
  • This light can cast shadows.
• Spotlight (SpotLight)
  • Light is emitted from a point in one direction, and the cone of light increases in size as the light travels further away.
  • This light can cast shadows.
• …

For details, please refer to the lighting documentation

Example:

// White directional light at half intensity shining from the top.
const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
scene.add(directionalLight);

illustrate:

// 构造器
DirectionalLight(color: Integer, intensity: Float)

• color - (optional parameter) the color of the light in hexadecimal. The default is 0xffffff (white).
• intensity - (optional) The intensity of the light. The default value is 1.

The main content of this article is introduced here, continue to learn. work hard together!