3d modelling

byGyan Vadhel

a small 3d modelling tool within browser

LandingEditorDashboard
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 4

3D Modelling System Requirements Document

Introduction

This document outlines the system requirements for the "3D Modelling" project, a small 3D modelling tool designed to operate within a browser. The aim is to provide users with an accessible and efficient platform for creating and manipulating 3D models directly from their web browsers.

System Overview

The 3D Modelling project is a web-based application that allows users to create, edit, and view 3D models. It is designed to be lightweight and user-friendly, making it accessible to both novice and experienced users. The application will support various 3D modelling functionalities and provide an intuitive interface for seamless user interaction.

Functional Requirements as Story Points

  • As a User, I should be able to create new 3D models from scratch.
  • As a User, I should be able to import existing 3D models into the application.
  • As a User, I should be able to edit and manipulate 3D models using various tools.
  • As a User, I should be able to export 3D models in different file formats.
  • As a User, I should be able to view 3D models in a real-time rendering environment.
  • As a User, I should be able to save my progress and continue editing later.
  • As a User, I should be able to undo and redo actions during the modelling process.
Page 2 of 4

User Personas

  • Novice User: Someone new to 3D modelling who requires a simple and intuitive interface.
  • Experienced User: A user with prior experience in 3D modelling looking for advanced features and customization options.

Core User Flows

  • Novice User creates a new model -> uses basic tools to shape the model -> saves progress.
  • Experienced User imports an existing model -> applies advanced editing tools -> exports the model in a preferred format.

Visuals Colors and Theme

  • primary: #4A90E2 (a calming blue for the main interface elements)
  • primary_light: #A6C8F1 (a lighter blue for hover states and secondary UI)
  • secondary: #F5A623 (a vibrant orange for emphasis and highlights)
  • accent: #50E3C2 (a contrasting teal for CTAs and active states)
  • highlight: #F8E71C (a bright yellow for notifications and active indicators)
  • bg: #FFFFFF (a clean white for the page background)
  • surface: rgba(255, 255, 255, 0.9) (a subtle white for card/panel backgrounds)
  • text: #333333 (a dark grey for primary text)
  • text_muted: #888888 (a softer grey for secondary text)
  • border: rgba(0, 0, 0, 0.1) (a light grey for borders)
Page 3 of 4

Signature Design Concept

The homepage will feature an interactive 3D canvas where users can immediately start modelling. The canvas will have a dynamic grid that responds to user interactions, such as zooming and panning, providing a sense of depth and space. As users manipulate the model, real-time shadows and reflections will enhance the visual experience. The interface will include a toolbar that animates smoothly when tools are selected, using motion/react for transitions.

Landing Hero Motion Brief

The landing page will feature a continuous loop animation where a simple geometric shape transforms into a complex 3D model. This transformation will illustrate the tool's capability to turn basic ideas into detailed models. The animation will use motion/react for smooth transitions and will be responsive to user interactions, such as hovering to pause or clicking to explore more details about the tool's features.

Interaction Model & Motion Direction

The intended interaction model for the landing page is "animated". This will include moderate scroll-triggered reveals and hover transitions to engage users as they explore the tool's capabilities. Interactive elements will have spring physics for a polished feel, enhancing the user experience without overwhelming them with excessive motion.

Page 4 of 4

Non-Functional Requirements

  • The application must load within 3 seconds on standard broadband connections.
  • It should be compatible with the latest versions of major web browsers (Chrome, Firefox, Safari, Edge).
  • The tool should support a minimum of 100,000 polygons per model for performance optimization.

Tech Stack

  • Frontend: React for Web
  • Backend: Python with FastAPI
  • Database: MongoDB for storing user data and model files
  • AI Models: Google Nano banana for image generation
  • Local orchestration: Docker
  • Server-side orchestration: Kubernetes

Assumptions and Constraints

  • The application will primarily target users in India, with English as the default language.
  • The tool will operate within the constraints of a web browser, limiting the use of system resources.
  • User data privacy and security will be maintained according to industry standards.

Glossary

  • 3D Model: A digital representation of a three-dimensional object.
  • Polygon: A flat shape with straight sides, used in 3D modelling to create surfaces.
  • Rendering: The process of generating an image from a model by means of computer programs.
Landing design preview
Landing: View Info
Dashboard: View Saved Models
Editor: Import Model
Editor: Use Advanced Tools
Editor: Undo Redo
Editor: View Render
Editor: Save Progress
Export: Choose Format
Export: Download Model