Introduction To Design Fundamentals with Three.js

Spend around 30 seconds on any website that uses Three.js, and it’s hard to not be blown away - even if you’re already a Web Developer.

At first glance, the site will often look like it’s just a fairly cool image or design, but then you realize you can interact with the entire site in 3D!

You can move objects, change perspective, interact with elements and suddenly it feels like some kind of app or video game versus a boring old website.

The really cool thing?

Building these sites is actually quite easy. The real magic unfolds when we unite the capabilities of Three.js with timeless design principles, such as:

• Spatial Design
• Color Design, and
• Interaction and Experience Design

In this guide, we’ll take a look at some of these common design principles that you will have used before, as well as the differences and changes when using these principles with Three.js.

This way you can start to see the power of this tool before using it, and then decide if it’s the next skill you want to add to your Web Development toolkit.

Sidenote: If you want to learn about each of the areas I cover in this guide, as well as all areas of Three.js, then check out my complete Three.js course.

If you're a JavaScript developer who is serious about taking your coding skills and career to the next level by creating incredible interactive 3D experiences directly within a web browser, then this is the course for you.

I’ll help you go from an absolute beginner to learning Three.js and getting hired as a Web or Game Developer with a specialization in 3D designs.

I’ll even show you how to create an interactive project portfolio to show off your work to prospective employers, just like the one below:

With that out of the way, let’s get into answering some basic questions about Three.js

What is Three.js?

Three.js is a powerful JavaScript library that empowers both Web Developers and Web Designers to create captivating 3D experiences.

For example

Here’s a great portfolio site over at Joshua's World.

Joshua showcases his experience and projects in an immersive 3D experience.

You can click and drag, and the cyclist moves around the course, highlighting key areas of Joshua’s project portfolio as the cyclist travels.

Likewise, Madbox pushes the limits of gaming on the web.

And finally, a little shameless plug for my own portfolio site:

It’s an interactive Ramen Shop that works as a portfolio to showcase all my projects and experiences. (It may have won a few design awards).

TL;DR

With Three.js, you can craft interactive and dynamic 3D scenes that were once reserved for video games and high-end software.

Whether you’re an artist, a developer, or both, Three.js democratizes the world of 3D design, making it accessible to anyone with a passion for visual storytelling.

Why use 3D when 2D works fine?

What is this, the middle ages!?

All joking aside, the initial allure of 3D seems evident — it’s cool, captivating, and visually striking. However, in the tech world where novelty fades, we should always ask ourselves:

‘What tangible advantages does 3D bring to web experiences?’

This really is the most important question we should ask as a Designer or Developer. Because if we build something and it’s a bad user experience, even if the design is amazing, it still won’t get used.

Well, the good news is that there are 3 main ways that Three.js helps to improve that user experience:

1. Improved engagement
2. Visual storytelling, and
3. Interactivity

Engagement

Apple’s Vision Pro showcase is built using Three.js allowing users to view the product in 3D.

With 3D, products can be explored from all angles, enhancing user engagement and trust. Users become active participants, not passive spectators.

This means that the site visitor can manipulate and move the product around to get a better look at all areas.

Interactivity

3D also allows users to interact with content on a deeper level. It’s not just about looking; it’s about doing. This interactivity boosts engagement and makes web experiences more memorable.

If you think about it, this 3D site is actually a great way to sell this product, as the product itself is designed to be picked up and manipulated by the user. And so by allowing this interaction, it helps tell a story while also bringing concepts and ideas to life in ways that were once reserved for other media like movies and games.

The user gets to see how the product works by moving it around on the screen. It’s not a perfect representation, but as close as you can get without trying out the product in-store.

Editor’s note: I originally thought the Vision Pro was a little boring and wasn’t interested. However, after interacting on the site and seeing the demo, I almost immediately checked out the pricing to buy.

Something I probably would have never done on just a quick glance or screenshot.

TL;DR

3D isn’t just about looking good; it’s about creating meaningful, engaging, and interactive web experiences.

By harnessing its power wisely, we can unlock a realm of possibilities that extend far beyond the initial appeal of 3D aesthetics, while also getting that wow factor.

How Three.js works with core design principles

Remember that this guide isn’t intended as an exhaustive guide to design principles.

Rather, I want to look at 3 of the most important ones that Three.js can really stand out against 2D sites, so you can compare and contrast before you decide to learn it.

Let’s get into them.

Design Principle 1: Spatial Design with Three.js

In the world of Three.js, the art of visual and spatial design shares striking similarities with the principles applied in photography and videography.

Just like in photography, we have a scene, and we’ll use our camera to capture a window into our world. (This is actually a core part of how we design in Three.js, but that’s a topic for another guide).

For example

Rule of Thirds

In photography, the rule of thirds involves dividing the frame into a 3x3 grid, creating nine equally sized rectangles.

The idea is to place key elements along the gridlines or at their intersections, known as “power points.” This adds balance and interest to the composition.

While in Three.js, we can think of our 3D scene in a similar way. Placing important objects or focal points along these virtual gridlines can make the scene more visually appealing and balanced.

We can still follow this principle in traditional site design, but with Three.js, we can also have that principle be effective from multiple angles, making it really stand out.

Leading Lines

In photography, leading lines are lines within the frame that lead the viewer’s eye to a particular subject or point of interest.

For example

Notice how all the lines in this photo lead our eyes toward the subjects at the end of the pier.

In Three.js, you can also use the elements within your 3D scene, like paths or objects, to create virtual leading lines, to create a similar effect. These lines can then guide the user’s gaze, helping them explore the scene in a deliberate and engaging manner.

Again, it's a similar concept you will have used before, but when you can interact and still draw attention like this, it makes the site far more impressive as a user.

Angles and Perspective

We can also play around with different angles to convey various emotions.

For example

A low angle like the one used in the image below can make objects seem grand and powerful.

That was our goal for this site.

The client is selling an A.I. tool for cybersecurity professionals, and there's not many ways to depict an algorithm on its own.

So, we decided to use the imagery of a robot to depict the client's A.I. Even though it's not robotics related - it gave a feeling of being from the future. This then implies that this tool is the next best thing.

We didn't just stop there though. We also added some psychology to help further imply how good the tool is.

How?

Well, the image was already pretty cool, but by angling the eyeline below the robot, so that the viewer is looking up, it helped to convey that feeling of power and competence.

Normally we might just have a single image to do this. But thanks to 3D with Three.js, the viewer starts from a face-on effect before the camera pans down below the eye line - emphasizing that tone and feeling or superiority.

This way hopefully the audience will get the implication that if they use this tool, they will be the best in field also.

TL;DR

Now obviously, these are just a few examples of the “rules of composition” that can be taken from the world of photography and cinematography and applied to our design of 3D websites.

But can you see how you can use 3D to make the same principles you might use already and make them far more effective?

Let’s take a look at another principle where Three.js really ‘shines’ (pun intended)...

Design Principle 2: Color Design with Three.js

Since the inception of color photography as a medium, designers (and photographers/videographers) have used color to narrate stories, evoke emotions, and accentuate focal points.

• Red for anger
• Blue for sadness
• Green for peace

These same design principles can be seamlessly integrated into our Three.js designs, and allow us to elevate the way we employ color and lighting within our digital creations.

Here's how...

Method 1. Using Color Grading for Mood Enhancement

We can apply color grading techniques to our Three.js scenes, to affect people's moods.

Adopting the “orange and teal” color grading style can infuse warmth and contrast into your visuals since these two colors sit opposite on the color wheel. (It’s a very popular lighting technique with YouTube channels also).

Basically, by putting orange lighting in the midtones, and adding teal to the shadows, we can create a pleasing separation of colors, creating a cinematic visual experience.

This scene from Polygon Runway applies the principles of cinematic color grading to greatly enhance the visual appeal of the scene.

While this technique pays the most dividends when the lights are ray traced in a 3D modeling software like in the scene above, a similar effect can be created by choosing a blue hue for the color of the ambient light, while also adding an orange hue to any direct lights in the scene.

It’s as simple as:

// Add blue ambient light
const ambientLight = new THREE.AmbientLight(0x3333ff); // A soft blue hue
scene.add(ambientLight);

// Add orange directional light
const directionalLight = new THREE.DirectionalLight(0xffa500, 1); // Bright orange hue
directionalLight.position.set(50, 50, 50); // Adjust as needed
scene.add(directionalLight);

And boom! You have mood-enhancing lighting on your page that will adapt as the user interacts.

Don’t want a futuristic look?

That’s fine also! You can use a HemisphereLight instead to create a natural outdoor lighting effect by simulating a gradient of light from the sky to the ground.

By setting the sky color to blue and the ground color to orange, you achieve a soft, ambient light that mimics the diffuse sky and warm sunlight without casting shadows, ideal for simulating daylight conditions in a scene, like so:

const hemisphereLight = new THREE.HemisphereLight(0x3333ff, 0xffa500, 1);

The first argument in the THREE.HemisphereLight constructor specifies the sky color, allowing for the simulation of the sky's hue in the lighting of the scene. In the provided code example, 0x3333ff represents a soft blue color, mimicking the appearance of the sky overhead.

Method 2. Using Color Temperature to Convey Atmosphere

Cinematographers also use color temperature to convey atmosphere and mood.

We can do the same in Three.js by carefully selecting color temperatures that match your desired scene ambiance. Warm color temperatures (e.g., oranges and reds) can evoke coziness and energy, while cooler temperatures (e.g., blues and greens) create a sense of calmness and serenity.

For example

Here you can see I’ve used a two-tone effect to create a cool, but futuristic feel.

Thanks to the different types of lighting and sources, it also gives a more realistic feel as the user pans around the site.

Compare that to a flat image, and the experience is night and day different.

TL;DR

By weaving these color design principles into your Three.js projects, you can create visually compelling and emotionally resonant 3D web experiences.

These techniques then elevate your color choices beyond mere aesthetics, enabling you to craft scenes that tell stories, evoke feelings, and guide users on immersive journeys through your virtual worlds.

The lighting looks good as a still 2D image but looks even better as the user starts to manipulate the page, and the lighting effects give that 3D feel.

Design Principle 3: Interaction and Experience Design with Three.js

As a designer, you’ll know that we always need to adjust our site design to the end-user audience.

The beauty of Three.js is that we can either go fully immersive 3D with our design or simply enhance a traditional UI.

For example

An Enhanced Traditional UX

Take a look at this site by Dot Pad.

Similar to Apple, this site features 3D elements that animate as you scroll, but it still has more traditional menu options.

This approach provides a sense of comfort and ease for users, especially those who might be less tech-savvy, thanks to its navigational simplicity and familiarity with how to interact.

It’s not fully 3D but it's still impressive and stands out against competitors.

Game-Like UX Approach

On the other end of the spectrum, some 3D web experiences embrace a more interactive or game-like approach and are great for portfolio or showcase-type sites.

While not suitable for all audiences, this approach can leverage techniques from the gaming industry, such as engagement through play, and progressive learning.

If we look at the 3D portfolio project I teach in my course, it leans heavily into this. The user gets subtle guidance via the intuitive interfaces which helps to create a more immersive experience.

Thanks to the principle of progressive learning, as the user starts to interact more on the site, portals open up on the map, allowing the user to transition to new areas, while also preventing information overload.

Pretty cool right!?

The beauty is you can add as much 3D as the project requires. The enhanced approach is really beginning to take off in product-based sites and e-commerce, and is a great way to charge more for a site build 😜.

Want to learn how to create your own 3D web projects?

As you can see, Three.js allows us to take common design principles that you might already be using for current site designs and enhance them to wow your users.

And we've only just scratched the surface here of what you can do to help a site stand out!

P.S.

Are you ready to amaze your users and build immersive experiences?

Check out my complete Three.js course now or even watch the first few videos for free.

Then when you join, be sure to ask any questions in our private community Discord, where you’ll have access to me, other students on the same course, as well as working Web Developers and Designers.