ThreeJS

This document provides a guide for creating a sample app in Three.js, building the app with Vite and deploying the app to VIVERSE.

Introduction

In this getting-started guide, we will cover the basics of setting up a ThreeJS project and publishing to VIVERSE using the VIVERSE CLI.

For this guide, we are using the VIVERSE CLI, but it is also possible to compress and upload your build file directly to the VIVERSE Studio.

A. Installing Node.js

Download Node.js

A. Download the latest version of Node.js (LTS) from http https://nodejs.org/en.

Automatically install the necessary tools

A. Use the defaults during the installation, but place a checkmark in the Automatically install the necessary tools checkbox

Confirm Node.js is installed with at least v22

A. Open a command prompt and type: node, then click Enter.

B. Confirm that Node.js is installed when the following message prints in command prompt: Welcome to Node.js v##.##.##.

B. Installing Three.js and making an example project

This guide is a walkthrough for creating an example Three.js project

Create project folder

A. Create a new folder that will contain the project.

Create the index.html

A. Create the index.html page inside the project folder. This can be done by creating a text file, pasting the code and saving it as a .HTML page or using an IDE, such as Visual Studio Code.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first three.js app</title>
    <style>
      body { margin: 0; }
    </style>
  </head>
  <body>
    <script type="module" src="/main.js"></script>
  </body>
</html>

Create the main.js

A. Create the main.js page inside the project folder. This can be done by creating a text file, pasting the code and saving it as a .JS file or using an IDE, such as Visual Studio Code.

main.js

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

function animate() {

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render( scene, camera );

}

Install Three.js framework

A. Three.js needs to be installed in the project folder. Open command prompt and change directories to your Three.js project.

B. Type: npm install --save three.

Confirm Three.js framework is installed

A. Confirm node_modules folder and package.json have been added to the directory.

B. Confirm the three folder folder and .package-lock.json have been added to the node_modules directory.

C. Installing Vite and using it to build your project

Install the build tool Vite

A. If choosing to use Vite as the build tool, it needs to be installed in the Three.js project folder also. With command prompt opened and the directory set to your Three.js project, type the command: npm install --save-dev vite.

Confirm Vite has been installed

A. Confirm Vite has been installed by checking for additional folders in the node_modules folder.

Add the Vite build settings

A. Add the Vite build settings to package.json file.

package.json

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "three": "^0.175.0"
  },
  "devDependencies": {
    "vite": "^6.3.2"
  }
}

Add the vite.config.js file

A. Add the vite.config.js file to the root of the project.

vite.config.js

import { defineConfig } from 'vite';
import path from 'path';

// https://vite.dev/config/
export default defineConfig({
  base: './', // Use relative path as base URL
});

Create a development build of the Three.js project

A. To create a development build of the Three.js project, type the following command inside command prompt under the Three.js project directory: npx vite.

B. Confirm the development build of the Three.js project was built successfully when Vite provides a localhost URL to test.

Test development build

A. To test a development build of the Three.js project, open the browser and navigate to the URL that was printed in the previous step. In this example, the URL is http://localhost:5173. Confirm the app works as expected.

Create production build

A. To create a production build of the Three.js project, type the following command inside command prompt under the Three.js project directory: npx vite build.

B. Confirm the production build of the Three.js project was built successfully by confirming the dist folder was created and populated.

D. Installing the VIVERSE CLI

Install the VIVERSE (CLI) command-line tool

A. Inside a command prompt, type: npm install -g @viverse/cli, then click Enter. Installing a package with -g installs the package globally. The location of globally installed packages depends on your operating system and npm configuration:

Windows : In windows, packages are installed in %APPDATA%\npm\node_modules.
macOS and Linux : In mac or Linux packages are typically installed in /usr/local/lib/node_modules or a user-specific directory like ~/.npm-global.

B. Confirm that the command line tool is installed based on screen feedback.

E. Logging in with the VIVERSE CLI

A. Open a command prompt and type: viverse-cli auth login, then click Enter.

B. Enter VIVERSE email and password.

C. Confirm login was successful.

F. Publishing from VIVERSE

Publish content

A. To publish content to VIVERSE type the following command with the project path to the project's production build folder: viverse-cli publish <path>, then click Enter.

B. Enter an Application title and Application description.

C. Confirm the content was published successfully.

Re-publishing content

A. To re-publish content to VIVERSE when a project is already published, type the following command with the project path to the project's production build folder: viverse-cli publish <path>, then click Enter.

B. Confirm the manifest file is updated.

C. Confirm the content was published successfully.

Test project

A. Confirm project was published successfully and working properly in VIVERSE by visiting the URL that is printed in the Publish Details.

PreviousUnity WebGL NextGodot HTML5

Last updated 12 days ago

Was this helpful?

hashtagIntroduction

hashtagA. Installing Node.js

hashtagDownload Node.js

hashtagAutomatically install the necessary tools

hashtagConfirm Node.js is installed with at least v22

hashtagB. Installing Three.js and making an example project

hashtagCreate project folder

hashtagCreate the index.html

hashtagCreate the main.js

hashtagInstall Three.js framework

hashtagConfirm Three.js framework is installed

hashtagC. Installing Vite and using it to build your project

hashtagInstall the build tool Vite

hashtagConfirm Vite has been installed

hashtagAdd the Vite build settings

hashtagAdd the vite.config.js file

hashtagCreate a development build of the Three.js project

hashtagTest development build

hashtagCreate production build

hashtagD. Installing the VIVERSE CLI

hashtagInstall the VIVERSE (CLI) command-line tool

hashtagE. Logging in with the VIVERSE CLI

hashtagLogin to VIVERSE platform

hashtagF. Publishing from VIVERSE

hashtagPublish content

hashtagRe-publishing content

hashtagTest project