{"id":7553,"date":"2020-04-09T14:27:00","date_gmt":"2020-04-09T14:27:00","guid":{"rendered":"https:\/\/www.intexsoft.com\/?post_type=blog&#038;p=7553"},"modified":"2022-07-19T12:40:44","modified_gmt":"2022-07-19T12:40:44","slug":"introduction-to-3d-three-js-basics","status":"publish","type":"blog","link":"https:\/\/intexsoft.com\/blog\/introduction-to-3d-three-js-basics\/","title":{"rendered":"Introduction to 3D: Three.js basics"},"content":{"rendered":"<section  class=\"hero hero-blog \">\n\t<div class=\"content\">\n\t\t\t\t\t<div class=\"hero__overlay\"><\/div>\n\t\t\t\t<div class=\"hero__container\">\n\t\t\t<a href=\"https:\/\/intexsoft.com\/blog\/\">\n\t\t\t\t<div class=\"hero-blog-btn\">\n\t\t\t\t\t\n\t\t\t\t<\/div>\n\t\t\t<\/a>\n\t\t\t<div class=\"hero-blog-date-author\"> April 9, 2020 \u2022 by \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tSergiusz &amp;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tDora\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<h1 class=\"hero__title \">Introduction to 3D: Three.js basics<\/h1>\n\t\t\t\t\t\t\t\t\t\t<div class=\"hero-blog-categories\">\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"hero-blog-category\" data-id=\"19\" data-parent=\"18\">\n\t\t\t\t\t\t\tJS &amp; Frameworks\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"hero-blog-category\" data-id=\"18\" data-parent=\"0\">\n\t\t\t\t\t\t\tTech Staff\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"hero-blog-image\">\n\t\t\t\t<picture>\n\t\t\t\t\t\t\t\t\t\t\t<source type=\"image\/webp\" srcset=\"https:\/\/intexsoft.com\/app\/uploads\/uploads-webp\/2021\/08\/360\u0445510-Introduction-to-3D_-Three.js-basics-min.jpg.webp\" media=\"(max-width: 480px)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<source type=\"image\/webp\" srcset=\"https:\/\/intexsoft.com\/app\/uploads\/uploads-webp\/2021\/08\/768\u0445773-Introduction-to-3D_-Three.js-basics-min.jpg.webp\" media=\"(max-width: 992px)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<source type=\"image\/webp\" srcset=\"https:\/\/intexsoft.com\/app\/uploads\/uploads-webp\/2021\/08\/1920x437-Introduction-to-3D_-Three.js-basics-min.jpg.webp\">\n\t\t\t\t\t\t\t\t\t\t<source srcset=\"https:\/\/intexsoft.com\/app\/uploads\/2021\/08\/360\u0445510-Introduction-to-3D_-Three.js-basics-min.jpg\" media=\"(max-width: 480px)\">\n\t\t\t\t\t<source srcset=\"https:\/\/intexsoft.com\/app\/uploads\/2021\/08\/768\u0445773-Introduction-to-3D_-Three.js-basics-min.jpg\" media=\"(max-width: 992px)\">\n\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/intexsoft.com\/app\/uploads\/2021\/08\/1920x437-Introduction-to-3D_-Three.js-basics-min.jpg\" loading=\"lazy\" alt=\"image\">\n\t\t\t\t<\/picture>\n\t\t\t<\/div>\n\t\t\t<\/div>\n<\/section>\n\t\t\t\t\t\t\t\n\t\t\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\"><section id=\"\"\n\t\t\t\t\t class=\"custom-wysiwyg-editor wysiwyg-portfolio \">\n\t\t<div class=\"content\">\n\n\n\n\t\t\t\t\t\t\t\n\t\t\t\t<div class=\"custom-wysiwyg-editor__anchors\">\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<p><span style=\"color: #333333;\">The complexity of the Web is changing daily, and its scope is growing just as fast, especially with 3D rendering.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/get.webgl.org\/\">WebGL<\/a>\u00a0<span style=\"color: #333333;\">is a JavaScript library for rendering 2D graphics and interactive 3D graphics within browsers. It is based on the architecture of the<\/span>\u00a0<a href=\"https:\/\/www.opengl.org\/\">OpenGL<\/a>. <span style=\"color: #333333;\">WebGL uses the<\/span>\u00a0<a href=\"https:\/\/www.khronos.org\/opengl\/wiki\/Core_Language_(GLSL)\">GLSL<\/a>\u00a0<span style=\"color: #333333;\">shader language with C- syntax. WebGL uses HTML5 &lt;canvas&gt; element to get 3D graphics into the browser page.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Working with WebGL, and with shaders in particular, is a 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.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/threejs.org\/\" target=\"_blank\" rel=\"noopener\">Three.js<\/a>\u00a0<span style=\"color: #333333;\">is a JavaScript library containing a set of predefined classes for creating and displaying interactive 3D graphics in WebGL.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">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.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Let&#8217;s look have a general overview of Three.js and see how to get started if you are new to the 3D world.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #000000;\">More about Three.js<\/span><\/h2>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">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.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">A large number of developers work on the library. The mastermind and developer is Ricardo Cobello, known under the creative pseudonym<\/span>\u00a0<a href=\"https:\/\/mrdoob.com\/\" rel=\"nofollow\">Mr.Doob<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">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.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Three so-called pillars of the library include:<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><span style=\"color: #333333;\">Scene\u00a0&#8211; a kind of a platform where all the objects that we create are placed;<\/span><\/li>\n<li><span style=\"color: #333333;\">Camera\u00a0&#8211; this is the \u201ceye\u201d that will be directed to the scene. The camera takes and displays objects that are located on the stage;<\/span><\/li>\n<li><span style=\"color: #333333;\">Renderer\u00a0&#8211; a visualizer that allows you to display the scene captured by the camera.<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Three.js offers several types of cameras:<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><span style=\"color: #333333;\">Perspective Camera<\/span><\/li>\n<li><span style=\"color: #333333;\">Stereo Camera<\/span><\/li>\n<li><span style=\"color: #333333;\">Orthographic Camera<\/span><\/li>\n<li><span style=\"color: #333333;\">Cube Camera<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">The most common ones are the Perspective and Orthographic Camera.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #000000;\">Perspective Camera<\/span><\/h3>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">This is the most common projection mode used to render a 3D scene.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">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.<\/span><\/p>\n<p>&nbsp;<\/p>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7558\" src=\"\/app\/uploads\/2021\/08\/perspective-projection.jpg\" alt=\"\" width=\"1000\" height=\"662\" srcset=\"https:\/\/intexsoft.com\/app\/uploads\/2021\/08\/perspective-projection.jpg 1000w, https:\/\/intexsoft.com\/app\/uploads\/2021\/08\/perspective-projection-300x199.jpg 300w, https:\/\/intexsoft.com\/app\/uploads\/2021\/08\/perspective-projection-768x508.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">The perspective camera takes 4 parameters:<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><span style=\"color: #333333;\">FOV of Field Of View &#8211; defines the angle that you can see around the center of the camera.<\/span><\/li>\n<li><span style=\"color: #333333;\">Aspect ratio\u00a0&#8211; 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.<\/span><\/li>\n<li><span style=\"color: #333333;\">Near &amp; Far\u00a0&#8211; 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.<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7559\" src=\"\/app\/uploads\/2021\/08\/three-js-2.jpg\" alt=\"\" width=\"1000\" height=\"662\" srcset=\"https:\/\/intexsoft.com\/app\/uploads\/2021\/08\/three-js-2.jpg 1000w, https:\/\/intexsoft.com\/app\/uploads\/2021\/08\/three-js-2-300x199.jpg 300w, https:\/\/intexsoft.com\/app\/uploads\/2021\/08\/three-js-2-768x508.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/>\n<p>&nbsp;<\/p>\n<h2><\/h2>\n<h3><span style=\"color: #000000;\">Orthographic Camera<\/span><\/h3>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">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.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">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.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">This can be useful when displaying 2D scenes and UI elements.<\/span><\/p>\n<p>&nbsp;<\/p>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7560\" src=\"\/app\/uploads\/2021\/08\/three-js-3.jpg\" alt=\"\" width=\"1000\" height=\"662\" srcset=\"https:\/\/intexsoft.com\/app\/uploads\/2021\/08\/three-js-3.jpg 1000w, https:\/\/intexsoft.com\/app\/uploads\/2021\/08\/three-js-3-300x199.jpg 300w, https:\/\/intexsoft.com\/app\/uploads\/2021\/08\/three-js-3-768x508.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/>\n<p>&nbsp;<\/p>\n<h2><\/h2>\n<h3><span style=\"color: #000000;\">Light<\/span><\/h3>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">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.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Types of Light:<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><span style=\"color: #333333;\">Ambient light &#8211; background lighting that is used to illuminate all objects on the scene equally; cannot be used to create shadows, as it has no direction.<\/span><\/li>\n<li><span style=\"color: #333333;\">Directional light 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.<\/span><\/li>\n<li><span style=\"color: #333333;\">Point light is emitted from a single point in all directions. A common use for this is to repeat light emitted from a simple light bulb.<\/span><\/li>\n<li><span style=\"color: #333333;\">Spot light is emitted from one point in one direction, along a cone, expanding as you move away from the light source.<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7561\" src=\"\/app\/uploads\/2021\/08\/three-js-4.jpg\" alt=\"\" width=\"1000\" height=\"662\" srcset=\"https:\/\/intexsoft.com\/app\/uploads\/2021\/08\/three-js-4.jpg 1000w, https:\/\/intexsoft.com\/app\/uploads\/2021\/08\/three-js-4-300x199.jpg 300w, https:\/\/intexsoft.com\/app\/uploads\/2021\/08\/three-js-4-768x508.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #000000;\">Creating objects<\/span><\/h2>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">The object created on the scene is called Mesh. A Mesh is a class that presents objects made up of a triangular polygons.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Mesh is built using 2 objects:<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><span style=\"color: #333333;\"><strong><em>Geometry<\/em><\/strong> &#8211; defines the object shape (position of vertices, faces, radius, etc.)<\/span><\/li>\n<li><span style=\"color: #333333;\"><strong><em>Material<\/em>\u00a0<\/strong>&#8211; defines object appearance (color, texture, transparency, etc.)<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Let&#8217;s try to create 2 simple shapes: a cube and a sphere.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">First of all, we go to <a href=\"https:\/\/threejs.org\/\">threejs.org<\/a><\/span><span style=\"color: #333333;\">, 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&#8217;re done:<\/span><\/p>\n<p>&nbsp;<\/p>\n<pre class=\"blog-code\">&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=utf-8&gt;\r\n    &lt;title&gt;First Three.js app&lt;\/title&gt;\r\n    &lt;style&gt;\r\n      body { margin: 0; }\r\n      canvas { width: 100%; height: 100% }\r\n      &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;script src=\"\/js\/three.js\"&gt;&lt;\/script&gt;\r\n    &lt;script&gt;\r\n      \/\/ Javascript code here.\r\n    &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">To be able to display our future object, first we need to create a scene, add a camera and set up a render.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Adding a <em><strong>scene<\/strong><\/em>:<\/span><\/p>\n<p>&nbsp;<\/p>\n<pre class=\"blog-code\">var scene = new THREE.Scene();<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Now we add <strong><em>perspective camera<\/em><\/strong>:<\/span><\/p>\n<p>&nbsp;<\/p>\n<pre class=\"blog-code\">var camera = \r\nnew THREE.PerspectiveCamera( 75, window.innerWidth \/ window.innerHeight, 0.1, 1000 );<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">The camera takes on 4 parameters, which were mentioned above:<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><span style=\"color: #333333;\"><strong><em>FOV or field of view<\/em><\/strong>, in our case it is a standard angle of 75;<\/span><\/li>\n<li><span style=\"color: #333333;\">the second parameter is the <strong><em>aspect ratio<\/em><\/strong>;<\/span><\/li>\n<li><span style=\"color: #333333;\">the last 2 parameters are the <strong><em>near<\/em><\/strong> and <em><strong>far<\/strong><\/em> clipping plane (the objects further away from the camera than the value of far or closer than near won&#8217;t be rendered)<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Adding and setting up a <em><strong>renderer<\/strong><\/em>:<\/span><\/p>\n<p>&nbsp;<\/p>\n<pre class=\"blog-code\">var renderer = new THREE.WebGLRenderer();\r\nrenderer.setSize( window.innerWidth, window.innerHeight );\r\ndocument.body.appendChild( renderer.domElement );<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">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\u00a0canvas\u00a0element we will work with.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">To create the cube itself, first we define a <em><strong>geometry<\/strong><\/em>:<\/span><\/p>\n<p>&nbsp;<\/p>\n<pre class=\"blog-code\">var geometry = new THREE.BoxGeometry( 10, 10, 10);<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\"><em><strong>BoxGeometry<\/strong><\/em> 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:<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><span style=\"color: #333333;\">width: the length of the edges parallel to the X axis<\/span><\/li>\n<li><span style=\"color: #333333;\">height:\u00a0the length of the edges parallel to the Y axis<\/span><\/li>\n<li><span style=\"color: #333333;\">depth: the length of the edges parallel to the Z axis<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><em><span style=\"color: #333333;\">*All the variables default to 1<\/span><\/em><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">To color the cube, we need to set up a <strong><em>material<\/em><\/strong>:<\/span><\/p>\n<p>&nbsp;<\/p>\n<pre class=\"blog-code\">var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">In our case, we have <strong><em>MeshBacisMaterial<\/em><\/strong> and <strong>0x00ff00<\/strong> 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 <strong><em>{wireframe:true}<\/em><\/strong>\u00a0parameter.<\/span><\/p>\n<p><span style=\"color: #333333;\">Now we need a <strong><em>Mesh<\/em><\/strong>, that takes a geometry, and applies a material to it:<\/span><\/p>\n<p>&nbsp;<\/p>\n<pre class=\"blog-code\">var cube = new THREE.Mesh( geometry, material );\r\nscene.add( cube );\r\n\r\ncamera.position.z = 25;<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">We inserted <strong><em>Mesh<\/em><\/strong>\u00a0to 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 <strong><em>scene.add()<\/em><\/strong>, the figure will be added to the coordinates (0,0,0).<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">In order to animate the cube, we need to draw everything inside the render loop using<\/span>\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/window\/requestAnimationFrame\">requestAnimationFrame<\/a>:<\/p>\n<p>&nbsp;<\/p>\n<pre class=\"blog-code\">    function render() {\r\n            requestAnimationFrame( render );\r\n      cube.rotation.x += 0.01;\r\n      cube.rotation.y += 0.01;      \r\n      renderer.render( scene, camera );\r\n    }\r\nrender();<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\"><strong><em>requestAnimationFrame<\/em><\/strong> is a request to the browser that you wish to animate something. We pass a function to call, that is, the <strong><em>render ()<\/em><\/strong>.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">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.<\/span><\/p>\n<p><span style=\"color: #333333;\">So here is the result:<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><div class=\"iframe-container\"><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Cube\" src=\"https:\/\/codepen.io\/Intex\/embed\/preview\/XWbPvzY?default-tabs=js%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=XWbPvzY#?secret=9NHWQMRdff\" data-secret=\"9NHWQMRdff\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/div><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #000000;\">Let\u2019s create a sphere<\/span><\/h3>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">For a sphere, the SphereGeometry class is used, which takes the following parameters:<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><span style=\"color: #333333;\"><strong><em>radius<\/em><\/strong>\u00a0(default value is 1);<\/span><\/li>\n<li><span style=\"color: #333333;\"><strong><em>widthSegments<\/em><\/strong>\u00a0&#8211; the number of horizontal segments (triangles). The minimum value is 3, the default value is 8;<\/span><\/li>\n<li><span style=\"color: #333333;\"><strong><em>heightSegments<\/em><\/strong>\u00a0&#8211; the number of vertical segments. The minimum value is 2, the default value is 6.<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<pre class=\"blog-code\">var geometry = new THREE.SphereGeometry(1, 32, 32);<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">By the way, the higher is the number of segments or triangles, the smoother is the surface of the sphere.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Now let\u2019s use another material &#8211; <strong><em>MeshNormalMaterial<\/em><\/strong> &#8211; a multicolor material that maps the normal vectors to RGB colors:<\/span><\/p>\n<h3><\/h3>\n<p>&nbsp;<\/p>\n<pre class=\"blog-code\">var material = new THREE.MeshNormalMaterial();\r\nvar sphere = new THREE.Mesh( geometry, material );\r\nscene.add( sphere );\r\ncamera.position.z = 3;<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Three.js provides about 15 types of material, some of them can be combined and applied simultaneously to one object. Read more<\/span>\u00a0<a href=\"https:\/\/threejs.org\/docs\/index.html#api\/en\/materials\/Material\">here<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">The last step is setting up the render loop:<\/span><\/p>\n<p>&nbsp;<\/p>\n<pre class=\"blog-code\">function render() {\r\n\trequestAnimationFrame( render );\r\n\tsphere.rotation.x += 0.01;\r\n  sphere.rotation.y += 0.01;\r\n  renderer.render( scene, camera );\r\n}\r\nrender();<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">And here is what we get:<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><div class=\"iframe-container\"><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Sphere\" src=\"https:\/\/codepen.io\/Intex\/embed\/preview\/zYGLLLp?default-tabs=js%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=zYGLLLp#?secret=lEBtpZDDNY\" data-secret=\"lEBtpZDDNY\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/div><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #000000;\">An object of a bit more complex shape , and apply another material<\/span><\/h3>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">As an example, we\u2019ll 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:<\/span><\/p>\n<p>&nbsp;<\/p>\n<pre class=\"blog-code\">var scene = new THREE.Scene();\r\nvar spotLight = new THREE.SpotLight(0xeeeece);\r\nspotLight.position.set(1000, 1000, 1000);\r\nscene.add(spotLight);\r\nvar spotLight2 = new THREE.SpotLight(0xffffff);\r\nspotLight2.position.set( -200, -200, -200);\r\nscene.add(spotLight2);<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\"><strong><em>SpotLight<\/em><\/strong>, 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:\u00a0<em>intensity, distance, angle, penumbra, and decay<\/em>. It also can cast shadows.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Now it\u2019s time for a\u00a0<strong><em>material<\/em><\/strong>:<\/span><\/p>\n<p>&nbsp;<\/p>\n<pre class=\"blog-code\">var material = new THREE.MeshPhongMaterial( {\r\ncolor: 0xdaa520,\r\nspecular: 0xbcbcbc,\r\n } );<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">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\u00a0<strong><em>0x111111<\/em><\/strong>\u00a0which is dark gray.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Now we render it all and get the following:<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><div class=\"iframe-container\"><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Torus\" src=\"https:\/\/codepen.io\/Intex\/embed\/preview\/RwPBByO?default-tabs=js%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=RwPBByO#?secret=QdriDL2ylV\" data-secret=\"QdriDL2ylV\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/div><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #000000;\">A little bit more about Three.js<\/span><\/h2>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">All you need to do to include Three.js into your project is run\u00a0<strong><em>npm install three<\/em><\/strong>.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">If you&#8217;re bundling your files with<\/span>\u00a0<a href=\"https:\/\/webpack.github.io\/\">Webpack<\/a>\u00a0<span style=\"color: #333333;\">or<\/span>\u00a0<a href=\"https:\/\/github.com\/substack\/node-browserify\">Browserify<\/a>, <span style=\"color: #333333;\">which allow you to &#8220;<em>require(&#8216;modules&#8217;)<\/em>&#8221; 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.<\/span><\/p>\n<p>&nbsp;<\/p>\n<pre class=\"blog-code\">var THREE = require('three');\r\n\r\nvar scene = new THREE.Scene();\r\n...<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">You&#8217;re also able to leverage<\/span>\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\">ES6 import syntax<\/a>:<\/p>\n<p>&nbsp;<\/p>\n<pre class=\"blog-code\">import * as THREE from 'three';\r\n\r\nconst scene = new THREE.Scene();\r\n...<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">If you need, you can import only select parts of Three.js library, for example:<\/span><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<pre class=\"blog-code\">import { Scene } from 'three';\r\n\r\nconst scene = new Scene();\r\n...<\/pre>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #000000;\">Conclusion<\/span><\/h2>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">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.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Three.js library allows you to create really great things. Here are some catchy examples:<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/threejs.org\/examples\/#webgl_helpers\">Example 1<\/a><br \/>\n<a href=\"https:\/\/threejs.org\/examples\/#webgl_effects_anaglyph\">Example 2<\/a><br \/>\n<a href=\"https:\/\/threejs.org\/examples\/#webgl_lines_sphere\">Example 3<\/a><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">If you want to start learning 3D in JavaScript, you can find everything you need<\/span>\u00a0<a href=\"https:\/\/threejs.org\/\">here<\/a>.<\/p>\n\n\t\t<\/div>\n\t<\/section>\n\n\n\n<section id=\"\" class=\"authors \">\n\t\t<div class=\"content\">\n\t\t\t<div class=\"authors-container\">\n\t\t\t\t\t\t\t\t\t<h3 class=\"authors-title\">Written by<\/h3>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"authors-info\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"author\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"author-photo\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/intexsoft.com\/app\/uploads\/2021\/08\/SD.jpg\" loading=\"lazy\" alt=\"image\">\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"author-info\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"author-fullname\"> Sergiusz<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"author-position text-tn\"> Software Engineer<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"author\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"author-photo\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/intexsoft.com\/app\/uploads\/2021\/07\/Darya.jpg\" loading=\"lazy\" alt=\"image\">\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"author-info\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"author-fullname\"> Dora<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"author-position text-tn\"> Marketing Manager<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t<\/section>\n\n\n<div class=\"post__share-links\">\n\t\t<div class=\"post__share-container\">\n\t\t\t\t\t\t\t<a class=\"post__share-link\" href=\"https:\/\/www.facebook.com\/sharer.php?u=http:\/\/intexsoft.com\/wp-json\/wp\/v2\/blog\/7553&amp;t=Introduction to 3D: Three.js basics\" target=\"_blank\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"post__share-link-img facebook-white\"><\/span>\n\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<a class=\"post__share-link\" href=\"http:\/\/www.linkedin.com\/shareArticle?mini=true&amp;url=http:\/\/intexsoft.com\/wp-json\/wp\/v2\/blog\/7553\" target=\"_blank\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"post__share-link-img linkedin-white\"><\/span>\n\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><section class=\"favorite-posts\">\n\t\t\t<h3 class=\"favorite-posts-title\">FAVORITES OF THE MONTH<\/h3>\n\t\n\t\t\t<div class=\"favorite-posts-items\">\n\t\t\t\t\t\t\t\t\t\t\t<a class=\"favorite-posts-item\" href=\"https:\/\/intexsoft.com\/blog\/ai-in-ecommerce-how-technology-is-changing-the-way-we-shop\/\">\n\t\t\t\t\t<div class=\"favorite-posts-item-date-author\">March 6, 2024\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<h4 class=\"favorite-posts-item-title\">AI in Ecommerce: How Technology is Changing the Way We Shop<\/h4>\n\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<a class=\"favorite-posts-item\" href=\"https:\/\/intexsoft.com\/blog\/top-7-ecommerce-platforms-for-your-business\/\">\n\t\t\t\t\t<div class=\"favorite-posts-item-date-author\">April 3, 2024\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<h4 class=\"favorite-posts-item-title\">Top 7 Ecommerce Platforms For Your Business<\/h4>\n\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\t<\/section>\n\n<section class=\"contact-form-widget\">\n\t\t\t<h3 class=\"contact-form-widget-title\">Don&#039;t miss our updates<\/h3>\n\t\t\n\t\t\t\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f3988-o1\" lang=\"en-US\" dir=\"ltr\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/wp-json\/wp\/v2\/blog\/7553#wpcf7-f3988-o1\" method=\"post\" class=\"wpcf7-form init mailchimp-ext-0.5.72 wpcf7-acceptance-as-validation\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<div style=\"display: none;\">\n<input type=\"hidden\" name=\"_wpcf7\" value=\"3988\" \/>\n<input type=\"hidden\" name=\"_wpcf7_version\" value=\"5.9.6\" \/>\n<input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/>\n<input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f3988-o1\" \/>\n<input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/>\n<input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/div>\n<div class=\"custom-input_block\">\n    <label class=\"custom-placeholder\" for=\"email\"><\/label>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"email\"><input size=\"40\" maxlength=\"80\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email contacts__input\" id=\"email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Enter your email...\" value=\"\" type=\"email\" name=\"email\" \/><\/span>\n<\/div>\n<div class=\"contacts__form-checkbox\">\n<span class=\"wpcf7-form-control-wrap\" data-name=\"privace-policy\"><span class=\"wpcf7-form-control wpcf7-acceptance\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"privace-policy\" value=\"1\" class=\"contacts__checkbox form__checkbox_color_grey\" id=\"privacy-cookie-policy\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\"><label for=\"privacy-cookie-policy\" class=\"contacts__checkbox-subtitle blog\">\n        I agree to <a target=\"_blank\" href=\"\/privacy-policy\/\">Privacy<\/a> and <a target=\"_blank\" href=\"\/cookie-policy\/\">Cookie Policy*<\/a>\n  <\/label><\/span><\/label><\/span><\/span><\/span>\n<\/div>\n<button class=\"btn btn_color_primary\">\n  Send\n  <svg class=\"form-arrow\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n    <circle class=\"form-arrow__circle\" opacity=\"0.1\" cx=\"8\" cy=\"8\" r=\"7.33333\" stroke=\"white\" stroke-width=\"1.33333\"\/>\n    <circle class=\"form-arrow__circle form-arrow__circle-two\" opacity=\"0.1\" cx=\"8\" cy=\"8\" r=\"7.33333\" stroke=\"white\" stroke-width=\"1.33333\"\/>\n    <path class=\"form-arrow__path\" d=\"M7.33301 10.6665L9.99967 7.99984L7.33301 5.33317\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"square\"\/>\n    <path class=\"form-arrow__successful\" d=\"M5.33301 8.66357L7.00228 10.3328L11.335 5.99951\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"square\"\/>\n  <\/svg>\n<\/button><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div><p style=\"display: none !important\"><span class=\"wpcf7-form-control-wrap referer-page\"><input type=\"hidden\" name=\"referer-page\" value=\"http:\/\/intexsoft.com\/blog\/introduction-to-3d-three-js-basics\/\" data-value=\"http:\/\/intexsoft.com\/blog\/introduction-to-3d-three-js-basics\/\" class=\"wpcf7-form-control wpcf7-text referer-page\" aria-invalid=\"false\"><\/span><\/p>\n<!-- Chimpmatic extension by Renzo Johnson -->\n<\/form>\n<\/div>\n\n\t<\/section>\n\n\t\t\t\t<\/div>\n<\/div>\n\n\n<section id=\"\" class=\"related-posts  \">\n\t\t<div class=\"content\">\n\t\t\t\t\t\t\t<h2 class=\"section-title\">Related posts<\/h2>\n\t\t\t\t\t\t<ul class=\"posts-content\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/intexsoft.com\/blog\/best-javascript-frameworks-and-libraries-what-to-use-in-2020\/\" class=\"our-blog__block-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"our-blog__block-item-image\">\n\t\t\t\t\t\t\t\t\t\t<picture>\n\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/intexsoft.com\/app\/uploads\/2021\/08\/640x400-Best-JavaScript-Frameworks-and-Libraries_-what-to-use-in-2020-min.jpg\" loading=\"lazy\" alt=\"image\" width=\"446\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t height=\"278\">\n\t\t\t\t\t\t\t\t\t\t<\/picture>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"our-blog__block-item-content\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"our-blog__block-item-content-date\">February 10, 2020<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h3 class=\"our-blog__block-item-content-title\">Best JavaScript Frameworks and Libraries: what to use in 2020<\/h3>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"our-blog__block-item-content-subtitle\"> <p>We can certainly say that the 2010s was the decade of JavaScript. At the beginning of this decade, it was clear that the creation of high-quality web applications is no less complicated than the development of large desktop products.<\/p> <\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\n\n\n\n\n\n\n\n\n\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/intexsoft.com\/blog\/is-angularjs-dead\/\" class=\"our-blog__block-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"our-blog__block-item-image\">\n\t\t\t\t\t\t\t\t\t\t<picture>\n\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/intexsoft.com\/app\/uploads\/2021\/08\/640x400-Is-AngularJS-Dead_-min.jpg\" loading=\"lazy\" alt=\"image\" width=\"446\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t height=\"278\">\n\t\t\t\t\t\t\t\t\t\t<\/picture>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"our-blog__block-item-content\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"our-blog__block-item-content-date\">August 19, 2020<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h3 class=\"our-blog__block-item-content-title\">Is Angular.js Dead?<\/h3>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"our-blog__block-item-content-subtitle\"> <p>At the beginning of 2018, Angular representatives announced in their official blog that they were planning the last significant release of AngularJS, version 1.7. In July 2018, it entered a three year period of\u00a0Long Term Support.<\/p> <\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\n\n\n\n\n\n\n\n\n\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/intexsoft.com\/blog\/node-js-vs-java-why-compare\/\" class=\"our-blog__block-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"our-blog__block-item-image\">\n\t\t\t\t\t\t\t\t\t\t<picture>\n\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/intexsoft.com\/app\/uploads\/2021\/07\/640x400-Node.js-vs-Java_-Why-Compare_-min.jpg\" loading=\"lazy\" alt=\"image\" width=\"446\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t height=\"278\">\n\t\t\t\t\t\t\t\t\t\t<\/picture>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"our-blog__block-item-content\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"our-blog__block-item-content-date\">July 15, 2019<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h3 class=\"our-blog__block-item-content-title\">Node.js vs Java: Why Compare?<\/h3>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"our-blog__block-item-content-subtitle\"> <p>Recently, my colleagues and I discussed the popularity of a couple of technologies &#8211; in particular, Java and node.js. After a brief Internet surfing session, it turned out that these technologies are used by many information giants to develop and maintain their platforms.<\/p> <\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\n\n\n\n\n\n\n\n\n\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/ul>\n\t\t<\/div>\n\t<\/section>\n","protected":false},"author":1,"template":"","blog_category":[19,18],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.9 (Yoast SEO v22.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introduction to 3D: Three.js basics - IntexSoft<\/title>\n<meta name=\"description\" content=\"Three.js\u00a0is a JavaScript library containing a set of predefined classes for creating and displaying interactive 3D graphics in WebGL.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/intexsoft.com\/blog\/introduction-to-3d-three-js-basics\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introduction to 3D: Three.js basics\" \/>\n<meta property=\"og:description\" content=\"Three.js\u00a0is a JavaScript library containing a set of predefined classes for creating and displaying interactive 3D graphics in WebGL.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/intexsoft.com\/blog\/introduction-to-3d-three-js-basics\/\" \/>\n<meta property=\"og:site_name\" content=\"IntexSoft\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-19T12:40:44+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Introduction to 3D: Three.js basics - IntexSoft","description":"Three.js\u00a0is a JavaScript library containing a set of predefined classes for creating and displaying interactive 3D graphics in WebGL.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/intexsoft.com\/blog\/introduction-to-3d-three-js-basics\/","og_locale":"en_US","og_type":"article","og_title":"Introduction to 3D: Three.js basics","og_description":"Three.js\u00a0is a JavaScript library containing a set of predefined classes for creating and displaying interactive 3D graphics in WebGL.","og_url":"https:\/\/intexsoft.com\/blog\/introduction-to-3d-three-js-basics\/","og_site_name":"IntexSoft","article_modified_time":"2022-07-19T12:40:44+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/intexsoft.com\/blog\/introduction-to-3d-three-js-basics\/","url":"https:\/\/intexsoft.com\/blog\/introduction-to-3d-three-js-basics\/","name":"Introduction to 3D: Three.js basics - IntexSoft","isPartOf":{"@id":"https:\/\/intexsoft.com\/#website"},"datePublished":"2020-04-09T14:27:00+00:00","dateModified":"2022-07-19T12:40:44+00:00","description":"Three.js\u00a0is a JavaScript library containing a set of predefined classes for creating and displaying interactive 3D graphics in WebGL.","breadcrumb":{"@id":"https:\/\/intexsoft.com\/blog\/introduction-to-3d-three-js-basics\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/intexsoft.com\/blog\/introduction-to-3d-three-js-basics\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/intexsoft.com\/blog\/introduction-to-3d-three-js-basics\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/intexsoft.com\/"},{"@type":"ListItem","position":2,"name":"Introduction to 3D: Three.js basics"}]},{"@type":"WebSite","@id":"https:\/\/intexsoft.com\/#website","url":"https:\/\/intexsoft.com\/","name":"IntexSoft","description":"...","publisher":{"@id":"https:\/\/intexsoft.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/intexsoft.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/intexsoft.com\/#organization","name":"IntexSoft","url":"https:\/\/intexsoft.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/intexsoft.com\/#\/schema\/logo\/image\/","url":"https:\/\/intexsoft.com\/app\/uploads\/2021\/05\/Logo.png","contentUrl":"https:\/\/intexsoft.com\/app\/uploads\/2021\/05\/Logo.png","width":156,"height":33,"caption":"IntexSoft"},"image":{"@id":"https:\/\/intexsoft.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/intexsoft.com\/wp-json\/wp\/v2\/blog\/7553"}],"collection":[{"href":"https:\/\/intexsoft.com\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/intexsoft.com\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/intexsoft.com\/wp-json\/wp\/v2\/users\/1"}],"wp:attachment":[{"href":"https:\/\/intexsoft.com\/wp-json\/wp\/v2\/media?parent=7553"}],"wp:term":[{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/intexsoft.com\/wp-json\/wp\/v2\/blog_category?post=7553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}