Introduction to 3D Javascript Library: Three.js Basics

The complexity of the Web is changing daily, and its scope is growing just as fast, especially with 3D rendering. WebGL is a JavaScript library for rendering 2D graphics and interactive 3D graphics within browsers. It is based on the architecture of the OpenGL. WebGL uses the GLSL shader language with C- syntax. WebGL uses HTML5 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. Three.js is a JavaScript library containing a set of predefined classes for creating and displaying interactive 3D graphics in WebGL. 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 CameraStereo CameraOrthographic CameraCube 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: FOV or Field Of View - defines the angle that you can see around the center of the camera.Aspect ratio - 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.Near & Far - 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.Orthographic CameraIn 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.LightWithout 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:Ambient 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.Directional 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.Point 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.Spot Light - this light is emitted from one point in one direction, along a cone, expanding as you move away from the light source.Creating objectsThe 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 https://threejs.org/, 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: First Three.js app body { margin: 0; } canvas { width: 100%; height: 100% } // Javascript code here. 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:var scene = new THREE.Scene();Now we add perspective camera:var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 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:var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );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:var geometry = new THREE.BoxGeometry( 10, 10, 10);BoxGeometry 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:width: the length of the edges parallel to the X axisheight: the length of the edges parallel to the Y axisdepth: the length of the edges parallel to the Z axis*All the variables default to 1To color the cube, we need to set up a material:var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );In our case, we have MeshBasicMaterial and 0x00ff00 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 {wireframe: true} parameter.Now we need a Mesh, that takes a geometry, and applies a material to it:var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 25;We inserted Mesh 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 scene.add(), the figure will be added to the coordinates (0,0,0).To animate the cube, we need to draw everything inside the render loop using requestAnimationFrame:function render() { requestAnimationFrame( render ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); } render();requestAnimationFrame is a request to the browser that you wish to animate something. We pass a function to call, that is, the 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:var geometry = new THREE.SphereGeometry(1, 32, 32);For a sphere, the SphereGeometry class is used, which takes the following parameters:radius (default value is 1);widthSegments - the number of horizontal segments (triangles). The minimum value is 3, the default value is 8;heightSegments - the number of vertical segments. The minimum value is 2, the default value is 6.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 - MeshNormalMaterial - a multicolor material that maps the normal vectors to RGB colors:var material = new THREE.MeshNormalMaterial(); var sphere = new THREE.Mesh( geometry, material ); scene.add( sphere ); camera.position.z = 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: function render() { requestAnimationFrame( render ); sphere.rotation.x += 0.01; sphere.rotation.y += 0.01; renderer.render( scene, camera ); } render();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 MeshPhongMaterial, which is affected by light. Therefore, we need to add some light to the scene first. Below we add a SpotLight with a yellow tint and set its position on the coordinate axis:var scene = new THREE.Scene(); var spotLight = new THREE.SpotLight(0xeeeece); spotLight.position.set(1000, 1000, 1000); scene.add(spotLight); var spotLight2 = new THREE.SpotLight(0xffffff); spotLight2.position.set( -200, -200, -200); scene.add(spotLight2);SpotLight, 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.Now it’s time for a material:var material = new THREE.MeshPhongMaterial( { 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 0x111111 which is dark gray.Now we render it all and get the following:A little bit more about Three.jsAll you need to do to include Three.js into your project is run npm install three.If you're bundling your files with Webpack or Browserify, 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.var THREE = require('three'); var scene = new THREE.Scene(); ... You're also able to leverage ES6 import syntax:import * as THREE from 'three'; const scene = new THREE.Scene(); ... If you need, you can import only select parts of Three.js library, for example:import { Scene } from 'three'; const scene = new Scene(); ...ConclusionWith 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 1Example 2Example 3If you want to start learning 3D in JavaScript, you can find everything you need here.Previously published at https://intexsoft.com/ The complexity of the Web is changing daily, and its scope is growing just as fast, especially with 3D rendering. WebGL is a JavaScript library for rendering 2D graphics and interactive 3D graphics within browsers. It is based on the architecture of the OpenGL . WebGL uses the GLSL shader language with C- syntax. WebGL uses HTML5 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 Three.js 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 . 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. 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 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: FOV or Field Of View - defines the angle that you can see around the center of the camera. Aspect ratio - 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. Near & Far - 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. 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: Ambient 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.Directional 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.Point 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.Spot Light - this light is emitted from one point in one direction, along a cone, expanding as you move away from the light source. 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 https://threejs.org/, 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: First Three.js app body { margin: 0; } canvas { width: 100%; height: 100% } // Javascript code here. 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: var scene = new THREE.Scene(); Now we add perspective camera: var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 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: var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); 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: var geometry = new THREE.BoxGeometry( 10, 10, 10); BoxGeometry 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: width: the length of the edges parallel to the X axisheight: the length of the edges parallel to the Y axisdepth: 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: var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); In our case, we have MeshBasicMaterial and 0x00ff00 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 {wireframe: true} parameter. Now we need a Mesh, that takes a geometry, and applies a material to it: var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 25; We inserted Mesh 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 scene.add(), the figure will be added to the coordinates (0,0,0). To animate the cube, we need to draw everything inside the render loop using requestAnimationFrame: function render() { requestAnimationFrame( render ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); } render(); requestAnimationFrame is a request to the browser that you wish to animate something. We pass a function to call, that is, the 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: var geometry = new THREE.SphereGeometry(1, 32, 32); For a sphere, the SphereGeometry class is used, which takes the following parameters: radius (default value is 1);widthSegments - the number of horizontal segments (triangles). The minimum value is 3, the default value is 8;heightSegments - the number of vertical segments. The minimum value is 2, the default value is 6. 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 - MeshNormalMaterial - a multicolor material that maps the normal vectors to RGB colors: var material = new THREE.MeshNormalMaterial(); var sphere = new THREE.Mesh( geometry, material ); scene.add( sphere ); camera.position.z = 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: function render() { requestAnimationFrame( render ); sphere.rotation.x += 0.01; sphere.rotation.y += 0.01; renderer.render( scene, camera ); } render(); 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 MeshPhongMaterial, which is affected by light. Therefore, we need to add some light to the scene first. Below we add a SpotLight with a yellow tint and set its position on the coordinate axis: var scene = new THREE.Scene(); var spotLight = new THREE.SpotLight(0xeeeece); spotLight.position.set(1000, 1000, 1000); scene.add(spotLight); var spotLight2 = new THREE.SpotLight(0xffffff); spotLight2.position.set( -200, -200, -200); scene.add(spotLight2); SpotLight, 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. Now it’s time for a material: var material = new THREE.MeshPhongMaterial( { 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 0x111111 which is dark gray. 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 Webpack or Browserify, 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. var THREE = require('three'); var scene = new THREE.Scene(); ... You're also able to leverage ES6 import syntax: import * as THREE from 'three'; const scene = new THREE.Scene(); ... If you need, you can import only select parts of Three.js library, for example: import { Scene } from 'three'; const scene = new Scene(); ... 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 1Example 2Example 3 If you want to start learning 3D in JavaScript, you can find everything you need here. Previously published at https://intexsoft.com/ FOV or Field Of View - defines the angle that you can see around the center of the camera. FOV Field Of View Aspect ratio - 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 Near & Far - 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: Ambient 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. Directional 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. Point 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. Spot Light - this light is emitted from one point in one direction, along a cone, expanding as you move away from the light source. Ambient 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 Directional 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 Point 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 Spot 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.) 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 https://threejs.org/ , 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 body { margin: 0; } canvas { width: 100%; height: 100% } // Javascript code here. First Three.js app body { margin: 0; } canvas { width: 100%; height: 100% } // Javascript code here. First Three.js app body { margin : 0 ; } canvas { width : 100% ; height : 100% } // Javascript code here. First Three.js app body { margin : 0 ; } canvas { width : 100% ; height : 100% } // Javascript code here. 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 scene var scene = new THREE.Scene(); var scene = new THREE.Scene(); var scene = new THREE.Scene(); var scene = new THREE.Scene(); Now we add perspective camera : camera camera var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var camera = new THREE.PerspectiveCamera( 75 , window .innerWidth / window .innerHeight, 0.1 , 1000 ); var camera = new THREE.PerspectiveCamera( 75 , window .innerWidth / window .innerHeight, 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) 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 renderer var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window .innerWidth, window .innerHeight ); document .body.appendChild( renderer.domElement ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window .innerWidth, window .innerHeight ); document .body.appendChild( renderer.domElement ); 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 geometry var geometry = new THREE.BoxGeometry( 10, 10, 10); var geometry = new THREE.BoxGeometry( 10, 10, 10); var geometry = new THREE.BoxGeometry( 10 , 10 , 10 ); var geometry = new THREE.BoxGeometry( 10 , 10 , 10 ); BoxGeometry 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 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 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 *All the variables default to 1 To color the cube, we need to set up a material : material material var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var material = new THREE.MeshBasicMaterial( { color : 0x00ff00 } ); var material = new THREE.MeshBasicMaterial( { color : 0x00ff00 } ); In our case, we have MeshBasicMaterial and 0x00ff00 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 {wireframe: true} parameter. MeshBasicMaterial MeshBasicMaterial 0x00ff00 {wireframe: true} {wireframe: true} Now we need a Mesh , that takes a geometry, and applies a material to it: Mesh Mesh var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 25; var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 25; var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 25 ; var cube = new THREE.Mesh( geometry, material ); camera.position.z = 25 ; We inserted Mesh 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 scene.add() , the figure will be added to the coordinates (0,0,0). Mesh Mesh scene.add() scene.add() To animate the cube, we need to draw everything inside the render loop using requestAnimationFrame : requestAnimationFrame requestAnimationFrame requestAnimationFrame function render() { requestAnimationFrame( render ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); } render(); function render() { requestAnimationFrame( render ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); } render(); function render ( ) { requestAnimationFrame( render ); cube.rotation.x += 0.01 ; cube.rotation.y += 0.01 ; renderer.render( scene, camera ); } render(); function render ( ) { cube.rotation.x += 0.01 ; cube.rotation.y += 0.01 ; requestAnimationFrame is a request to the browser that you wish to animate something. We pass a function to call, that is, the render () . requestAnimationFrame requestAnimationFrame render () 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: var geometry = new THREE.SphereGeometry(1, 32, 32); var geometry = new THREE.SphereGeometry(1, 32, 32); var geometry = new THREE.SphereGeometry( 1 , 32 , 32 ); var geometry = new THREE.SphereGeometry( 1 , 32 , 32 ); For a sphere, the SphereGeometry class is used, which takes the following parameters: SphereGeometry SphereGeometry radius (default value is 1); widthSegments - the number of horizontal segments (triangles). The minimum value is 3, the default value is 8; heightSegments - the number of vertical segments. The minimum value is 2, the default value is 6. radius (default value is 1); radius widthSegments - the number of horizontal segments (triangles). The minimum value is 3, the default value is 8; widthSegments heightSegments - 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 - MeshNormalMaterial - a multicolor material that maps the normal vectors to RGB colors: MeshNormalMaterial MeshNormalMaterial var material = new THREE.MeshNormalMaterial(); var sphere = new THREE.Mesh( geometry, material ); scene.add( sphere ); camera.position.z = 3; var material = new THREE.MeshNormalMaterial(); var sphere = new THREE.Mesh( geometry, material ); scene.add( sphere ); camera.position.z = 3; var material = new THREE.MeshNormalMaterial(); var sphere = new THREE.Mesh( geometry, material ); scene.add( sphere ); camera.position.z = 3 ; var material = new THREE.MeshNormalMaterial(); var sphere = new THREE.Mesh( geometry, material ); camera.position.z = 3 ; Three.js provides about 15 types of material, some of them can be combined and applied simultaneously to one object. Read more here . here The last step is setting up the render loop: function render() { requestAnimationFrame( render ); sphere.rotation.x += 0.01; sphere.rotation.y += 0.01; renderer.render( scene, camera ); } render(); function render() { requestAnimationFrame( render ); sphere.rotation.x += 0.01; sphere.rotation.y += 0.01; renderer.render( scene, camera ); } render(); function render ( ) { requestAnimationFrame( render ); sphere.rotation.x += 0.01 ; sphere.rotation.y += 0.01 ; renderer.render( scene, camera ); } render(); function render ( ) { sphere.rotation.x += 0.01 ; sphere.rotation.y += 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 MeshPhongMaterial , which is affected by light. Therefore, we need to add some light to the scene first. Below we add a SpotLight with a yellow tint and set its position on the coordinate axis: MeshPhongMaterial MeshPhongMaterial SpotLight SpotLight var scene = new THREE.Scene(); var spotLight = new THREE.SpotLight(0xeeeece); spotLight.position.set(1000, 1000, 1000); scene.add(spotLight); var spotLight2 = new THREE.SpotLight(0xffffff); spotLight2.position.set( -200, -200, -200); scene.add(spotLight2); var scene = new THREE.Scene(); var spotLight = new THREE.SpotLight(0xeeeece); spotLight.position.set(1000, 1000, 1000); scene.add(spotLight); var spotLight2 = new THREE.SpotLight(0xffffff); spotLight2.position.set( -200, -200, -200); scene.add(spotLight2); var scene = new THREE.Scene(); var spotLight = new THREE.SpotLight( 0xeeeece ); spotLight.position.set( 1000 , 1000 , 1000 ); scene.add(spotLight); var spotLight2 = new THREE.SpotLight( 0xffffff ); spotLight2.position.set( - 200 , - 200 , - 200 ); scene.add(spotLight2); var scene = new THREE.Scene(); var spotLight = new THREE.SpotLight( 0xeeeece ); spotLight.position.set( 1000 , 1000 , 1000 ); var spotLight2 = new THREE.SpotLight( 0xffffff ); spotLight2.position.set( - 200 , - 200 , - 200 ); SpotLight , 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 SpotLight Now it’s time for a material : material material var material = new THREE.MeshPhongMaterial( { color: 0xdaa520, specular: 0xbcbcbc, } ); var material = new THREE.MeshPhongMaterial( { color: 0xdaa520, specular: 0xbcbcbc, } ); var material = new THREE.MeshPhongMaterial( { color : 0xdaa520 , specular : 0xbcbcbc , } ); var material = new THREE.MeshPhongMaterial( { 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 0x111111 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 . npm install three If you're bundling your files with Webpack or Browserify , 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 var THREE = require('three'); var scene = new THREE.Scene(); ... var THREE = require('three'); var scene = new THREE.Scene(); ... var THREE = require ( 'three' ); var scene = new THREE.Scene(); ... var THREE = require ( 'three' ); var scene = new THREE.Scene(); You're also able to leverage ES6 import syntax : ES6 import syntax import * as THREE from 'three'; const scene = new THREE.Scene(); ... import * as THREE from 'three'; const scene = new THREE.Scene(); ... import * as THREE from 'three' ; const scene = new THREE.Scene(); ... import * as THREE from 'three' ; const scene = new THREE.Scene(); If you need, you can import only select parts of Three.js library, for example: import { Scene } from 'three'; const scene = new Scene(); ... import { Scene } from 'three'; const scene = new Scene(); ... import { Scene } from 'three' ; const scene = new Scene(); ... import { Scene } from 'three' ; const scene = new Scene(); 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 Example 1 Example 1 Example 2 Example 2 Example 3 Example 3 If you want to start learning 3D in JavaScript, you can find everything you need here . here Previously published at https://intexsoft.com/ Previously published at https://intexsoft.com/ https://intexsoft.com/