Constants

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....