DEV Community

Cover image for Why THREE.JS is Perfect ?
Shotazhvania
Shotazhvania

Posted on

Why THREE.JS is Perfect ?

Three.js is a cross-browser JavaScript library and application programming interface (API) used to create and display animated 3D computer graphics in a web browser using WebGL. The source code is hosted in a repository on GitHub.

High-level libraries such as Three.js or GLGE, SceneJS, PhiloGL, or a number of other libraries make it possible to author complex 3D computer animations that display in the browser without the effort required for a traditional standalone application or a plugin.

Three.js allows the creation of graphical processing unit (GPU)-accelerated 3D animations using the JavaScript language as part of a website without relying on proprietary browser plugins.This is possible due to the advent of WebGL.


Okay and what is WebGL ?

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins.WebGL is fully integrated with other web standards, allowing GPU-accelerated usage of physics and image processing and effects as part of the web page canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background. WebGL programs consist of control code written in JavaScript and shader code that is written in OpenGL ES Shading Language (GLSL ES), a language similar to C or C++, and is executed on a computer's graphics processing unit (GPU).


Three.js includes the following features:

  • Effects: Anaglyph, cross-eyed, and parallax barrier.
  • Scenes: add and remove objects at run-time; fog
  • Cameras: perspective and orthographic; controllers: trackball, FPS, path and more
  • Animation: armatures, forward kinematics, inverse kinematics, morph, and keyframe
  • Lights: ambient, direction, point, and spot lights; shadows: cast and receive
  • Materials: Lambert, Phong, smooth shading, textures, and more
  • Shaders: access to full OpenGL Shading Language (GLSL)
  • capabilities: lens flare, depth pass, and extensive post-processing library
  • Objects: meshes, particles, sprites, lines, ribbons, bones, and more - all with Level of detail
  • Geometry: plane, cube, sphere, torus, 3D text, and more;
  • modifiers: lathe, extrude, and tube
  • Data loaders: binary, image, JSON, and scene
  • Utilities: full set of time and 3D math functions including frustum, matrix, quaternion, UVs, and more
  • Export and import: utilities to create Three.js-compatible JSON * files from within: Blender, openCTM, FBX, Max, and OBJ
  • Support: API documentation is under construction. A public forum and wiki is in full operation.
  • Examples: Over 150 files of coding examples plus fonts, models, textures, sounds, and other support files
  • Debugging: Stats.js, WebGL Inspector, Three.js Inspector
  • Virtual and Augmented Reality via WebXR

Before you can use three.js, you need somewhere to display it. Save the following HTML to a file on your computer, along with a copy of three.js in the js/ directory, and open it in your browser.


ONLINE DOCUMENTATION AND PERFECT EXAMPLES 👇

https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

Top comments (4)

Collapse
 
noprod profile image
NOPR9D ☄️ • Edited
Collapse
 
shotazhvania profile image
Shotazhvania

I know this but it’s not full copy/paste . I want just to collect all materials in all different websites🙏 I use three.js and i like this , i can’t write ✍️ more , Just enjoy and dont be like this 🙄🙄

Collapse
 
noprod profile image
NOPR9D ☄️ • Edited

If you had warned from the start that it is a simple copy and paste or just put all our sources I would not have commented.

And your others post are for clickbait... Are you a real account?

Thread Thread
 
shotazhvania profile image
Shotazhvania

I am real accaunt sure. And all post is clickbait.

I think you don`t understand this post adding reason , but anyway thank you for your comment and feedback