Three.js is a Javascript framework build on top of WebGL which makes it easier to create 3D graphics in the browser, it uses a canvas + WebGL to display the 3D scene. If you want to do 3D models scenes, more like real 3D, use Three.js. It`s a nice and simple layer on top of WebGL, it is well documented, and has a lot of documentation. Start with the Three.js documentation or check out these tutorials and examples below.

Building up a basic demo with Three.js

In this article we’ll take you through the real basics of using Three, including setting up a development environment, structuring the necessary HTML, the fundamental objects of Three, and how to build up a basic demo.

The Missing Manual for three.js!

This is an exciting new book written by one of the core three.js developers.

Learn D3.js for free

This course contains ten tutorials on how to create data visualizations with D3. It’s perfect for anyone who wants to learn to build charts for the web.

Creating a custom shader in Three.js

Before going all in on shaders it is probably a good idea to explain what three js is. Threejs is a javascript library to ease the process of creating 3D scenes on a canvas. Other popular solutions like a-frame and whitestorm js are build on top of it. If you have ever played around with those but want even more control definitely try it out!

Into Vertex Shaders

These tutorials are intended for people who know JavaScript and want to get into 3D graphics development, though some prior experience with Three.js will help.

Learn by Example

To render amazing 3D scenes, nowadays no more plugins or additional installations are required. The most widespread Browsers like Chrome, Firefox, Safari, Opera and Internet Explorer support WebGL, the hardware accelerated OpenGL for browser. Learning pure WebGL from scratch is hard. So, why don’t use a library which wraps WebGL and is easy to use? Three.js is what you are searching for. It provides a lot of awesome examples, but no guided tutorials.

ThreeJS Intermediate Skill Tutorials

ThreeJS is probably the most used 3D JavaScript library on the web and it`s pretty easy to get started with. However, I found there is little beyond the introductory tutorials. You quickly get dropped off a skills cliff. We need something in between the intro `How to draw a cube` and `Let’s fill the screen with shader madness` levels. So here is on going series of intermediate skill ThreeJS tutorials.

Creating 3D Cube: A Practical Guide to Three.js with Live Demo

Have you ever created a 3D object using JavaScript? Of course, you might have done. But creating 3D with pure JavaScript requires a large amount of code, and that`s where Three.js shows its magic. With Three.js, you can build 3D environments in your browser with a very low level of complexity.

How to Create a Sticky Image Effect with Three.js

A recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js.

Build an Interactive Virtual Globe with Three.js

Get started with VR/3D by building an interactive, rotating planet Earth!

Interactive Particles with Three.js

This tutorial is going to demonstrate how to draw a large number of particles with Three.js and an efficient way to make them react to mouse and touch input using shaders and an off-screen texture.

How to Make a Three JS Music Visualiser

Creating a visualiser like this is easy and fun when you have the framework, below is a tutorial for the all the essentials to make a basic version for yourself.

Raining Experience in VR Tutorial Using Three.js and WebVR

We`re going to use MeshLambertMaterial instead of MeshBasicMaterial to add our 360 photo. This is because MeshLambertMaterial because this material reacts to light in the scene.

Creating Photorealistic 3D Graphics on the Web

This is a multi-part walkthrough for creating photorealistic 3D graphics on the web. You will learn how to build a simple 3D scene with three.js and make it look semi-photorealistic using some common lighting, texturing and animation techniques. The purpose of this walkthrough is to build a simple and comprehensible example that is also interesting and engaging.

The Solar System

This is a project powered by Three.js and WebGL. All objects within this project have been modeled to scale based on real astronomical data. The scene currently renders the sun, all eight planets (nine if you side with Pluto being a planet), each planet’s moons, the asteriod belt and thousands of stars.

Sneeze the dragon

Help the dragon to make fire, click as fast as possible then release. A smoke and fire study using ThreeJS and TweenMax.

RetroFighter Gunship

A Three JS scene in an 80’s retro theme, that uses Perlin noise to create the effect of continuously flying over a wireframe terrain towards some distant mountains, all while listening to 80’s music and flying a badass ship that shoots lazers for no reason.

Playing kid – morph and skeletal animation

Combine morph and skeletal animation with threejs. The TV screen show your live camera input or (if you not allow) loop a video.

SoundCity

SoundCity is an abstract town which reacts to the electronic song. This project was made in 3 days with Three.JS and the WebAudioApi.

When After Effects meets ThreeJs

Using a module called ae-to-json to export tracking data from Adobe After Effects. These data allow me to move the camera in my scene the same way the camera moved while filming the video.
That way, we have the feeling that the cubes are in the same environment that the actual video.

Thank You – 500

Most of the stuff in here is just bootstrapping. Essentially it’s just setting ThreeJS up so that it renders a flat surface upon which to draw the shader. The only thing to see here really is the uniforms sent to the shader. Apart from that all of the magic happens in the HTML view under the fragment shader.

ThreeJS Gradient

Great example of how to define a scene background with gradients.

Page Reveal Effect

This simple effect is made with ThreeJS and TweenMax.

Interactive 3D background

This simple interactive background is made with ThreeJS and a PlaneBufferGeometry animated with Simplex noise.

Many Icons in 3D using Three.js

The Time Remap Effect using Three.js and TweenMax.