Creating a Project with the Vite Build Tool

To use Vite with, for example, three.js and OrbitControls, create a project using the build tool, organize its modules and connect all dependencies correctly. Follow these steps:

Step 1: Install Vite

Install Node.js if it is not already installed; Vite requires it.

Create a new Vite project:

npm create vite@latest projectName --template vanilla
cd projectName

Install the required dependencies:

npm install

Step 2: Install Three.js

In this step, install three.js and OrbitControls using npm:

npm install three

Step 3: Set up the project

1. Open the project in your editor and create src/main.js if it does not exist yet.
2. Import three.js and OrbitControls into the project:

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/js/controls/OrbitControls.js';

class Platform {
    constructor(scene, width, height, depth, position) {
        this.geometry = new THREE.BoxGeometry(width, height, depth);
        this.material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        this.mesh = new THREE.Mesh(this.geometry, this.material);
        this.mesh.position.set(...position);
        scene.add(this.mesh);
    }
}
...

Step 4: Adjust the Vite configuration (optional)

Make sure the project is configured correctly for three.js. Vite's default configuration should work unchanged, but if problems occur, add the file vite.config.js:

import { defineConfig } from 'vite';

export default defineConfig({
    server: {
        open: true
    }
});

Step 5: Run the project

Once everything is configured, start the project:

npm run dev

This opens a web page with a game built using localhost:5173. Move the player with the left and right arrow keys, and jump with the space bar.