Skip to main content

Client Application Quickstart

This guide walks you through the steps of setting up a React application that integrates the Livelink SDK 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.

Getting the Scene UUID from the Asset Browser
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
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.