Mellow Motion School Exercise

This project is a collaborative web application created as part of a cross-disciplinary school exercise. The goal was to work with students from other fields (notably with MV) to develop an immersive 3D storytelling game that runs directly in the browser.

Built with Vue.js, Three.js, and PHP, the game leverages modern web technologies for interactive, real-time 3D experiences.

Project partners:
Luke van den Broek & Samed Bozaslan

🚀 Live Demo

Experience the project in action: Mellow Motion School Exercise

🧑‍💻 What I Learned

• Object-Oriented Programming (OOP):
  Crafted maintainable and scalable components, deepening my understanding of OOP principles in TypeScript and JavaScript.
• 3D Rendering & Scene Management:
  Tackled the challenge of building a robust scene management system and integrating Three.js for browser-based 3D graphics.
• Agile Practices (Scrum & Project Management):
  Improved collaboration skills by working in sprints, managing tasks, and adapting scrum methodologies to real-world teamwork.

🎮 Features

• Built with Vue.js (frontend), Three.js (3D engine), and PHP (backend).
• Immersive, interactive 3D storytelling gameplay.
• Modular OOP architecture for easy future expansion.
• Scene management system for dynamic storytelling.
• Collaborative development across disciplines.

🛠️ Getting Started

To run the project locally:

1. Clone the repository:

   git clone https://github.com/Lukevdb01/mellow-motion-school-exercise.git
   cd mellow-motion-school-exercise

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. (Optional) Start the PHP backend:
   If your project uses PHP for API or backend features, ensure your local server (e.g. XAMPP, MAMP) is running and properly configured.

© 2025 | Luke van den Broek

---

Original project requirements👇

Project Physical Computing

This is a project in which game and web developers work together.

Everyone is asked to do their programming part in the project.

Collect proof of your work in the 'sintlucas' folder

• Any document you create (FDD.md, TDD.md, REVIEW.md, RETROSPECTIVE.md, TEST_RESULT.md and any other document)
• Screenshots of your scrum board during stand-ups (before and after).
• Video of (or parts of) the working application (max 25MB).
• Notes created during meetings.
• ...

General planning

A planning a scrum master could use: GENERAL_PLANNING.md

Complete the FDD (Functional Design Document)

There is an incomplete FDD in the FDD folder.

• Complete this FDD by adding extra the functional requirements and a game play section.
• Let a teacher approve it before you start working on the project.

Complete the TDD (Technical Design Document)

There is an incomplete FDD in the FDD folder.

• Complete this TDD by refining the functional requirements into technical requirements.

Prepare

• Create a scrum board in GitHub Projects with these columns: sprint backlog (ToDo), in progress, testing, done
• Place the refined requirements in GitHub Issues (which will act as your backlog).
• Prioritize the backlog items. Use a label in GitHub Issues to indicate the priority (Must have, Should have, Could have, Won't have).
• Have a Sprint Planning meeting and decide which issues you will address in the coming sprint.
• Move them to the sprint backlog column (ToDo) on the scrum board.

Realise

Start a stand-up meeting every time you begin working on the project (which is probably each lesson):

• Open the scrum board
• Each team member answers these questions:
  • What did you do last time?
  • What will you do today?
  • Are there any impediments in your way?
• Update the scrum board.
• Start developing on the sprint backlog items (ToDo).

Don't forget

• Commit and push your changes regularly.
• Make sure that your code is readable and has comments.
• Make sure that your code follows the code conventions.

Test

• Perform a User Acceptance Test (UAT) by testing the features in the FDD.

Review

• Show the result so far to the client (the items in the Done column)
• Write down feedback from the client in REVIEW.md.
• Add/change items in the Backlog (in Issues) based on the feedback in REVIEW.md.

Retrospective

• You will have a meeting with your team (and teacher) and discuss the process of the project.
• Complete the RETROSPECTIVE.md in the sintlucas folder.

Assessment

In the last week your team will present the results:

• Prepare for the presentation (not a PowerPoint presentation, but a live demo of the product).
• You will be individually assessed.
• Prove that you met the criteria in sintlucas/ASSESSMENT.MD
• You will be assessed on the criteria in sintlucas/ASSESSMENT.MD.
• You will receive feedback on your work.

Video of your work

Create a video of the working application:

• Before the Presentation & Assessment, you must create a video of the working application.
• The video should show the main functionalities of the application.
• It should be a screencast with a voice-over.
• The video should be maximal 25MB in size.
• Place it in the sintlucas folder and name it video-md-your-names.mp4.