Matterport Workshop Project

---

Demo

__

Table of Contents

1. Software and Package Requirements
2. Check Installation Status
3. Cloning the Repository
4. Setting up Matterport SDK Key
5. Setting up the Project

---

Software Requirements

Ensure the following software is installed on your machine:

• Visual Studio Code
  Download Link

• Node.js (Any version should work)
  Download Link

• Git
  Download Link

Installation Status

1. Open Command Prompt on Windows.

2. Run the following commands:

   • Check Visual Studio Code

     code -v

     • You should see the version number of Visual Studio Code.
   • Check Node.js

     node -v

     • You should see the version number of Node.js.
   • Check Git

     git -v

     • You should see the version number of Git.

   If all three commands return version numbers, your installations were successful. Outputs should look similar to below:

   

---

Repository Clone

1. Navigate to the folder in your directory where you want to clone the project. Ensure there are no folder restrictions.
2. In the folder's path bar, type cmd and press Enter.
   • A new terminal instance will open at that location.
3. Copy the repository URL.
4. In the terminal, run the following command to clone the repository:

   git clone https://github.com/nbbj-digital/matterport-workshop.git

5. Navigate to the folder:

   cd matterport-workshop

6. Launch VSCode at the folder location:

   code .

---

Matterport SDK Key

Steps to Set Up Matterport SDK Key

1. Sign up for a Matterport account using your phone
   The web URL for signup may be broken. Use this link: Matterport Signup

2. Log in to Matterport
   After logging in, navigate to Settings -> Developer Settings.

4. SDK Key Management
   Scroll down to the SDK Key Management section.

5. Add a new SDK Key
   Click the + Add an SDK Key button.

6. Name your SDK Key
   Use the name localhost for local development.

7. Generate the SDK Key
   Once named, generate the key and keep it handy for the next steps.

8. Add port name
   Once SDK key is generated, Click 'Edit' and add 5173 Port. Click Update

Project Setup

1. Open Terminal in VSCode
   Navigate to Terminal -> New Terminal to open a terminal at the folder location.
2. Ensure you are at the folderpath where you have cloned the repository

3. Navigate to the index.html file
   On line 26, replace the placeholder "sdk-key" with your generated SDK key.

4. Install dependencies
   Run the following command to install all necessary packages:

   npm install

   npx matterport-assets static

   • You should see a 'static' folder is created.

   npm run dev

5. Launch the app
   Ctrl-click on the link http://localhost:5173/ in the terminal to launch the app

   

6. Go to the lobby
   Once the app loads, click on the “Go to lobby” button located at the top of the page.

7. Verify the app functionality
   If the view switches, your app is working correctly!