Ship engine digital twin viewer

Ship engine digital twin viewer is an interactive web-based platform for exploring complex marine propulsion systems in a real-time 3D environment.

Built with Three.js, Vite and Node.js, the application provides a structured way to inspect ship machinery, navigate through hierarchical system assemblies, isolate components, access technical documentation and analyse equipment through animated exploded views.

The project was designed with scalability and maintainability in mind, allowing additional ship systems, documentation modules and engineering tools to be integrated without major architectural changes.

Key features

3D visualisation

• Real-time rendering of ship machinery
• Smooth camera controls and navigation
• Interactive component selection
• Dynamic hover highlighting
• Component labels and identification

Navigation and inspection

• Hierarchical sidebar navigation
• Multi-level system structure
• Component isolation
• Visibility management
• Automatic camera focusing

Exploded views

• Global exploded view for the entire vessel model
• System-specific exploded views
• Animated transitions between assembled and exploded states

Documentation support

• Integrated PDF documentation
• Component-specific manuals
• Technical reference material
• Maintenance documentation

Emergency system simulation

• Emergency alarm visualisation
• Dynamic warning lights
• Interactive alarm states

Backend integration

• REST API support
• Dynamic component data management
• Document handling and storage

Included ship systems

The viewer currently contains thirteen major ship systems:

1. Structure
2. Exhaust system
3. Plate heat exchanger
4. Port generator
5. Main engine No. 1
6. Transmission
7. Pipes
8. Valves
9. Propeller
10. Fire system
11. Lube oil tank
12. Service air receiver
13. Duplex oil strainer

Each system contains its own hierarchy of assemblies, subassemblies and individual components.

Installation

Requirements

• Node.js 18 or newer
• npm

Clone the repository:

git clone <repository-url>
cd Ship_engine

macOS

Make the startup script executable and run it:

chmod +x start.sh
./start.sh

Linux

Make the startup script executable and run it:

chmod +x start.sh
./start.sh

Windows

Git Bash

./start.sh

WSL (Windows Subsystem for Linux)

chmod +x start.sh
./start.sh

What the startup script does

The startup script automatically:

• verifies the Node.js installation
• installs frontend dependencies
• installs backend dependencies
• creates required directories
• starts the backend server
• starts the frontend server
• opens the application in the default browser

Development servers

Frontend:

http://localhost:5173

Backend:

http://localhost:3001

The startup script automatically:

• installs frontend dependencies
• installs backend dependencies
• creates required directories
• starts the backend server
• starts the frontend server
• opens the application in the default browser

Development servers

Frontend:

http://localhost:5173

Backend:

http://localhost:3001

Technologies

Frontend:

• Three.js
• Vite
• JavaScript
• HTML5
• CSS3

Backend:

• Node.js
• Express

Assets:

• GLB models
• HDR environment maps

Architecture

The application follows a modular architecture based on clear separation of responsibilities.

The system is divided into:

• Viewer core
• Model layer
• User interface layer
• Controllers
• State management

This approach simplifies maintenance, improves scalability and allows new systems and functionality to be integrated with minimal impact on existing code.

Purpose

The project serves as a digital twin visualisation platform for marine engineering environments where complex technical systems must be presented in a clear, interactive and maintainable way.