In the fourth installment of my Parallax deep dive, I discuss one technique to animate elements along a complex path. I discuss how to use an SVG path created in Illustrator to define an animation…
Mouse Parallax
In the fifth installment of my Parallax deep dive, I discuss how to use mouse movement to apply a parallax effect. Using the same plugin exporting layout data from Illustrator that I discussed in Episode…
Beyond Parallax
This is my last episode in my series on parallax. I’m going to go through one quick demo of how we can trigger events on items based on their position in the viewport. I also…
Three.js Introduction
Three.js is an open source javascript library for drawing 3d graphics on the web. It was created by Ricardo Cabello (aka. Mr. doob). It grew out of the work he had done for Flash on…
Three.js Getting Started
Let’s set up a basic scene in Three.js. The first thing you need to do is include the Three.js library. You can download it at threejs.org. You can also use the CDN url from cdnjs…
Three.js Geometry
Geometry defines the shape of the objects we draw in Three.js. Geometry is made up of a collection of vertices and often faces which combine three vertices into a triangle face. You can create your…
Three.js Materials
Materials determine how the surface of our geometry is drawn in Three.js. If the Geometry is our skeleton, defining the shape, then the Material is our skin. There are a variety of different types of…
Three.js Custom Materials with ShaderMaterial
Three.js comes with many materials built in. All these materials drawn in WebGL utilize shaders. Shaders are small programs that run on the GPU written in GLSL. We can create our own custom materials in…
Three.js Lights and Cameras
Lights can really make the difference between a seemingly flat scene and a visual masterpiece. Think of any photo-realistic painting or photograph and then imagine it with poor lighting and the impact is just not…
Three.js Post Processing
Post-Processing is the addition of image effects or filters to your entire scene. This can change the feel of your scene and simulate interesting visual effects. Some examples are applying a sepia tone, or adding…