How to Create a Color Customizer in ThreeJS

My name is Samuel Cohen and this is how I single-handedly designed, developed, and launched a website where you can customize a die and have it 3D printed in 30 days. Below is a technical update post. If you wish to read more about the project, the landing page is here.

Having previously completed a 3D model in the tutorials here and here, I was ready to code a color customer in Javascript. Using the ThreeJS library, I can display 3D models on web-pages efficiently. From that point, I take the individual model components and change their colors.

Below is a video highlighting my rationale for using ThreeJS and my basic methods for creating the color customizer. If you want to know the specifics, continue reading.

ThreeJS Overview

Inspiration

Before I get into the overview, I wanted to mention what my original inspiration was for the color customizer. Vans, the shoe company, actually has a shoe color customizer on their website coded in ThreeJS. Here is a picture of what it looks like.

Vans Shoe Customizer

I took certain features of this designer and used it for my program. Now I can move into the overview.

Creating a Color Customizer

Components:

• 3D Model
• 2D Icons
• Javascript
• HTML
• CSS
• ThreeJS

Setup

Once I had the 3D model I created in the previous tutorials, I moved on to development. I created a project in a development environment called Glitch. I chose Glitch because a program can be run real-time and uploading files was easy.

Glitch Project Menu

Once I set up the development environment, I moved to the ThreeJS wiki to use it as a resource for development components.

ThreeJS Wiki

The ThreeJS wiki showcases a ton of programs that were created with the library, including many where the code can be viewed.

Displaying a 3D Model

To display a 3D model, I have to set up a scene and camera. Since I am using the whole screen, I can make the scene cover the entire scene.

I also ensure that a renderer is imported so that a model can be shown in 3D with light and colors.

Once that is complete I create a camera, which determines which angle the user will view the model from. I start with a simple camera that faces straight ahead for testing purposes.

I imported the 3D model from a link, where I uploaded it earlier. Once the model is in the program, I can make additions to the camera and rendered so that the model can be viewed properly. The initial model is loaded without texture and does not appear in focus.

After some basic textures are implemented the program looks like this.

Dice Without Formatting

Adding Proper Textures

To change the color of the die, I am using a component called texture in ThreeJS. To create textures, I need a color and shininess value. I set the initial values as white for the base and black for the dots.

Once the texture values are assigned to the model, it looks like this.

Dice with Textures

The base color changed to white, while the dots were already black.

Adding Controls

I added controls to the model using a dependency called Orbitcontrols within ThreeJS. Using OrbitControls, it is fairly simple to create a model that can be moved around with the mouse. The most important values that I set are maximum and minimum view locations so that the user doesn’t lose track of the model.

Once that is complete, I can move the object around in 3D space.

Adding Colors

I changed the model colors by adding new textures when a user selects a color from the bottom panel. I chose a set of five colors to place at the bottom of the panel to start with. At this point, the program only changes the color of the base.

Here is a picture of the die in red, with a set of colors at the bottom.

Red Die with Black Dots

Here it is in yellow.

Blue Die with Black Dots

Choosing Base or Dots

To change the different parts of the model, I added a button that determines which part of the model to change. I am using two images to differentiate between the base and dots on the right side of the screen.

Here is a picture with the images on the side of the screen.

Die with Side Images

Now a user can choose whether they want to customize the base or dots. Here are some examples.

Grey Die with Yellow Dots

Black Die with Red Dots

Finishing Touches

Once I had a fully functioning customizer I added a couple of extra colors and a checkout button that adds the current dice to cart. Below is an image of the finalized program.

Finalized Customizer

Conclusion

Now I have a color customizer built and ready to be integrated into a store. Next, I will create a 3D model to physically print the die in this tutorial.

Check Out the Website at www.dicedesigner.com.

Back to Landing Page