If you’re a game developer, this article may be commonplace. But to a lot of front-end developers and interactive designers (including myself), this concept is rather new. “Ray casting is the use of ray–surface intersection tests to solve a variety of problems in 3D computer graphics and computational geometry.”

When working with 3D graphics on the web using Three.js, graphics are rendered using the HTML canvas API. With some “exceptions”, this can stop you from accessing your rendered objects as DOM elements. For example, if you create a cube in three.js and check your browser inspector, you’ll notice that you…

Generative art created with Three.js:

Every developer has their favorite tools, languages, and technologies to work with. Sometimes it derives from another passion such as solving mathematical problems, white-hat hacking, or organization. Luckily, open-source technologies allow everyone to pick up their tool of choice and create something amazing. Now let me show you how you can leverage one of my favorite tools, Three.js

What is Three.js?

Three.js is a JavaScript library for creating, rendering, and even animating 3D graphics in the browser. If you are into developing web-based games, creating web animations, or creative coding, this would be a great option to explore.

Under the hood, Three.js utilizes…

There are many ways to create objects in JavaScript. One way is to create a blueprint or constructor before actually building your objects. Let's begin!

In this example, we will create a blueprint or Constructor function called Anime. Anime will become a general blueprint for all the other objects created from it.

What is a Constructor Function?

A constructor is essentially a function that acts as a blueprint for creating objects. A convention for constructors is to always capitalize its function name. View below:

const app = (function(){  //constructor function
function Anime(name,type,year,director){ = name;
this.type = type;
this.year = year;
this.director = director;

A hero image manipulated with SVG filters

The front-end development space is nothing short of electrifying. It feels like every other week I find a tool, methodology or framework that intrigues me. With all of these “shiny things,” I tend to remind myself to always practice clever adoption methods.

This week, while working on an SVG animation demo, I discovered an interesting way to manipulate SVG elements using the SVG <filter> element. As a developer who specializes in interactive design and UX, this finding sparked a variety of ideas on animated transitions, hover effects and other ways to enhance the presentation of web applications.

Structuring a Basic SVG

Before I get…

Nathan Keeys

Frontend Developer / Designer / Founder of Digital Anthro. Digital Anthro is a design and web development studio.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store