The revolution of e-commerce 👗with Three.js and AWS Amplify ☁️
Tags: aws, awsamplify, threejs
Published: 2023-01-10 13:45:03

---
title: The revolution of e-commerce 👗with Three.js and AWS Amplify  ☁️
published: true
date: 2022-09-30 01:03:33 UTC
tags: #AWS #AWSAmplify #ThreeJS
---

## Introduction 🏁 

The world around us is in a great and huge evolution some examples of this evolution are the evolution in health, industry, transportation, etc... another example of this evolution is the evaluation of **Online shopping**. Many people are now shopping through the Internet and buying most of their supplies on the Internet without the need to leave their homes. Get off is for bus, work, taxi, etc...

## The Problem 😞

**Online shopping** has disadvantages, for example, How many times have you bought a piece of clothes and been shocked that the product you purchased was not as described on the online site or that the size you bought was not the accurate size, how many times have you wished that you were able to switch between the colors and shapes of the clothes Even if you are in a real clothes store ... Here comes the role of **TopShop**

## What is [TopShop](https://s3.console.aws.amazon.com/s3/object/3d-virtual-dressing-room?region=us-east-1&prefix=index.html)? 🛒

TopShop is a **3D Virtual Dressing Room** that aims to help the customefacilitateng the process of buying clothes through the Internet by viewing a **3D model** of the product before purchasing it, and he can choose from different colors of the product and see the benefits of using the **3D modeling** in representing the product as it will look in real life.

# Technology 🖥

- WebGL

- Three.js

- Blender

- JavaScript

- Bulma

- Sass

- Gulp

- AWS Amplify

# Demo 🎬

![1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664411084811/vR2Ys2aD1.png)

Here user can [log in](https://3d-virtual-dressing-room.s3.us-east-1.amazonaws.com/authentication.html) to the website or he can use any one of the demo accounts we listed previously just **click on it** 😉 you can try the demo from [here](https://dev5094.d37d2vafcqn90u.amplifyapp.com) or [here](https://3d-virtual-dressing-room.s3.amazonaws.com/index.html)

<iframe width="840" height="410" src="https://www.youtube.com/embed/17m9ZlwqIPU"></iframe>

![3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664411469758/_KBF4qPsS.png)

# About 3D Model

I will explain how the model is set up in [Blender](https://www.blender.org), and if youd like to create something of your own, change a free model you found somewhere online, or instruct someone youre commissioning. Heres some information about how our 3D model is authored.

## Scale

The scale is set to approximately what it would be in the real world.

![4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664411630761/KKtLxoGYV.png)

## Layering and naming conventions

This part is **important** : each element of the object you want to customize independently needs to be its object in the 3D scene, and each item needs to have a\*\* unique name\*\*. Here we have _up_ and _down_. Note that if you have said, three items all called up, Blender is going to name them as _up_, _up.001_, _up.002_. That doesnt matter, because in our JavaScript well be using _includes(up)_ to find all of those objects that contain the string up in it.

![5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664411762823/SdSIMgt-d.png)

## File Format

[Three.js](https://threejs.org) supports a bunch of 3D object file formats, **but the one it recommends is glTF (.glb)**. Blender supports this format as an export option, so no worries there.

# Three.js

## Loading the model

Were going to add the function that loads in models, this is provided by the second dependency we added in our HTML.

Before we do that though, lets reference the model, well be using this variable quite a bit. Add this at the top of your JavaScript, above your BACKGROUND\_COLOR. Lets also add a path to the model. Ive hosted it for us, its about 1Mb in size.

```
var theModel; 
const MODEL_PATH ="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/model.glb";

```

Now we can create a new loader and use the load method. This sets theModel as our 3D models' entire scene. Were also going to set the size for this app, the right size seems to be about twice as big as its loaded. Thirdly, were going to offset the y position by -1 to bring it down a little bit, and finally, were going to add the model to the scene.

The first parameter is the models filepath, the second is a function that runs once the resource is loaded, the third is undefined for now but can be used for a second function that runs while the resource is loading, and the final parameter handles errors.

## Camera 📷

```
// Init the object Loader 
var loader = new THREE. GLTFLoader();
loader.load(MODEL_PATH, function(gltf) {
theModel = gltf.scene;
// Set the models initial scale
theModel.scale.set(2,2,2);
// Offset the y position a bit 
theModel.position.y = -1;
// Add the model to the scene 
scene.add(theModel);
}, undefined, function(error) {
console.error(error)
});

```

## Lights 💡

```
// Add Lights 
var hemiLight = new THREE.HemisphereLight(Oxffffff, 0xffffff, 0.61);
hemiLight.position.set(0, 50, 0); 
// Add hemisphere light to scene
scene.add(hemiLight);
var dirlight = new THREE.DirectionalLight(Oxffffff, 0.54);
dirLight.position.set(-8, 12, 8); 
dirLight.castShadow = true;
dirLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
// Add directional Light to scene
scene.add(dirLight);

```

## Controls 🛠

```
// Add controls 
var controls = new THREE.OrbitControls(camera, renderer.domElement); 
controls.maxPolarAngle = Math.PI/ 2;
controls.minPolar Angle = Math.PI/ 3; 
controls.enableDamping = true; 
controls.enablePan = false; 
controls.dampingFactor = 0.1; 
controls. autoRotate = false; 
// Toggle this if you'd like the model to automatically rotate 
controls.autoRotateSpeed = 0.2;

```

> to Learn more check the [documentation here](https://threejs.org/docs/) or [manual from here](https://threejs.org/manual/)

# Amplify Hosting 

## Why should I use it? 🤔

[AWS Amplify](https://aws.amazon.com/amplify/) is a complete solution that lets frontend web and mobile developers quickly build, ship, and host full-stack applications on AWS, with the flexibility to leverage the breadth of AWS services as use cases evolve. No cloud expertise is needed.

To get started, log in to the [Amplify console](https://us-east-1.console.aws.amazon.com/amplify/home). If you are starting from the **AWS Amplify** home page, choose to **Get Started** at the top of the page.

![11.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664419360927/APPr-qv1S.png)

Then choose to **Get started** under **Deliver**.

![12.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664419373228/oyN8dA0MH.png)

If you are starting from the **All apps** page, choose **New app** , then **Host web app** in the upper right corner.

![13.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664419438392/kqqCrzwLA.png)

you can manually deploy an app using drag and drop

![Screenshot_2022-09-29_04_29_29 - Edited.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664419576925/msmkJe96z.png)

but we will use our GitHub repo

## Step 1: Connect a repository 🗃

Connect your GitHub, Bitbucket, GitLab, or AWS CodeCommit repository. After you authorize the Amplify console with Bitbucket, GitLab, or AWS CodeCommit, Amplify fetches an access token from the repository provider.

![Screenshot_2022-09-29_03_25_24 - Edited.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664493275387/QN_wPSbKM.png)

## Step 2: Confirm build settings for the front end 🛠

![amplify-gettingstarted-4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664493369024/YSvt5S-iI.png)

**Important:** Verify that the build commands and build output directory (that is, artifacts > baseDirectory) are accurate. If you need to modify this information, choose Edit to open the YML editor. You can save your build settings on our servers, or you can download the YML and add it to the root of your repo.

## Step 3: Confirm build settings for the backend 

To deploy backend functionality using the Amplify CLI during your build, create or reuse an AWS Identity and Access Management (IAM) service role. IAM roles are a secure way to grant Amplify permissions to act on resources in your account. For detailed instructions, see [Adding a service role](https://docs.aws.amazon.com/amplify/latest/userguide/how-to-service-role-amplify-console.html).

![amplify-gettingstarted-7.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664493497286/1Adm3u3Rl.png)

## Step4: Save and deploy 💾

Review all of your settings to ensure everything is set up correctly. Choose **Save and deploy** to deploy your web app.

![Screenshot_2022-09-29_03_25_42 - Edited.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664494025388/A5j7HPHLS.png)

Access the build logs screen by choosing a progress indicator in the branch section. A build has the following stages:

![Screenshot_2022-09-29_03_26_35 - Edited.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664493756628/kBSwRBsI5.png)

Now your app is built and deployed 🎉🎉🎉

![amplify-backend-frontend - Edited.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664493944768/G6GrjvkSB.png)

![Screenshot_2022-09-29_04_26_35 - Edited.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664419776376/wZBfHHzEs.png)

> Of course, this is just a simple example of hosting a web app using AWS Amplify, but there is a lot that you can do, so you can learn more through[this demo](https://aws.amazon.com/getting-started/hands-on/build-react-app-amplify-graphql/) and you can use Amplify Studio to easily build and ship complete web and mobile apps in hours. With Amplify Studio, you can quickly build an app backend, create a rich user interface (UI) React components, and connect a UI to the backend in clicks.

# Resources 📄

- [WebGL](https://get.webgl.org/)

- [Three.js](https://threejs.org/)

- [Blender](https://www.blender.org/)

- [JavaScript](https://www.javascript.com/)

- [Bulma](https://bulma.io/)

- [Sass](https://sass-lang.com/)

- [Gulp](https://gulpjs.com/)

- [AWS Amplify](https://aws.amazon.com/amplify/)

- [Amplify Framework Documentation](https://docs.amplify.aws/)

- [AWS Amplify Studio](https://aws.amazon.com/amplify/studio/)