Table of contents
What is GSAP ?
GSAP stands for "GreenSock Animation Platform". It's simply a JavaScript library that allows you to animate anything. It is a powerful JavaScript library used for creating high-performance animations on the web. It is widely used for animating elements in web pages, including HTML, CSS, SVG, and Canvas elements.
ThreeJS
Three.js is a popular JavaScript library used for creating and displaying 3D graphics in a web browser. It is an abstraction of WebGL, it also has a high cross platform compatibility, a rich set of tools, and a low-level graphics API that allows for rendering 3D graphics on the web. With Three.js, developers can create complex 3D scenes, animate objects, and add interactive elements without needing to write all the low-level code required by WebGL.
Important Concepts in 3D Development
SCENE: This the canvas where all the objects are placed.
RENDERER: This converts the 3D scene to 2D images that can be shown on the screen. It is responsible for rendering the scene on the browser.
CAMERA: It defines the viewpoint from which the scene is viewed (position, rotation, field of view).
LIGHT: This is responsible for illuminating the scene. We have different types of light, such as ambient light, directional light, point light and others. This light has features like color, intensity, position and more.
MESH: This is the basic building block of 3D objects in threeJS, it consists of vertices. Each mesh is associated with a "geometry" and a "material".
GEOMETRY: Geometry defines the structure and shape of a mesh.
MATERIAL: Material on the other hand defines the appearance of a mesh.
