ESCAPE.

This project is a demonstration of integrating Svelte, a JavaScript framework for building reactive user interfaces, with Three.js, a JavaScript library for creating and displaying 3D models in a web browser.

Description

ESCAPE. is a university project where the goal is to design an interactive map to promote an emblematic object of the selected region. A clickable area on a map will allow the user to display the 3D modeled object(s). Here, we have decided to talk about the Vikings and their famous Langskip ("drakkar").

This project combines the features of Svelte and Three.js to create an interactive web application that displays a 3D model in the browser. The 3D model is loaded from a GLB file (3D file format) and rendered in a 3D scene using the features of Three.js. The reactive user interface is built with Svelte, allowing easy manipulation of application states and components.

⚠️ Please note that the 3D model may take some time to display in the 3D scene depending on your Internet connection speed. This is due to the loading and rendering process of the 3D model in the scene, as well as the complexity of the model itself. ⚠️

Features

• Interactive map with clickable area
• Loading and rendering of 3D models using Three.js
• Reactive user interface built with Svelte
• Responsive design: the application works on desktop and mobile

Installation

1. Clone this repository to your machine.
2. Make sure you have Node.js installed on your machine.
3. Install dependencies by running the following command in the project directory:

npm install

4. Start the application by running the following command:

npm run dev

5. Open your browser and go to the URL http://localhost:5173.

Online Site

The site is currently available here!