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
Into Vertex Shaders
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
Creating 3D Cube: A Practical Guide to Three.js with Live Demo
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.
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 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.
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.