three. JS summary

One 、three.js The core concept

1.1 Scene （ scene ）： Including lights 、 The camera 、 Objects and everything else need to be handed over to three.js First level container for rendering .

1.2 Camera （ The camera ）： Equivalent to human eyes , In the scene 3D The object will camera From a visual angle 2 Dimension shapes are displayed .

Common types	characteristic
OrthographicCamera	Orthographic projection camera , The line of sight is a set of parallel lines .
PerspectiveCamera	Perspective camera , The line of sight is a group of homologous rays emitted from the camera position .

1.3 Renderer （ Renderers ）： And on the page canvas Element binding , take scene The contents of are drawn to canvas in .

Two 、three.js Important concepts

2.1 object ： Objects are made of geometry (Geometry) And materials (Material) Made up of two parts , Geometry determines the shape of an object , Materials determine the color of objects 、 Optical properties and other properties , Objects can also be rendered as point models in the scene (Points)、 Line model (Line) And mesh models (Mesh) Three .

Most common geometric shapes ,three.js It's all packaged , When using, you only need to define basic elements such as length, width, height and radius .

Common materials are shown in the following table .

texture of material		characteristic
Point material （PointsMaterial)		Relatively simple , Use only when you need to draw as a point model , A vertex can be defined color、size Equal attribute
Line material	LineBasicMaterial	Use... When drawing a line model
	LineDahedMaterial	Produce a dotted line effect , You can set the dotted line size 、 Parameters such as interval
Mesh material	MeshBasicMaterial	Not affected by light , There's no edge
	MeshLambertMaterial	It will produce diffuse reflection with light , Edges and corners will appear at the boundary of the object surface
	MeshPhongMaterial	It will produce specular reflection with light , Produce a highlight effect
Sprite material （SpriteMaterial)		It is essentially a relationship with camara A plane perpendicular to the line of sight , When camera When turning , Will automatically remain vertical
Custom shader materials （ShaderMaterial)		Use customization shader Rendered material ,shader Yes, it is GLSL Written small program , To run on GPU. If you need to render built-in Material For other effects, consider using this .

2.2 light ： Simulation of natural light . Commonly used lighting is divided into ambient light 、 Parallel light 、 Point light and spotlight .

The light	characteristic
The ambient light （AmbientLight)	No light source , The ambient light RGB The composition is different from the material and color of the object RGB Multiply the ingredients
Point source （PointLight)	Light emanates from the position of the light source , The light intensity will decrease with the distance from near to far .
Parallel light （DirectionalLight)	adopt position and target Two parameters determine the direction of the directional light ,
Spotlights （SpotLight）	A light source that diverges gradually in a particular direction , The irradiation range forms a cone in space

Simple mathematical model of directional light diffuse reflection ：

The color of diffuse light = Mesh material color ️ The color of the incident light ️ Cosine of the incident angle of light

The production of shadows ： Shadow generation requires three parts of settings , That is, the setting of the light source （castShadow. shadow.camera）、 Settings for shadow objects (castShadow)、 Accept the settings of shadow objects (receiveShadow).

2.3 Texture mapping

The geometric （Geometry) To texture UV Coordinates map the texture map to each vertex of the geometry , Establish the mapping relationship between geometric vertices and texture maps , You can convert the pixel value of the texture map into the color value of the geometric vertex and other attributes .

 

Common texture maps

texture	purpose
Color mapping （map)	For each pixel of the map GGB The components are respectively related to the RGB Multiply the components as the color value of the point .
Bump map （bumpMap）	The depth of the height of the geometric surface is expressed by the gray value of the picture pixel , In addition, it can cooperate with bumpScale Parameter as bump height .
Normal map （normalMap)	In terms of effect, it is similar to bump mapping , But the normal map is per pixel RGB Values affect the surface normals of each pixel fragment , Change the way colors illuminate , Does not change the actual shape of the surface . coordination normalScale（Vector2） Parameters use .
Transparency maps （alphaMap）	Use the green channel of the texture to control the transparency of the surface

3、 ... and 、three.js Coordinate system

3.1 Hierarchical model ： three.js in , Several objects can be （ object 、 Lights or other groups ） Put in a group （Group） in , A hierarchical model is formed . All the objects 、 Light or group , Will be included in scene in , therefore scene（ scene ） Is the outermost layer .

3.2 The concept of coordinates ： stay scene There is a basic right-hand system 3 D coordinate system , stay scene When there is no rotation , The horizontal right of the screen is x Axis , The longitudinal Up for y Axis , The screen is facing outwards z Axis .

Local coordinate system ： When giving objects or lights directly , Its coordinates are local coordinates , That is, the coordinates with the position of the group to which the object belongs as the origin . When objects are added directly to scene In the middle of the day , Its coordinates are the world coordinates .

World coordinate system ： The object is relative to scene Coordinates of the position of the origin .

Observe the coordinate system ： A simple understanding is to camera The spatial coordinate system observed by the visual field .

Crop coordinate system ： The segment coordinate system visible on the screen .

Standard equipment coordinate system ： The world coordinates are changed into observation coordinates , You need to multiply the view matrix ; Change the observation space coordinate to the clipping coordinate system , You need to multiply the camera projection matrix .three.js One is provided in Vector3.project(camera) The method combines these two steps , Get the standard equipment coordinates .

Screen coordinate system ：three.js Middle is canvas Coordinate system .

Calculation of turning longitude and latitude into spherical coordinates

 

function lglt2xyz(lng: number, lat: number, radius: number) { const theta = (90 + lng) * (Math.PI / 180); const phi = (90 - lat) * (Math.PI / 180); return new THREE.Vector3().setFromSpherical( new THREE.Spherical(radius, phi, theta), ); }

Object coordinates are converted to screen pixel coordinates

Local coordinates -> World coordinates -> Standard equipment coordinates -> Screen coordinates -> Pixel coordinates

Local coordinates -> World coordinates ： Object coordinates + group coordinate

World coordinates -> Standard equipment coordinates ： Vector.project(camera)

Standard equipment coordinates -> Screen coordinates ：（（x + 1) / 2, ( 1 - y) / 2 ）

Screen coordinates -> Pixel coordinates ： Times, respectively, canvas Width and height pixel value of .

function toScreenPosition( obj: THREE.Object3D, camera: THREE.Camera, width: number, height: number, ) { const vector = new THREE.Vector3(); const widthHalf = 0.5 * width; const heightHalf = 0.5 * height; obj.updateMatrixWorld(); vector.setFromMatrixPosition(obj.matrixWorld); vector.project(camera); vector.x = (vector.x + 1) * widthHalf; vector.y = -(vector.y - 1) * heightHalf; return { x: vector.x, y: vector.y, z: vector.z, }; }

Four 、 other

4.1 Track controller （OrbitControls）： Make the camera orbit around the target

function render() { renderer.render(scene, camera); } render(); const controls = new THREE.OrbitControls(camera,renderer.domElement); controls.addEventListener('change', render);

function render() { renderer.render(scene, camera); requestAnimationFrame(render); } render();

4.2 Tween Animation library

const box = document.createElement('div') box.style.setProperty('background-color', '#008800') box.style.setProperty('width', '100px') box.style.setProperty('height', '100px') document.body.appendChild(box) function animate(time) { requestAnimationFrame(animate) TWEEN.update(time) } requestAnimationFrame(animate) const coords = {x: 0, y: 0} const tween = new TWEEN.Tween(coords) .to({x: 300, y: 200}, 1000) .easing(TWEEN.Easing.Quadratic.Out) .onUpdate(() => { box.style.setProperty('transform', `translate(${coords.x}px, ${coords.y}px)`) }) tween.start()