The complexity of the Web is changing daily, and its scope is growing just as fast, especially with 3D rendering. is a JavaScript library for rendering 2D graphics and interactive 3D graphics within browsers. It is based on the architecture of the . WebGL uses the shader language with C- syntax. WebGL uses HTML5 <canvas> element to get 3D graphics into the browser page. Working with WebGL, and with shaders in particular, is rather time-consuming. In the development process, you need to describe each point, line, face, and so on. To render all this, we need to write a rather bulky piece of code. To increase the speed of development, Three.js library was developed. WebGL OpenGL GLSL is a JavaScript library containing a set of predefined classes for creating and displaying interactive 3D graphics in WebGL. Three.js Three.js for WebGL is the same as jQuery for JavaScript. The library offers declarative syntax, and relieves the headache associated with 3D in the browser. Let's look have a general overview of Three.js and see how to get started if you are new to the 3D world. More about Three.js Three.js library, as already mentioned, makes work with WebGL easier. When using Three.js, there is no need to write shaders (but the possibility remains), and it becomes possible to work with familiar concepts. A large number of developers work on the library. The mastermind and developer is Ricardo Cobello, known under the creative pseudonym . Mr.Doob Graphics modeling using Three.js can be compared with a film set, as we have the opportunity to manage concepts such as scene, light, camera, objects and their materials. Three so-called pillars of the library include: Scene - a kind of a platform where all the objects that we create are placed; Camera - this is the “eye” that will be directed to the scene. The camera takes and displays objects that are located on the stage; Renderer - a visualizer that allows you to display the scene captured by the camera. Three.js offers several types of cameras: Perspective Camera Stereo Camera Orthographic Camera Cube Camera The most common ones are the Perspective and Orthographic Camera. Perspective Camera This is the most common projection mode used to render a 3D scene. The perspective camera is designed to simulate what the human eye sees. The camera perceives all objects in a perspective projection: the further the object is, the smaller it seems. The perspective camera takes 4 parameters: or - defines the angle that you can see around the center of the camera. FOV Field Of View - the proportion or ratio of the width to the height of the screen. With large values of the field of view, the apparent size of objects quickly decreases at a distance. For small values, on the contrary, the apparent size of objects barely depends on distance. Aspect ratio - minimum and maximum distance from the camera that gets into rendering. Thus, very distant points will not be rendered at all, as well as points that are very close. Near & Far Orthographic Camera In this projection mode, the size of the object remains constant, regardless of its distance from the camera. That is, it is a camera remote to an infinite distance from objects. In this case, all perpendicular lines remain perpendicular, all parallel remain parallel. If we move the camera, the lines and objects will not be distorted. This can be useful when displaying 2D scenes and UI elements. Light Without light on the stage, it seems we are in a dark room, as only silhouettes are visible. In addition, by lighting the stage we add more realism. Technically, each light can be colored. Types of Light: - background lighting that is used to illuminate all objects on the scene equally; cannot be used to create shadows, as it has no direction. Ambient Light - light that gets emitted in a specific direction. This light will behave as though it is infinitely far away and the rays produced from it are all parallel. It can cast shadows, as it is directed at a specific object. Directional Light - light that is emitted from a single point in all directions. A common use for this is to repeat light emitted from a simple light bulb. Point Light - this light is emitted from one point in one direction, along a cone, expanding as you move away from the light source. Spot Light Creating objects The object created on the scene is called Mesh. A Mesh is a class that presents objects made up of a triangular polygons. Mesh is built using 2 objects: Geometry - defines the object shape (position of vertices, faces, radius, etc.) Material - defines object appearance (color, texture, transparency, etc.) Let's try to create 2 simple shapes: a cube and a sphere. First of all, we go to , and download the latest version of the library. Then we connect the library in the head section or in the beginning of the body section of our document, and we're done: https://threejs.org/ First Three.js app <!DOCTYPE html> < > html < > head < = > meta charset utf-8 < > title </ > title < > style { : ; } { : ; : } body margin 0 canvas width 100% height 100% </ > style </ > head < > body < = > script src "/js/three.js" </ > script < > script // Javascript code here. </ > script </ > body </ > html To be able to display our future object, first we need to create a scene, add a camera and set up a render. Adding a : scene scene = THREE.Scene(); var new Now we add perspective : camera camera = THREE.PerspectiveCamera( , .innerWidth / .innerHeight, , ); var new 75 window window 0.1 1000 The camera takes on 4 parameters, which were mentioned above: FOV or field of view, in our case it is a standard angle of 75; the second parameter is the aspect ratio; the last 2 parameters are the near and far clipping plane (the objects further away from the camera than the value of far or closer than near won't be rendered) Adding and setting up a : renderer renderer = THREE.WebGLRenderer(); renderer.setSize( .innerWidth, .innerHeight ); .body.appendChild( renderer.domElement ); var new window window document What do we have here: we created a renderer first, then set its size according to the visible area size, and finally add it to the page to create an empty canvas element we will work with. To create the cube itself, first we define a : geometry geometry = THREE.BoxGeometry( , , ); var new 10 10 10 class is used to create cuboids or boxes. This is a class that contains the vertices and faces of a cube. Here we have three variables set: BoxGeometry width: the length of the edges parallel to the X axis height: the length of the edges parallel to the Y axis depth: the length of the edges parallel to the Z axis *All the variables default to 1 To color the cube, we need to set up a : material material = THREE.MeshBasicMaterial( { : } ); var new color 0x00ff00 In our case, we have and color attribute, i.e. green color. This material is basically used to make the object of a uniform color. The downside is that the object loses depth. But this material is quite useful when creating wireframe objects using the parameter. MeshBasicMaterial 0x00ff00 {wireframe: true} Now we need a , that takes a geometry, and applies a material to it: Mesh cube = THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = ; var new 25 We inserted to the scene and then moved the camera out a bit. That is needed to avoid the camera and the cube to be at the same point, since by default, when we call , the figure will be added to the coordinates (0,0,0). Mesh scene.add() To animate the cube, we need to draw everything inside the render loop using : requestAnimationFrame { requestAnimationFrame( render ); cube.rotation.x += ; cube.rotation.y += ; renderer.render( scene, camera ); } render(); ( ) function render 0.01 0.01 is a request to the browser that you wish to animate something. We pass a function to call, that is, the . requestAnimationFrame render () Here we also set the rotation speed parameters. As a result, the loop renders our scene 60 times per second and makes the cube to rotate. So here is the result: Let’s create a sphere: geometry = THREE.SphereGeometry( , , ); var new 1 32 32 For a sphere, the class is used, which takes the following parameters: SphereGeometry (default value is 1); radius - the number of horizontal segments (triangles). The minimum value is 3, the default value is 8; widthSegments - the number of vertical segments. The minimum value is 2, the default value is 6. heightSegments By the way, the higher is the number of segments or triangles, the smoother is the surface of the sphere. Now let’s use another material - - a multicolor material that maps the normal vectors to RGB colors: MeshNormalMaterial material = THREE.MeshNormalMaterial(); sphere = THREE.Mesh( geometry, material ); scene.add( sphere ); camera.position.z = ; var new var new 3 Three.js provides about 15 types of material, some of them can be combined and applied simultaneously to one object. Read more . here The last step is setting up the render loop: { requestAnimationFrame( render ); sphere.rotation.x += ; sphere.rotation.y += ; renderer.render( scene, camera ); } render(); ( ) function render 0.01 0.01 And here is what we get: Now let’s try to create an object of a bit more complex shape , and apply another material. As an example, we’ll take the , which is affected by light. Therefore, we need to add some light to the scene first. Below we add a with a yellow tint and set its position on the coordinate axis: MeshPhongMaterial SpotLight scene = THREE.Scene(); spotLight = THREE.SpotLight( ); spotLight.position.set( , , ); scene.add(spotLight); spotLight2 = THREE.SpotLight( ); spotLight2.position.set( , , ); scene.add(spotLight2); var new var new 0xeeeece 1000 1000 1000 var new 0xffffff -200 -200 -200 , as mentioned above, gets emitted from a single point in one direction, along a cone that increases in size the further from the light it gets. In addition to color, spotlight can take the following parameters: intensity, distance, angle, penumbra, and decay. It also can cast shadows. SpotLight Now it’s time for a : material material = THREE.MeshPhongMaterial( { : , : , } ); var new color 0xdaa520 specular 0xbcbcbc This material is used for shiny surfaces. We passed a gold-ish color here, and added a specular property, which defines brightness and color of reflexion. The default color is which is dark gray. 0x111111 Now we render it all and get the following: A little bit more about Three.js All you need to do to include Three.js into your project is run . npm install three If you're bundling your files with or , which allow you to “require(‘modules’)” in the browser by bundling up all of your dependencies, you are able to import the module into your source files and continue to use it as per normal. Webpack Browserify THREE = ( ); scene = THREE.Scene(); ... var require 'three' var new You're also able to leverage : ES6 import syntax * THREE ; scene = THREE.Scene(); ... import as from 'three' const new If you need, you can import only select parts of Three.js library, for example: { Scene } ; scene = Scene(); ... import from 'three' const new Conclusion With the help of almost a couple of lines of code, we created 2 simple shapes, and one a bit more complicated. Naturally, Three.js has a lot more features. Three.js has a lot of out-the-box shapes, materials, types of lighting, etc. This is just a small part of the basics. Three.js library allows you to create really great things. Here are some catchy examples: Example 1 Example 2 Example 3 If you want to start learning 3D in JavaScript, you can find everything you need . here Previously published at https://intexsoft.com/
Share Your Thoughts