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

Algorithms With JavaScript: Merge k Sorted Lists

PATCHing the DOM in JavaScript

ReferenceError: window is not defined

What Does It Take to Be a Successful Web Developer?

The over-identification with politics isn’t just an issue with white conservative evangelicals

Data Structures and Algorithms: Duplicate Values

Transform and Validate Query Parameters in NestJS (2022)

Kafka Streaming API: Introduction

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

A Quick Intro to the Pants Build System

Solarpunk: Where Nature, Artificial Intelligence and Humans Live In Harmony

GSoC 2022 RTEMS — Community Bonding Period — Week #1

Stop Reading Top to Bottom! This Is How To Read An Academic Paper.