Three js, easy 3D in your browser for when two dimensions just aren't enough by Jos Dirksen


Subscribe to Devoxx on YouTube @
Like Devoxx on Facebook @
Follow Devoxx on Twitter @

Modern browsers have high performance JavaScript engines and great WebGL support for creating 3D scenes, animations, games and visualisations and with upcoming standards like WebVR, WebAR and WebXR, it becomes much easier to use your frontend skills to add 3D, VR and AR capabilities to your applications.

Creating 3D scenes from scratch, however is difficult using just the standard JavaScript APIs and WebGL. You need to know a lot of math, understand how to write shaders and integrate the well known JavaScript world with the WebGL concepts, just to get started, or commit yourself to a 3D framework (e.g Unity).

Three.js is a library which wraps all the WebGL concepts in a simple API, so you can program in JavaScript, and easily create great looking 3D scenes. Three.js comes with a large set of lights and materials, supports animations, and can load most 3D formats. It even has supports for VR and AR.

In this session we’ll walk you through the main concepts of Three.js, and show you how easy it is to create great looking and complex 3D scenes, which work in mobile and desktop browers, react-native and even support ArCore and ArKit. All through a couple lines of JavaScript.

Jos Dirksen
From Smartjava
I’ve worked as a software developer and architect for more than a decade. Besides working I like talking and writing about technologies. I’ve written a couple of books on Scala, REST, D3 and Three.js and currently work as a fullstack engineer on a Scala and React project.

I’m a big fan of creating data visualisations using D3 and Three.js, since they provide a great set of tools to make sense of data. A number of the stuff I created can be seen on my blog at

Basically I like talking, writing and discussing about technology. Whether it is frontend, backend or DevOps and cloud related.


Xem thêm bài viết khác:


  1. very good presentation … The last topic has just blown my mind …
    The scope of it is infinite!!!.. I want webXR released out already ..

  2. Nice presentation, but it seems that the XR Viewer is not useful right now, b/c it requires creating Scene ID's using the XR Maker. I guess this is how the company, Nieko, will profit from the viewer. Great.

  3. When this stuff actually catches on and it's even close to large-scale adoption I can imagine even a quarter of the world's websites that would use this model would overload bandwidth I don't even think 5G would be able to keep up with this if every one of these pages are going from 20 to 35 megabytes to 20 to 35 gigabytes😲

  4. I would really appreciate it if you make a video showing the procedure so that intellicence works in VScode with Three.Js


Please enter your comment!
Please enter your name here