ThreeJS Example
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.
A. Installing Node.js
B. Installing Three.js and making an example project
This guide is a walkthrough for creating an example Three.js 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 );
}
C. Installing Vite and using it to build your project
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
F. Publishing from VIVERSE
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.
Last updated
Was this helpful?