# ThreeJS *** ### 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](https://www.npmjs.com/package/@viverse/cli). {% hint style="info" %} 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](/publishing-with-your-viverse-account.md#upload). {% endhint %} ### Installing Node.js {% stepper %} {% step %} #### Download Node.js A. Download the latest version of **Node.js (LTS)** from http .
{% endstep %} {% step %} #### Automatically install the necessary tools A. Use the defaults during the installation, but place a checkmark \ in the **Automatically install the necessary tools** checkbox
{% endstep %} {% step %} #### 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##.##.##**.
{% endstep %} {% endstepper %} ### Installing Three.js and making an example project This guide is a walkthrough for creating an example Three.js project {% stepper %} {% step %} #### Create project folder A. Create a new folder that will contain the project.
{% endstep %} {% step %} #### 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** ```html My first three.js app ```
{% endstep %} {% step %} #### 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** ```javascript 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 ); } ```
{% endstep %} {% step %} #### 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**.
{% endstep %} {% step %} #### 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.
{% endstep %} {% endstepper %} ### Installing Vite and using it to build your project {% stepper %} {% step %} #### 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`.
{% endstep %} {% step %} #### Confirm Vite has been installed A. Confirm **Vite** has been installed by checking for additional folders in the **node\_modules** folder.
{% endstep %} {% step %} #### Add the Vite build settings A. Add the Vite build settings to **package.json** file. **package.json** ```json { "scripts": { "dev": "vite", "build": "vite build" }, "dependencies": { "three": "^0.175.0" }, "devDependencies": { "vite": "^6.3.2" } } ```
{% endstep %} {% step %} #### Add the vite.config.js file A. Add the **vite.config.js** file to the root of the project. **vite.config.js** ```javascript import { defineConfig } from 'vite'; import path from 'path'; // https://vite.dev/config/ export default defineConfig({ base: './', // Use relative path as base URL }); ```
{% endstep %} {% step %} #### 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.
{% endstep %} {% step %} #### 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 . Confirm the app works as expected.
{% endstep %} {% step %} #### 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.
{% endstep %} {% endstepper %} ### Installing the VIVERSE CLI {% stepper %} {% step %} #### 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.
{% endstep %} {% endstepper %} ### Logging in with the VIVERSE CLI {% stepper %} {% step %} #### Login to VIVERSE platform 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.
{% endstep %} {% endstepper %} ### Publishing from VIVERSE {% stepper %} {% step %} #### 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 \**, then click Enter. B. Enter an **Application title** and **Application description**. C. Confirm the content was published successfully.
{% endstep %} {% step %} #### 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 \**, then click Enter. B. Confirm the manifest file is updated. C. Confirm the content was published successfully.
{% endstep %} {% step %} #### Test project A. Confirm project was published successfully and working properly in VIVERSE by visiting the **URL** that is printed in the **Publish Details**.
{% endstep %} {% endstepper %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.viverse.com/standalone-app-publishing/three.js-with-vite-or-getting-started-tutorial.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.