Futuroscope

Since 2020, I have been creating the online, 3D exhibition for the graduating Media Design students of Budapest Metropolitan University (METU). This annual project, called Futuroscope, provides a digital archive of their diploma works. Each year, I refine the concept and implement new features, ensuring a continuously evolving and engaging virtual experience. The latest iteration utilizes a brand-new engine, enabling the integration of all past exhibitions and facilitating ongoing expansion, along with significant UI/UX enhancements.

🎯 The aim of the project

Creating a virtual exhibition showcasing the diploma projects of METU Media Design graduates, where visitors can explore creative works in an interactive 3D space without having to be physically present.

Futuroscope's goal was simple: "How can we create a memorable, modern, and accessible experience that truly represents the work of the students?"

🧠 From idea to implementation

The challenge

The problem with traditional diploma exhibitions is that:

• Available for a limited time
• Geographically limited
• Online alternatives (gallery, PDF catalog) do not provide a genuine "exhibition experience."

The solution

A digital reconstruction of a real building where visitors can move around freely, explore students' stands, and open portfolios with a single click.

🛠️ Technology Stack

Frontend

3D modellezés

Design

🏛️ The Structure of 3D Space

The exhibition space is a reworked model of one of METU's actual buildings, which I created in Blender. The model consists of several layers:

1/models/
2├── futuroscope-model-2024.glb          	# Main building model (~2.8 MB)
3├── futuroscope-model-2024-canvases.glb 	# Exhibition stands
4├── futuroscope-model-2024-collisions.glb 	# Collision mesh
5└── futuroscope-model-2024-metu-statue.glb 	# METU statue
Copy

Why separate files?

For performance optimization, I separated:

• Visual elements – what the visitor sees
• Collision meshes – used by the physics engine (simplified geometry)
• Interactive elements – linked to portfolios

This means that physical calculations are not performed on a detailed model with a high number of polygons, but on a significantly simplified version, ensuring a smooth experience on the website.

🎮 Character Movement System

Visitors explore the space from a first-person perspective. The motion system consists of several components:

Control modes

1. Keyboard + Mouse (desktop)
2. • WASD or arrow keys to move
   • Mouse drag to look around
2. Mobile touch
3. • Virtual joystick for movement
   • Touch camera control
3. Automatic walk – With a click, the visitor walks to the selected point

Physical system

The character moves in space using a combination of RigidBody + CapsuleCollider:

1<RigidBody
2  type="dynamic"
3  mass={1}
4  position={[27.75, 6, 8.4]}
5  enabledRotations={[false, false, false]}
6  friction={1}
7  linearDamping={0.5}
8>
9  <CapsuleCollider args={[0.5, 0.25]} />
10</RigidBody>
Copy

This ensures that:

• Visitors should not walk over walls
• Stop with a natural deceleration
• Gravity should have a realistic effect on it

🖼️ Display portfolios

Each student's work is displayed on a separate canvas in the space. When a visitor walks close to a canvas:

1. The system detects proximity (collision sensor)
2. A floating label appears with the name of the work
3. The canvas "lights up" (emissive lighting animation)
4. Click to open the entire portfolio

Portfolio types

The system supports multiple media types:

• YouTube videos – Embedded player
• PDF documents – Interactive reader
• Image galleries – Optimized in WebP format

🌍 Multilingualism

The exhibition is available in Hungarian and English. Using react-i18next, I store all text in separate JSON files:

1/locales/
2├── hu.json  # Hungarian texts
3└── en.json  # English texts
Copy

This applies not only to UI elements, but also to the titles and descriptions of students' work.

📱 Embeddability

The exhibition can also be embedded into other websites (e.g., the university's website) using a simple JavaScript module:

1<div class="futuroscope-embed" data-year="2024"></div>
2<script src="futuroscope-embed.js"></script>
Copy

This automatically creates an iframe and handles fullscreen mode, allowing it to be displayed on any partner site.

⚡ Performance optimizations

Texture loading

• Custom TextureLoader for lazy loading
• Compressed JPG cover images
• Fallback images in case of loading errors

3D scene

• lazy() components for Scenes
• Suspense wrapper with animated loading
• Canvas frameloop stops when portfolio is active (GPU saving)

Model scaling

• Meshes optimized in Blender
• Draco compression on GLB files

🎬 Summary

The Futuroscope project is an exciting example of how modern web technologies can be combined with 3D visualization and physical simulation.

The goal was to ensure that students' work would not appear in a boring PDF, but rather in a memorable, interactive experience — and I think we succeeded.

If you have a similar project or would like to create a unique 3D web experience, feel free to contact us!