To learn three.js, you must first understand the following;
- Scene (Scene): All elements in three.js must be added to a scene to be displayed.
- Camera: The camera determines the perspective and visible area of the scene. three.js supports multiple camera types, including PerspectiveCamera and OrthographicCamera.
- Renderer (Renderer): The renderer combines the scene and the camera to generate the final image. three.js supports multiple renderer types, including CanvasRenderer, WebGLRenderer, and SVGRenderer.
- Geometry: Geometry is an entity in three-dimensional space, consisting of vertices and faces. Three.js has a variety of built-in geometries, such as BoxGeometry, SphereGeometry, and CylinderGeometry, and also supports custom geometries.
- Material: The material determines the appearance and properties of the surface of the geometry, such as color, texture, reflection, etc. Three.js has a variety of built-in materials, such as MeshBasicMaterial, MeshLambertMaterial, and MeshPhongMaterial, and also supports custom materials.
- Mesh: Mesh is a combination of geometry and material, and is the basic unit displayed in the scene. Mesh objects in three.js can be created by adding geometry and materials.
- Light: The light source determines the lighting effect in the scene, such as color, intensity, position, etc. three.js supports a variety of light source types, including AmbientLight, PointLight and DirectionalLight, etc.
- Animation: Animation makes the mesh move or deform in the scene. three.js supports a variety of animation types, including Tween and AnimationMixer, etc.
- Controller: The controller can be used to operate the camera and control the interaction in the scene. three.js supports a variety of controller types, including OrbitControls, TrackballControls and FlyControls, etc.
Those who want Yuque notes can first apply for access through the link below, and I will give you permission
https://www.yuque.com/g/taoli-zl7vk/dx48ww/collaborator/join?token=7PRTaeYQi3iGOA40# 《Three.js》