Three.js is an open-source JavaScript library that is used to display graphics, 3D and 2D objects on the web browser. It uses WebGL API behind the scenes. It allows you to use your GPU(Graphics Processing Unit) to render the Graphics and 3D objects on a canvas in the web browser. since we are using JavaScript we can also interact with other HTML elements. Three.js was released by Ricardo Cabello in April 2010.
ThreeJS
What is Three.js?
Three.js is a JavaScript library designed to simplify the creation of 3D graphics and animations on the web. Acting as a layer of abstraction over the WebGL API, it enables developers to work with 3D graphics in the browser without grappling with the intricacies of low-level WebGL coding. Central to Three.js is its powerful rendering engine, which utilizes WebGL to display 3D graphics. The library employs a scene graph to organize and manage 3D objects hierarchically, incorporating elements like geometries, materials, cameras, and lights. Geometries define shapes, materials determine appearances, and cameras control viewpoints, while lights handle illumination. It also supports animation, enabling developers to update object properties over time, and offers features for applying textures, custom shaders, and user interaction. Overall, Three.js empowers developers to create visually engaging and interactive 3D web applications with ease.
Getting Started
- Installation
- Creating a scene
- WebGL compatibility check
- Drawing lines
- Creating text
- Loading 3D models
- Libraries and Plugins
Animation
- AnimationAction
- AnimationClip
- AnimationMixer
- AnimationObjectGroup
- AnimationUtils
- KeyframeTrack
- PropertyBinding
- PropertyMixer
Animation / Tracks
- BooleanKeyframeTrack
- ColorKeyframeTrack
- NumberKeyframeTrack
- QuaternionKeyframeTrack
- StringKeyframeTrack
- VectorKeyframeTrack
Audio
- Audio
- AudioAnalyser
- AudioContext
- AudioListener
- PositionalAudio
Cameras
- ArrayCamera
- Camera
- CubeCamera
- OrthographicCamera
- PerspectiveCamera
- StereoCamera
Constants
- Animation
- Core
- CustomBlendingEquation
- BufferAttributeUsage
- Materials
- Renderer
- Textures
Core
- BufferAttribute
- BufferGeometry
- Clock
- EventDispatcher
- GLBufferAttribute
- InstancedBufferAttribute
- InstancedBufferGeometry
- InstancedInterleavedBuffer
- InterleavedBuffer
- InterleavedBufferAttribute
- Layers
- Object3D
- Raycaster
- Uniform
Core / BufferAttributes
- BufferAttribute Types
Extras
- DataUtils
- Earcut
- ImageUtils
- PMREMGenerator
- ShapeUtils
Extras / Core
- Curve
- CurvePath
- Interpolations
- Path
- Shape
- ShapePath
Extras / Curves
- ArcCurve
- CatmullRomCurve3
- CubicBezierCurve
- CubicBezierCurve3
- EllipseCurve
- LineCurve
- LineCurve3
- QuadraticBezierCurve
- QuadraticBezierCurve3
- SplineCurve
Geometries
- BoxGeometry
- CapsuleGeometry
- CircleGeometry
- ConeGeometry
- CylinderGeometry
- DodecahedronGeometry
- EdgesGeometry
- ExtrudeGeometry
- IcosahedronGeometry
- LatheGeometry
- OctahedronGeometry
- PlaneGeometry
- PolyhedronGeometry
- RingGeometry
- ShapeGeometry
- SphereGeometry
- TetrahedronGeometry
- TorusGeometry
- TorusKnotGeometry
- TubeGeometry
- WireframeGeometry
Helpers
- ArrowHelper
- AxesHelper
- BoxHelper
- Box3Helper
- CameraHelper
- DirectionalLightHelper
- GridHelper
- PolarGridHelper
- HemisphereLightHelper
- PlaneHelper
- PointLightHelper
- SkeletonHelper
- SpotLightHelper
Lights
- AmbientLight
- DirectionalLight
- HemisphereLight
- Light
- LightProbe
- PointLight
- RectAreaLight
- SpotLight
Lights / Shadows
- LightShadow
- PointLightShadow
- DirectionalLightShadow
- SpotLightShadow
Loaders
- AnimationLoader
- AudioLoader
- BufferGeometryLoader
- Cache
- CompressedTextureLoader
- CubeTextureLoader
- DataTextureLoader
- FileLoader
- ImageBitmapLoader
- ImageLoader
- Loader
- LoaderUtils
- MaterialLoader
- ObjectLoader
- TextureLoader
Loaders / Managers
- DefaultLoadingManager
- LoadingManager
Materials
- LineBasicMaterial
- LineDashedMaterial
- Material
- MeshBasicMaterial
- MeshDepthMaterial
- MeshDistanceMaterial
- MeshLambertMaterial
- MeshMatcapMaterial
- MeshNormalMaterial
- MeshPhongMaterial
- MeshPhysicalMaterial
- MeshStandardMaterial
- MeshToonMaterial
- PointsMaterial
- RawShaderMaterial
- ShaderMaterial
- ShadowMaterial
- SpriteMaterial
Math
- Box2
- Box3
- Color
- Cylindrical
- Euler
- Frustum
- Interpolant
- Line3
- MathUtils
- Matrix3
- Matrix4
- Plane
- Quaternion
- Ray
- Sphere
- Spherical
- SphericalHarmonics3
- Triangle
- Vector2
- Vector3
- Vector4
Math / Interpolants
- CubicInterpolant
- DiscreteInterpolant
- LinearInterpolant
- QuaternionLinearInterpolant
Objects
- BatchedMesh
- Bone
- Group
- InstancedMesh
- Line
- LineLoop
- LineSegments
- LOD
- Mesh
- Points
- Skeleton
- SkinnedMesh
- Sprite
Renderers
- WebGLMultipleRenderTargets
- WebGLRenderer
- WebGL1Renderer
- WebGLRenderTarget
- WebGL3DRenderTarget
- WebGLArrayRenderTarget
- WebGLCubeRenderTarget
Renderers / Shaders
- ShaderChunk
- ShaderLib
- UniformsLib
- UniformsUtils
Renderers / WebXR
- WebXRManager
Scenes
- Fog
- FogExp2
- Scene
Textures
- CanvasTexture
- CompressedTexture
- CompressedArrayTexture
- CubeTexture
- Data3DTexture
- DataArrayTexture
- DataTexture
- DepthTexture
- FramebufferTexture
- Source
- Texture
- VideoTexture
Addons Animations
- CCDIKSolver
- MMDAnimationHelper
- MMDPhysics
Controls
- ArcballControls
- DragControls
- FirstPersonControls
- FlyControls
- MapControls
- OrbitControls
- PointerLockControls
- TrackballControls
- TransformControls
Geometries
- ConvexGeometry
- DecalGeometry
- ParametricGeometry
- TextGeometry
- SDFGeometryGenerator
Helpers
- LightProbeHelper
- PositionalAudioHelper
- RectAreaLightHelper
- VertexNormalsHelper
- VertexTangentsHelper
Lights
- LightProbeGenerator
Loaders
- 3DMLoader
- DRACOLoader
- FontLoader
- GLTFLoader
- KTX2Loader
- LDrawLoader
- MMDLoader
- MTLLoader
- OBJLoader
- PCDLoader
- PDBLoader
- SVGLoader
- TGALoader
Objects
- Lensflare
Post-Processing
- EffectComposer
Exporters
- DRACOExporter
- EXRExporter
- GLTFExporter
- OBJExporter
- PLYExporter
- STLExporter
Math
- LookupTable
- MeshSurfaceSampler
- OBB
Misc
- Timer
ConvexHull
- Face
- HalfEdge
- ConvexHull
- VertexNode
- VertexList
Renderers
- CSS2DRenderer
- CSS3DRenderer
- SVGRenderer
Utils
- BufferGeometryUtils
- CameraUtils
- SceneUtils
- SkeletonUtils
WebXR
- XREstimatedLight
Reason to learn Three.js
- Web-Based 3D Graphics: Three.js enables the creation of 3D graphics and animations directly within web browsers, making it an essential tool for web developers looking to enhance user experiences with interactive and visually appealing content.
- Abstraction Over WebGL: Three.js abstracts the complexities of WebGL programming, providing a higher-level API that simplifies the process of working with 3D graphics. This allows developers to focus on creativity rather than dealing with low-level WebGL intricacies.
- Cross-Browser Compatibility: As a JavaScript library, Three.js is designed to work seamlessly across different web browsers, ensuring that your 3D content is accessible to a wide audience without compatibility issues.
- Large Community and Resources: Three.js has a vibrant and active community. Learning and problem-solving become easier with access to a wealth of documentation, tutorials, and community forums where developers share knowledge and solutions.
- Versatility: Whether you’re creating simple 3D visualizations, games, architectural models, or complex simulations, Three.js is versatile and adaptable to a wide range of applications. Its modular structure allows you to pick and choose components based on your specific needs.
- Rapid Prototyping: Three.js facilitates rapid prototyping of 3D projects, allowing developers to quickly experiment with ideas and iterate on designs without the steep learning curve associated with lower-level graphics programming.
Advantages of Three.js
- WebGL Abstraction: Three.js abstracts the complexities of WebGL, providing a higher-level API that simplifies the creation of 3D graphics on the web.
- Cross-Browser Compatibility: Three.js is designed to work across different web browsers, ensuring consistent performance and visual quality for a broad audience.
- Community Support: Three.js has a large and active community, offering a wealth of resources, tutorials, and forums for developers to learn and seek assistance.
- Rapid Development: The library facilitates rapid prototyping and development of 3D projects, allowing developers to quickly experiment with ideas and iterate on designs.
- Versatility: Three.js is versatile and applicable to a wide range of 3D applications, from simple visualizations to complex simulations and games.
- Rich Feature Set: The library comes with a comprehensive set of features, including built-in geometries, materials, cameras, lights, and animation support.
- Performance Optimization: Three.js includes features for optimizing performance, such as frustum culling and level-of-detail support, ensuring smooth rendering even in complex scenes.
- Compatibility with Other Tools: Three.js can be integrated with other popular tools and frameworks, providing flexibility and compatibility with technologies like React, Angular, and more.
- Virtual and Augmented Reality (VR/AR): Three.js supports the development of virtual and augmented reality experiences, making it suitable for emerging technologies and immersive web content.
- Open Source and Active Development: Being an open-source project, Three.js benefits from continuous development and updates, keeping it in line with the latest web standards and technologies.
FAQ’s
1. How does Three.js handle user interaction?
Three.js enables user interaction by responding to events such as mouse clicks and movements. Developers can use this feature to create interactive interfaces having 3D look.
2. What is a geometry in Three.js?
In Three.js, a geometry defines the shape of a 3D object, such as a cube or sphere. We use this to create an intercative UI. It specifies the vertices, edges, and faces that make up the object.
3. Why is the scene graph important in Three.js?
Because it is important for organizing and managing the hierarchy of 3D objects in a scene. It helps developers to structure and control the relationships between different elements so that they can build unique graphs.
4. How does Three.js support animation?
Three.js supports animation by allowing developers to update the properties of 3D objects over time. It allows changes in position, rotation, and scale, providing the basis for dynamic and engaging visual experiences. These all features make animation possible.
5. How can Three.js contribute to responsive design?
Three.js supports responsive design by allowing developers to create 3D content that adapts well to different screen sizes and resolutions, ensuring a consistent user experience across devices. That’s why it is highly used in creation of interactive 3D UI.