Building 3D Product Configurator with Nuxt and Three.js (Part 1)

3 min readMay 8, 2020

#Introduction, Project setup, Editor component

DEMO: https://iosorin.github.io/3d-headphones/
REPO: https://github.com/iosorin/3d-headphones

PART 2: https://medium.com/p/fc960e19aa18/

INTRODUCTION:

It is in this article that I will not dwell on the implementation of a large number of editing options — just one will be enough (we will add the ability to change the color of individual objects, the so-called meshes of our 3D model).

My goal is to show you how to create a 3D scene, upload a model to it, and sync the scene and editor.

However, to make sure that the capabilities of your editor can be easily extended, you can look at an example of another 3D Configurator that I made with Fabric.js — popular library for working with canvas objects.

3D-CUP DEMO: https://iosorin.github.io/cup-demo/

BASIC STEPS:

Project setup (creating a project, installing dependencies, searching for and adding a 3d model, basic styles and markup)
Editor component
Scene component
Project deploy

PROJECT SETUP

I will use Nuxt.js in my project along with Vuetify as the main UI library, but both are optional, and you can implement your 3D Configurator in React or even Native JS if necessary.

If you decide to write your project in this stack then the following steps are for you:

Installing the nuxt-project, according to the official documentation
Adding Vuetify as the nuxt-module also following the instructions (an alternative way is to install it as a plugin)
Add Three.js library

npm i three

You should end up with about the following dependencies in your package.json :

"dependencies": {
    "@nuxtjs/vuetify": "^1.11.2",
    "nuxt": "^2.0.0",
    "three": "^0.116.1"
}

4. Preparing your 3D-model:

Create the /model folder in the /static root directory
Find a model in .gltf(json) or .glb(binary) format (for different types of format in Three.js there are different loaders — it is officially recommended to use GLTFLoader)
Download and unzip your model (the archive will probably contain a file with the extension .bin and the /textures folder)

5. Common Styles:

Don’t forget to add this file to your nuxt.config:
css: ['~/assets/scss/styles.scss'],

assets/scss/styles.scss

6. Basic markup

layots/default.vue

pages/index.vue

Editor component:

components/Editor.vue

Explanation:

Canvas element ($refs.canvas)

This is the element that we will duplicate as a texture on some object(mesh) in our 3D model
It has an ID — we will need this in the Scene component

Methods:

updateMesh() — must be called on every changes of the editor canvas element. The MESH_UPDATE event that we emit in this method will be processed in the scene component.
applyColor() — changing the background color of the editor canvas (passed in the argument or random from the colorsMap array).
onResize() — called on the window resize, assigns the size of the parent container to the canvas element. If you want to add the ability to, say, insert text or shapes, then you will preferably need to add saving their proportions on window resize — this can be done just in this method.

Colorpicker:

Vuetify-colorpicker right out of the box
Processing the @input event using the applyColor() method
Note —

Vuetify-colorpicker also has its own canvas-panel in this demo, but we are not interested in it — it`s just a specific vuetify component.
Therefore, to avoid confusion, you can hide the canvas-panel via hide-canvasproperty and add a swatches using show-swatchesprop, then our editor will look something like this.

This concludes the first part of my tutorial on creating a 3D Configurator.

Part 2: https://medium.com/p/fc960e19aa18/