lisaberger / elements

Web application utilizing R3F to showcase the periodic table in a 3D environment. 🔬

elements

Elements is web application utilizing React Three Fiber to showcase the periodic table in a 3D environment.

Table of Content

1. Introduction
2. Installation
3. Features
4. License

Introduction

The application originated from a group project for a university course on "Information Spaces." I further developed the resulting prototype, implementing it in a declarative manner using React Three Fiber.

Authors: @lisaberger @teresahause @marvinmurmann

Installation

Start the app

npm install
npm run dev

Features

1. Particle System
2. 3D-Helix View of Elements
3. Different Filtering Options
4. Physics (coming soon)
5. Shader Materials (coming soon)

Particle System

On the starting page, a simple particle system is displayed in the background.

3D-Helix View of Elements

...

Different Filtering Options

...

Physics

Physics feature is coming soon.

Shader Materials

Shader materials feature is coming soon.

---

© elements

elements's Issues

Replace d3 physics with r3f alternative

Description:
As for now the atom core spheres have a 3D force applied to them. It stems from some custom extension file to the d3 library. The hole physics functionality is very complicated and difficult to understand.

• Research other physics libraries
• Add new physics library

Acceptance Criteria:

• Spheres still have collision and force applied to them
• Codecomplexity is reduced

Filters not working

Issue:
The filters don't work the right way.

change cursor on element hover

Description
While hovering over an element box on the overview page the cursor remains the same.

To do:

• Display custom hand cursor on hover

Acceptance Criteria:

• Hand cursor is displayed

Add loading indicators

implement standard states with shaders