BlackThread.io

Three.js Tutorials

Quickly get up and running with three.js

Introduction

Welcome to the Black Thread series of tutorials on three.js! Here we'll focus on getting to know all the amazing features that make this beautiful library so great to work with, while creating a minimal app that uses best practices and is ready for you to reuse in your own projects

1: Getting Started

In this tutorial we'll go over everything you need to know to get a very simple three.js app running in your browser.

2: Lights, Color, Action!

Picking up where we left of in the last tutorial we'll add lights, color and animation to our scene.

3: Resizing the canvas

Here we'll add an event listener that watches for browser window size changes and smoothly updates your scene to match the new size

4: Introduction to textures

In this tutorial we'll explain how texture maps (images) are used to make realistic looking materials. Then we'll load one up and show how it can be used in our scene

5: Adding Camera Controls

The simplest way to add interactivity to our scene is to add a camera controller. In this tutorial we'll use a ready made plugin called OrbitControls to rotate our camera around the scene

6: Shapes and Transformations

We'll finish up these tutorials by taking a quick look at the built in geometries and how to position them in 3D space within our scene using translation, scaling, and rotation, the so called 'affine' transformations

Next steps

You may have finished these tutorials, but your journey into 3D is just starting! Here we'll cover all the best places on the web to ask for help with three.js, including the official forum, reddit and StackOverflow