OVERVIEW
Collective Memorial is an individual 3D web-based application that is specifically aimed to store stories happening during the lockdown in Shanghai.
DOMAIN
Web Design
Web Development
GOAL
Collective Memorial is in responding to the posts related to life lost stories removed by official app administrators and providing emotional support to the public.
TOOL
JavaScript / Three.js /
Socket.io / serverside database
Background
As I was studying away in New York, Shanghai, my hometown, experienced a tough lockdown following the anti-epidemic policy. Sad stories happened a lot at that time due to a lack of medical resources. There already exists some sheets and collections of these stories online using google sheets and Airtable. While being overwhelmed by those heart-wrenching news, I want to build a collective 3D space where users from different ends can upload and store these stories. The 3D space gives And then comes my Collective Memorial.
How it works
Users can add the memo by clicking the “Add Memo”, and inputting the username and content. Once a memo is added, a new memo (ball) will show up in the 3D space and begin to orbit the center sphere. As a web, users from different ends can upload stories on their own, and they can hover on each memo to read the stories. The 3D space thus becomes a collective memorial for the stories to be stored and viewed.
This project is launched through my own server through DigitalOcean, and I used a serverside database so that each uploaded story is stored in the backend. And the uploaded stories can only be edited and deleted through the backend. I want to preserve the stories and memos permanently through this metaphorical function.
Process
1. Design the whole scene.
The design of the 3D space is inspired by the solar system. The nonstop rotating golden sphere at the space center metaphors the sun, indicating a place that will be long-lasting and stable. The memos (balls orbiting around) stored here are metaphor planets. The whole system indicates that the memos would be safely preserved and permanently orbiting.
2. Build the 3D scene / OrbitControl / Hover effect
I built the 3D scene by watching and learning the tutorial here on YouTube. Import a package of three.js, OrbitControl, to realize mouse drag and control.
I referred to the raycaster document from three.js, locating the position of the hovered ball to realize the hover effect.
3. Serverside database
Every time the socket is on, the sent message will be stored in the backend database so that they are safe enough that I can refer to them anytime and anywhere.
4. Launch my own server/ safe website
I created an account on DigitalOcean and used Fetch to move the project folder on the node.
At the same time, I asked for the certificate to make a safe website.
Takeaway
Collective Memorial has more metaphorical meaning than real functions as an MVP of story storing place. Sad stories can't be welcomed by everyone, but they are meaningful enough to be remembered as history and reality. Especially when it comes to collective memories, we need a method to document them.
Back to the project itself, as I was designing this web application, I was always thinking about how I can make it a product or a tool to solve a real-time problem. And Collective Memorial working as an information storing platform has realized this goal. Though this is still a metaphoric simple prototype, I believe this is a meaningful trail.
The excitement of designing the whole project and developing it by myself is another big takeaway. The process of development was hard as expected since I don't think I am a pro programmer. While the joy and excitement of looking at my baby project came out exactly as expected making me believe I am on a right track.