ThreeJS

Three.js is simply **the go-to library for creating and rendering 3D scenes** with JavaScript and WebGL (by default). > If you're not familiar with WebGL and canvas, I invite you to first read **[my article on Pixi.js](https://code-garage.fr/blog/pixijs-the-most-popular-webgl-2d-and-canvas-graphics-engine/)** in which I present these basic concepts for 2D. Note that the library also offers rendering engines for Canvas 2D, SVG and CSS3D, but **the 3D WebGL rendering is the default one** shown in all the examples and the most widely used. With Three.js it is possible to: * Create **meshes** (polygons) and animations, import **textures** * Add **lights** and **cameras** * Import **pre-built 3D objects** * Generate **particle systems** * ... ## How do you use it? For this example I used ES6 modules so as not to have to import the entire **Three.js library, which weighs in at over 1MB in total**. > I used the Parcel bundler, whose workings I presented [in this article](https://code-garage.fr/blog/why-and-how-to-minify-your-code-with-parcel/), but feel free to choose another one, like Webpack for instance. **First, our HTML file that will serve as the base** for our rendering contains only two things: * The canvas that will serve as the support for Three.js's WebGL rendering * The script containing the library import as well as the creation of the scene and the rendering ``` ThreeJS

``` The goal of this example is to **create a simple cube spinning on its own axis, but lit and filmed in such a way that we can see the shadows** forming on the different faces of the cube as it rotates. **This is a simple example, but a bit more advanced than the library's basic demo**, and it can give you a good foundation to build on. ``` //index.js import { Scene, PerspectiveCamera, WebGLRenderer, BoxGeometry, MeshPhongMaterial, Mesh, DirectionalLight, AmbientLight } from 'three'; //Create the renderer which will take care of the graphics output const WIDTH = 300; const HEIGHT = 150; const renderer = new WebGLRenderer({canvas:document.getElementById("three"), alpha: true}); renderer.setSize( WIDTH, HEIGHT ); //Create the scene which will contain all our objects const scene = new Scene(); //Add a new camera, move it up and looking down a bit const camera = new PerspectiveCamera(75, WIDTH/HEIGHT, 0.1, 1000); camera.position.z = 1.5; camera.position.y = 1; camera.rotation.x = -0.6; //Add a global light to the scene, not too bright scene.add(new AmbientLight(0xffffff, 0.5)); //Create the cube and add it to the scene const cube = new Mesh( new BoxGeometry(), //Shape of the cub new MeshPhongMaterial({color: 0xffffff}) //Material (white color) that enables shadows ); scene.add(cube); //Add a specific light to improve shadows on cube const directionalLight = new DirectionalLight( 0xffffff, 0.5 ); directionalLight.position.x = 10; directionalLight.position.z = 10; scene.add(directionalLight); let r = 0; function animate() { //On each animation frame, rotate the cube r += 0.01; cube.rotation.y = r; //Loop infinitely and re-render the scene requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ``` And here is **the real-time render** below (the canvas is embedded in the page), it's neither a GIF nor a video, but an actual WebGL render. :::custom three ::: > Note that **the background of the scene is created in CSS specifically for this page**; if you reuse the code above, your scene's background will be transparent, due to the {alpha: true} parameter when creating the WebGLRenderer. ## An example of a game made with Three.js If my hands-on example shows you that **getting started isn't all that complex for creating 3D scenes**, it isn't very impressive (that wasn't the point). On the other hand, I invite you to check out the portfolio of a game developer named **[Bruno Simon](https://bruno-simon.com/), in the form of a car game**, which has traveled the world for its flawless execution using Three.js for rendering and Cannon.js for physics management. ![Screenshot of the game, showing a car and the instructions for controlling it](https://cellar-c2.services.clever-cloud.com/content/2021/03/Capture-d--cran-2021-03-10---08.03.39.png) ::: bookmark [![](https://bruno-simon.com/social/share-1200x630.png)Bruno Simon - Creative developer](https://bruno-simon.com/) ::: ## The official documentation **The site** [**https://threejs.org/**](https://threejs.org/) **contains all the very well-written documentation** as well as truly impressive examples, I recommend you go take a look!