--- title: Three JS – 3D objects on web description: Three JS – 3D objects on web --- [![e-Zest logo\_An accion lab company\_Colour](https://blog.e-zest.com/hubfs/images/Logos%20with%20Tagline/Corporate/SVG/e-Zest%20logo_An%20accion%20lab%20company_Colour.svg "e-Zest logo_An accion lab company_Colour")](https://www.e-zest.com/) - [WORK](https://www.e-zest.com/our-work) - [SERVICES](https://www.e-zest.com/our-services) - [Product Engineering](https://www.e-zest.com/digital-product-engineering-services) - [Enterprise Data Services](https://www.e-zest.com/enterprise-data-services) - [Digital Commerce](https://www.e-zest.com/digital-commerce-services) - [Digital Operations](https://www.e-zest.com/digital-operations) - [Digital Consulting](https://www.e-zest.com/digital-transformation-consulting-services) - [Digital Experience Design](https://www.e-zest.com/digital-experience-design) - [INSIGHTS](https://blog.e-zest.com/) - [CAREERS](https://www.e-zest.com/careers) - [ENTERPRISE DATA SERVICES](https://www.e-zest.com/enterprise-data-services) - [GENERATIVE AI](https://www.e-zest.com/generative-ai) - [Healthcare](https://healthcare.e-zest.com) - [Contact Us](https://www.e-zest.com/contact-us) - ![Elevating Product Engineering with AI and ML](https://blog.e-zest.com/hubfs/Elevating%20Product%20Engineering%20with%20AI%20and%20ML.jpg) [BLOGS](https://blog.e-zest.com) #### Elevating Product Engineering with AI and ML As technology evolves and customer choices broaden, there is an increasing ... [Read more](https://blog.e-zest.com/elevating-product-engineering-with-ai-and-ml) - ![e-Zest – An Accion Labs Company gets Recognition as a Contender in the ISG Provider Lens™ Study on Digital Engineering Services 2024](https://blog.e-zest.com/hubfs/e-Zest%20%E2%80%93%20An%20Accion%20Labs%20Company%20-%20Gets%20Recognition%20as%20a%20Contender%20in%20the%20ISG%20Provider%20LensTM%20Study%20on%20Digital%20Engineering%20Services%202024.jpg) [NEWS](https://blog.e-zest.com/news) #### e-Zest – An Accion Labs Company gets Recognition as a Contender in the ISG Provider Lens™ Study on Digital Engineering Services 2024 We are delighted to announce that e-Zest – An Accion Labs Company has been ... [Read more](https://blog.e-zest.com/news/e-zest-an-accion-labs-company-gets-recognition-as-a-contender-in-the-isg-provider-lens-study-on-digital-engineering-services-2024) - ![e-Zest Solutions supports Digital Pune Mission](https://blog.e-zest.com/hubfs/blog-files/Digital%20Literacy%20Bus%20e-Zest.png) [CSR](https://blog.e-zest.com/csr) #### e-Zest Solutions supports Digital Pune Mission **Pune, India:** e-Zest Solutions, a leading digital technology innovation ... [Read more](https://blog.e-zest.com/csr/e-zest-solutions-supports-digital-pune-mission) - [Work](https://www.e-zest.com/our-work) - [Services](https://www.e-zest.com/our-services) - [Insights](https://blog.e-zest.com) - [Careers](https://www.e-zest.com/careers) - [Enterprise Data](https://www.e-zest.com/enterprise-data-services) - [Generative AI](https://www.e-zest.com/generative-ai) - [Innovations](https://www.e-zest.com/innovations) - [Healthcare](https://healthcare.e-zest.com) - [About](https://www.e-zest.com/about-us) - [Contact](https://www.e-zest.com/contact-us) - [Blog](https://blog.e-zest.com/) - [News](https://blog.e-zest.com/news) - [CSR](https://blog.e-zest.com/csr) - [![Linkedin Icon](https://blog.e-zest.com/hubfs/icons/linkedin_icon_white.svg)](https://www.linkedin.com/company/e-zest-solutions/) - [![Twitter Icon](https://blog.e-zest.com/hubfs/twitter-logo-silhouette%20(5).svg)](https://twitter.com/ezest) - [![Facebook Icon](https://blog.e-zest.com/hubfs/facebook-app-logo%20(4).svg)](https://www.facebook.com/61259256638) - [![Instagram Icon](https://blog.e-zest.com/hubfs/instagram-logo%20(4).svg)](https://www.instagram.com/ezestsolutions/) - [![Youtube Icon](https://blog.e-zest.com/hubfs/icons/youtube_icon_white.svg)](https://www.youtube.com/user/ezestcorporate) [![Go to top icon](https://blog.e-zest.com/hubfs/AA%20Assets/top%20button.svg)](https://blog.e-zest.com/three-js-3d-objects-on-web/#top) Hit enter to search or ESC to close Insights e-Zest members share technology ideas to foster digital transformation. - [Blog](https://blog.e-zest.com) - [News](https://blog.e-zest.com/news) - [Podcasts](https://www.e-zest.com/podcasts) - [Healthcare](https://blog.e-zest.com/healthcare) - [CSR](https://blog.e-zest.com/csr) - [Whitepaper](https://blog.e-zest.com/whitepaper) - [Playbook](https://blog.e-zest.com/playbook) - [Media Kit](https://www.e-zest.com/media-kit) # Three JS – 3D objects on web [Geetanjali Pukale](https://blog.e-zest.com/author/geetanjali-pukale) Feb 17, 2015 [Java](https://blog.e-zest.com/topic/java) [Technology](https://blog.e-zest.com/topic/technology) - - - - When the task of rotating a tetrahedron on the web came to me, I was thinking about ways to achieve it. I knew it was possible having seen it on one of our client projects. I started my research and began my baby steps towards drawing a 3D object and showing it on webpage. I zeroed down on a couple of options but chose - Three JS. What is Three JS? It is a wonderful library which provides many functions and guidelines to plot 3D objects and rotate, zoom in & zoom out and various functionalities you can’t imagine. So, it’s perfect for such a need. But wait! I forgot to tell you the pre-requisites. The basic need is a browser which supports Canvas, WebGL and SVG. Simply, you need a browser which supports HTML 5. All the latest versions of browsers support these new features. Now let’s take a look at the minimum steps needed to plot a 3D cube on screen. 1\) Download three.min.js in say “js” directory. The link : http://threejs.org/build/three.min.js 2\) Create a HTML file say cube\_rotate.html ``` Cube Rotate ``` 3\) Add scene, in this scene add the object. The code is : ``` var scene = new THREE.Scene(); ``` 4\) Now add a camera to see the scene. This camera can be of different types. Up till, now I have used perspectiveand orthographic camera. The code: ``` var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); // parameters: view, aspect ratio, near clipping plane, far clipping plane ``` 5\) Now render the scene and camera. The code would be ``` var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); For older browsers you can have a function which will return rendered based on the browser support. The code is: function webglAvailable() { try { var canvas = document.createElement( 'canvas' ); return !!( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) ); } catch ( e ) { return false; } } // function call if ( webglAvailable() ) { renderer = new THREE.WebGLRenderer(); } else { renderer = new THREE.CanvasRenderer(); } ``` 6\) Now the real cube comes in to the picture. Add a cube to the scene noting the fact that a cube here is just a geometry figure with a set of points which you cannot see unless you have some material associated with it. There is also one concept called ‘Mesh’ which is used to take an object and add material to it. In the next few steps, define the material and then add it to your geometry with help of mesh. ``` var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; // ``` (By default, when you call scene.add(), the thing you add will be added to the coordinates (0,0,0). This would cause both the camera and the cube to be inside each other. To avoid this, simply move the camera out a bit.) 7\) You may think that everything is good to go. However, you need to write some more code to make it visible on screen i.e. do the actual rendering process. ``` function render() { requestAnimationFrame( render ); renderer.render( scene, camera ); } render(); // this is my function call ``` 8\) Now animate this cube ``` cube.rotation.x += 0.1; cube.rotation.y += 0.1; ``` The complete code will be ``` Cube Rotate ``` Here’s how it looks: **VIDEO** In the next blog, we will examine complex examples with mouse interactions. Keep coding until then :) - - - ### Similar Blog [![How to Create Own Custom JMeter Template?](https://blog.e-zest.com/hubfs/How%20to%20Create%20Own%20Custom%20JMeter%20Template%201280x667%202560x1334.jpg) How to Create Own Custom JMeter Template? We frequently need to construct Test Plans with a similar format when working on web application performance testing using Apache ... By Kishore Bhamare Feb 28, 2023](https://blog.e-zest.com/how-to-create-own-custom-jmeter-template) [![Hoisting in JavaScript](https://blog.e-zest.com/hubfs/Blog_Files/Hoisting%20in%20JavaScript-190225.png) Hoisting in JavaScript Generally, we all have heard of the term ‘hoisting’ with reference to flag hoisting. By Ajit Sakhare Feb 26, 2019](https://blog.e-zest.com/hoisting-in-javascript) [![OWASP ZAP Modes](https://blog.e-zest.com/hubfs/OWASP%20ZAP%202.5.0.png) OWASP ZAP Modes OWASP ZAP is an open-source web security testing tool, used for detecting vulnerabilities in web applications.ZAP provides you ... By Kishore Bhamare Dec 22, 2016](https://blog.e-zest.com/owasp-zap-modes) [![Automation using Selenium WebDriver Frameworks](https://blog.e-zest.com/hubfs/Selenium_blog_image.png) Automation using Selenium WebDriver Frameworks Frameworks help to structure our code and make the maintenance process easy. Without frameworks we will place all our code and ... By Uddhav Naik Sep 26, 2016](https://blog.e-zest.com/automation-using-selenium-webdriver-frameworks) [Tutorial: Elasticsearch Integration in a Java Application The whole world relies on search to get access to relevant information and data. Handling this large amount of data presents a ... By Jyoti Agrawal Jun 11, 2015](https://blog.e-zest.com/tutorial-elasticsearch-integration-in-a-java-application/) [![All About Web Content Accessibility Guidelines](https://blog.e-zest.com/hs-fs/file-3395399904-jpg/blog-files/wcag.jpg)](https://blog.e-zest.com/all-about-web-content-accessibility-guidelines/) [All About Web Content Accessibility Guidelines](https://blog.e-zest.com/all-about-web-content-accessibility-guidelines/) [My inspiration of writing this blog was the](https://blog.e-zest.com/all-about-web-content-accessibility-guidelines/)[activity conducted by e-Zest](http://www.e-zest.net/blog/a-day-out-with-special-children-on-childrens-day/)on Nov 14, 2014. The concern that we showed to those ... By Geetanjali Pukale Dec 11, 2014 [![A Layman’s Guide to Google Charts](https://blog.e-zest.com/hs-fs/file-3419137191-png/blog-files/google-api.png) A Layman’s Guide to Google Charts Reporting is a major activity across all businesses. However, it is the visual impact of a report which makes it more interesting ... By Geetanjali Pukale Nov 07, 2014](https://blog.e-zest.com/a-laymans-guide-to-google-charts/) [e-learning and Moodle e-learning by definition means learning to use electronic media. In this new age of technology, it goes without saying that the ... By Geetanjali Pukale Oct 21, 2014](https://blog.e-zest.com/e-learning-and-moodle/) [![ImageMagick – the real magic with image](https://blog.e-zest.com/hs-fs/file-3419136461-png/blog-files/compare-bag_frame1.png) ImageMagick – the real magic with image Handling an image and dealing with an image has always been a hurdle for any programmer. Life has undoubtedly become simpler with ... By Geetanjali Pukale Oct 17, 2014](https://blog.e-zest.com/imagemagick-the-real-magic-with-image/) ## Helping Organizations Thrive in the Digital Age [Contact Us](https://www.e-zest.com/contact-us) - [About](https://www.e-zest.com/about-us) - [Services](https://www.e-zest.com/our-services) - [Work](https://www.e-zest.com/our-work) - [Insights](https://blog.e-zest.com/) - [Healthcare](https://healthcare.e-zest.com/) - [Accion Labs](https://www.accionlabs.com/) - - - - - - Dallas - Detroit - Hannover - Vienna - London - Pune © 2025 e-Zest Solutions - [Privacy Policy](https://www.e-zest.com/privacypolicy) - [Cookie Policy](https://www.e-zest.com/cookie-policy) Contact us Contact us e-Zest is a leading digital innovation partner for enterprises and technology companies that utilizes emerging technologies for creating engaging customers experiences. Being a customer-focused and technology-driven company, it always helps clients in crafting holistic business value for their software development efforts. It offers software development and consulting services for cloud computing, enterprise mobility, big data and analytics, user experience and digital commerce.