Ancient Brain Starter Tutorial (Three.js)

This tutorial shows you how to get started on Ancient Brain (Three.js version).

To be precise, this shows how to start coding on Ancient Brain in the JavaScript programming language, using the Three.js library for the graphics. (You can use other libraries for graphics, notably P5.)

On Ancient Brain, you can edit and run programs in the browser, with no install. You have to register and get a username if you want to save your creations.

This tutorial will show you how to copy and edit a simple "World" called "One Cube World". (Click on a World image to run it.) You will soon be able to make many variants of this World, such as "Lamborghini cube". You can mouse drag (or touch drag) the camera in these Worlds.

One Cube World (...
770 runs ♦ 2 likes
By Starter user  
Created: 11 Apr 2018
Modified: 13 Mar 2020
Simple starter World (Three.js version). Cube of random color. Built-in camera control.
Lamborghini cube
13 runs ♦ 0 likes
By Mark Humphrys  
Created: 13 Dec 2019
Modified: 13 Dec 2019
Simple variant of One Cube World

Contents

  1. Register and login
  2. Run the Starter World
  3. Clone the Starter World
  4. Edit your World
  5. First look at the code
  6. Change some code
  7. Program structure
  8. Paint the cube
  9. Upload your own image
  10. Make the object move
  11. Add music
  12. Errors
  13. Documentation
  14. Clone and edit other Three.js Worlds
  15. Finish


Notes


Introduction video

Here is a high-level video introduction to Ancient Brain. It does not assume you have ever coded, or ever heard of JavaScript graphics.

Get started

Enough talk. Let's start the tutorial!
Step 1 of 15