The Fundamentals Of Three.js

For those who have been curious about jumping into Three.js, I am elated to share that the documentation is outlined in a fantastic way, there are tons of excellent tutorials on the web and you really do not have to spend a bunch of time researching and learning about this library in order to make stunning 3D webpages. The demands and requirements for the world of front end design are manifold and always in a state of flux due to industry expectations and the nonstop evolution of frameworks and libraries (especially in JavaScript) and so dabbling in the territory of 3D can be beneficial for anybody curious about the composition of these technologies, wants to make their portfolio or landing page stand out in a contemporary way, or work towards finding a position on the cutting edge of front end development!

WHAT IS THREE.JS?

Three.js is a JavaScript library and API which was built on top of WebGL with the aim of designing and rendering easy 3D animations. The modeling capabilities are fairly limited compared to software such as Blender, but the idea is to incorporate 3D shapes in a simple and straightforward manner. Three.js can also be written directly between script tags within HTML documents requiring minimal linking of auxiliary documents and directories.

WHAT IS REQUIRED TO RUN THREE.JS?

With a browser, text editor, download from threejs.org / a good ‘ol “npm install three” you can be up and writing Three.js code in no time!

WHAT ARE THE PROPERTIES OF THREE.JS?

All Three.js projects require at minimum:

  • Scene — this takes the form of “scene = new THREE.Scene()”.
  • Camera — to have a perspective from which to view the animations.
  • Objects — many of which can be located here.
  • Mesh — this combines the geometry and material together.
  • Renderer — for the final output.

Many of these have extended properties such as the luminosity of the lighting, size and rotation of the objects, and the specifications of the geometry. JavaScript can of course be combined with any of these, such as using a for loop to create multiple lights in random locations and beyond.

WHERE IS THE BEST PLACE TO START?

I began coding along to a YouTube tutorial which I will link here, it breaks down the fundamentals in an extremely clear way and got me excited about learning more about this library, as I hope it does for you as well!

Happy coding :)

(made entirely from three.js)

--

--

--

Programmer / Artist / Believer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

billboard.js 1.11.0 release: Lazy render, new TextOverlap plugin & more!

WebdriverIO — getting started

React Native — Monorepos & Code Sharing

React Native x Yarn Workspaces

How to more accurately estimate read time for Medium articles in JavaScript

JavaScript Weekly Issue 26

Installing Tailwind 2.0 in your Rails project

paint roller

Build a Linked List with TypeScript

Setup Sonarqube With Angular Project in 6 Minutes

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Lucas Thinnes

Lucas Thinnes

Programmer / Artist / Believer

More from Medium

HistCon brief: Time Capsule

Lemon-Sick, Walnut-Thick

How to Configure BGP AS-PATH prepend

Sahil Kurup FINAL Column