webgl archive
Seeing Sounds with Three.js
This is a tutorial series I have been writing, and very much a work in progress. The series provides an introduction the world of three.js through developing a music visualizer. The tutorials created and code used so far can be seen below: Contents Three.js Basics Get up to speed with...
Seeing Sounds with ThreeJS + WebGL [Intro]
Introduction If you imagine a film set, there's a guy pointing a camera at a scene of different props, and he can do so from different angles. It's all pretty similar in three.js, which is made up of objects that make coding 3D experiences much more natural to us. For...
Beginners guide to three.js: set your first scene
Introduction If you imagine a film set, there's a guy pointing a camera at a scene of different props, and he can do so from different angles. It's all pretty similar in three.js, which is made up of objects that make coding 3D experiences much more natural to us. For...
Seeing Sounds [Part 1]: Create the star field
This tutorial assumes you have a basic knowledge of three.js, and know how to set up a very simple scene using the three.js renderer and camera. If you don't, then first have a look at my getting started guide here. In this part, we're going to get more familiar with...Seeing Sounds [Part 2]: Creating the terrain
This is the second part of the Seeing Sounds three.js series. Part 1 looked at creating a flying star field, and in this part we'll create the terrain underneath it. At some point, we'll bring the two parts together, and then add some extra spheres that will animate with the...
Seeing sounds [Part 3]: Star field + Terrain
Previously, we learned how to create an animating star field in part 1 of the Seeing Sounds series with the outcome below: See the Pen Three.js - Star field by Graeme Fulton (@GraemeFulton) on CodePen. Then, in part 2, we learned how to create the following terrain: See the Pen Three.js...
Seeing sounds [Part 4]: Animating a terrain with three.js
Prerequisites This post assumes you have completed this previous tutorial, where we'd created both a 3D terrain, and an animating starfield, and combined them into a single three.js experience. The source code where we left off looks like this. Outcome Now, we'll look at how we can get the terrain animating so that from...
Create an infinitely open 3D world with three.js
Using three.js, there are different ways to create the effect of an 'infinite world' where a user can never reach the end due to it dynamically regenerating more terrain. This post looks at a couple alternative ways to create this effect, leading towards the goal of enabling a user to navigate...
You can't escape this world (an infinite three.js world)
This post will show a step by step overview of how to implement an infinite world in three.js using a method outlined in a previous post. This is just a high level summary using YouTube videos, I'll go into the code in another post. 1. Start off with three tiles First, create three tiles...
Code an infinite 3D world with three.js [Part 1]
Intro This tutorial will show you how to create an infinite terrain that can be used in combination with a Chase Camera. If you try the Chase Camera demo, the concept created in this tutorial is the creation of new terrain when the object reaches the edge of the existing terrain. Outcome...
Code an infinite 3D world with three.js [Part 2]
Part 1 of this tutorial left off with just one column of tiles, and the ability to move along the Z axis infinitely. Here, we're going to build the full grid, and enable the same infinite movement across the X axis. Step 1: Build up a grid Just by changing the X...
First person navigation with threeJS
This tutorial will show you how to navigate through a 3D environment using your keyboard's arrows, much like a first person shooter game such as Doom (or Halo these days). To achieve this, you'll need three things: A surface to navigate along - use planeGeometry or follow this guide to set up a...