Client Application Quickstart

This guide walks you through the steps of using create-3dverse-app to set up a React application which integrates Livelink to launch interactive rendering sessions.

Creating a project on the Console

Before setting up your client application, you'll need to create a project:

1. Log in or sign up at the 3dverse Console.
2. Create a New project.
3. In the Asset Browser, upload or create a Scene asset under the public folder.
   If it's your first project, you'll be guided through the process.

Setting up the Client Application

We provide a utility that simplifies the setup of a client applications to a single command.

Requirements

To follow this guide, you need **Node.js** installed on your system.

Verify your installation by running `node --version`.Node Versions 18 or higher are currently supported.

Refer to https://nodejs.org/en/download/ for Node.js installation instructions.

Run the following command in your terminal:

npm create 3dverse-app@latest my-app

Customize "my-app" to reflect your project's name

This command will prompt you for various configuration options. At the end, a folder named my-app will be created in your current working directory where you'll find your client application.

You may be prompted to confirm the installation of create-3dverse-app, this is normal. Accept to proceed forward.

1. Scene UUID

You will then be prompted for a scene UUID. You can find it in the Asset Browser.

Open the Public folder, then copy and paste the scene UUID into the prompt and press Enter to proceed.

Reminder

Your scene must be inside the Public folder so your web application can access it with the public token. You can simply move it into the Public folder if needed.

Moving the converted scene to the Public folder

2. Public Token

Next, you'll be asked for a public token. The public token grants access to the Public folder for your client application.

Copy and paste the public token into the prompt and press Enter to proceed.

Running the Application

After completing these steps, your project should be fully set up and ready to go.

To start the development server, run:

cd my-app         # moves inside the application folder
npm run dev       # runs the application in development mode

Your application will be running at http://localhost:5173 where you can expect to see an interactive render of your 3D scene.

Your application running at http://localhost:5173.

Deploying to users

Should you choose to push the code to Github, we can show you how to make the newly created project publicly available to your users using Github Pages. Head over to the deploying guide for step-by-step instructions on how to set up automated deployments.