A practical beginners guide to build Metaverse with Croquet

>Course Introduction

Let us cover a background on what this course is about and why is it relevant in 2023

Earlier in the 2000s, there was this dot com boom.

It gave raise to a lot of an exponential growth of websites.

This also created lot of job opportunities.

Now a days, we call them as static sites.

Over the years the websites have matured to become dynamic.

But now the time is ripe for another change.

All the websites created until now whether static or dynamic can be called as 2D websites.

The time has come for creation of 3D websites.

They are more popularly known as portals or spaces of a metaverse and we are in an early stage.

So this is a golden time.

Why do we need these 3d websites?

The next generation loves games.

Gamification leads to higher attention.

Attention will result in conversion and sales.

Games in 3D are the most engaging.

If you have played Call Of Duty Or Valorant, i need not say anything more to you.

Augmented Reality, AR and Virtual Reality VR , both these fields are based upon 3D technologies.

Big corporations like Facebook, Apple are already investing heavily in creating and experimenting with metaverse.

How can individuals like me and you, take advantage of this and be ready to cease the opportunities that this change presents?

>Learning Objectives

By the end of the course,

You will see what are 3D portals ..what features they have ..and how to customize them.

You will know how to create assets specific to client's business and earn money through them.

You will have the skills of frameworks which do the heavylifting while allowing you to focus on our clients.

As deliverables, you will have a ready to go assets, for building your own webspaces.

These assets work on PC, mobile phone and VR headset without any changes from your side.

>Target Audience

Someone with a curiosity about the latest trends like metaverse and who wishes to convert such interests into tool specific skills.

Students from Art background who wish to ride the tech wave.

People who have business ideas to profit from metaverse virtual world building.

So if are interested in this journey, then come along and join me in this course.

Thank You. :)

Planning - Webpage to WebSpace

This lesson is about planning the project.

At a high level we will be converting a website into a 3d website.

So we need a website as an input

Let me take an aribtrary website for demo purpose.

You are allowed to put 9 items inside that room

First task is to come up with a collection of 9 images.

You can take it from your mobile gallery or in case you are planning to do it for a specific company as an agency or as a freelancer, take the data from the company's website after taking the necessary permissions.

Asset Gathering

    Open chrome

    Go to a webpage

    Select 3 dots > More Tools > Save Page As > Webpage - Complete

Project Setup

Croquet Setup

    Go to this url: https://croquet.io/webshowcase/

    Click on GET CODE HERE button

    Enter your name and email and read through the terms and conditions.

    If that looks good, check the box and click on GET CODE

    Check your email for the link and click on the link and click on Microverse tab

    Copy the content and create a file called apiKey.js in the folder croquet

    Signout of the website.

Visual Studio Code Setup

    Inorder to edit few properties that are specific to your project. you will need a text editor.

   There is no coding involved but only configuration changes related editing.

    We can ideally use a notepad to make these changes but then inorder to view these changes the related web page has to be loaded.

    However if we load the webpage from the browser by clicking on the link of the file directly, there would be a technical issue called a CORS issue.

    Inorder to eliminate that, we have to deploy the page.

    And to deploy the page, we need a server.

    However we can use a development server, and it is quite easy to setup.

    So as a part of the setup, we have to install visual studio code[vscode] which can be used for both the purposes, For changing the configuration and also hosting a development server. The steps to do this are visually demonstrated in the attached video links.

    So go through them and get the setup done on your systems.

ngrok setup

1. Sign up and login @ ngrok.com

2. Download the client

3. Add token

4. Start the http tunnel

5. Share the link

Create a gallery containing multiple products as a showcase.

Create an ART display of your NFT and place Call to Action item to user for purchasing the product.

    Similar to the above assignment of asset gathering, now you have to collect a set of 9 mp4 files.

    Attribues specific to video. muted: false/true

    The early days of amazon and flipkart which started their business by selling books is back again now in the 3D sense.

    To illustrate and celebrate this new age, we are creating a 3D version of book store.

Though we have separated the individual files types into a single showcase for demo purpose, we can club all of them in a single showcase by providing the links to them. Sometimes that way would be more relevant because if there is a single item that we want to showcase, such as a mobile phone..we can have the phone photos..its specs as pdf and its features in a video all in a single webshowcase. Here is an example of how it looks.

Image resolutions of 1024 wide.

Video Duration : less than 30 seconds [can be mp4 or mov formats]

Video Resolution 640 or 720 pixels wide.

PDFs should be less than ten slides.

How to deploy the webspace independently on the intetnet is covered in this lesson.

Create different showcases to multiple clients and make money out of the efforts from the technical knowledge and 3d development done till now. Do not promise to add more features at this point, However if the client is willing to pay for your additional effort after the initial payment , then you can message me and we can see if we can take it up as a T&M engagement. Until then, keep making more money. All the best and congratulations on completing this course.