Project Genesis

Unveiling the Past: My Journey with 3D Stories

From Idea to Implementation

1. Initial Research and Planning

2. Technical Decisions and Their Rationale

3. Alternative Approaches Considered

4. Key Insights That Shaped the Project

• User Engagement: The importance of user engagement became clear early on. The team recognized that simply displaying 3D models was not enough; the application needed to tell a story and provide context to the artifacts. This insight led to the incorporation of animated narratives and interactive elements that encourage exploration.

• Accessibility and Responsiveness: The need for the application to be accessible on various devices was a driving factor in the technical decisions. The team prioritized responsive design to ensure that users could interact with the content on both desktop and mobile platforms without compromising the experience.

• Collaboration and Community: The project benefited from collaboration with the Urban Complexity Lab of Potsdam, which provided valuable insights into user experience design and interactive storytelling. This partnership emphasized the importance of community involvement in the development process, leading to a more refined and user-centered product.

• Iterative Development: The team adopted an iterative development approach, allowing for continuous feedback and improvements. This flexibility enabled the incorporation of user feedback into the design and functionality, ensuring that the final product met the needs of its intended audience.

Under the Hood

Technical Deep-Dive: 3D Stories

1. Architecture Decisions

• Modular Design: The application is built using a modular approach, allowing for easy maintenance and scalability. Each feature, such as the animated storyline or the orbit tool, is encapsulated in its own module, making it easier to manage and update.

• Client-Server Model: The application follows a client-server architecture where the client (frontend) is responsible for rendering the 3D models and handling user interactions, while the server (if applicable) can manage data storage and retrieval.

• Responsive Design: The architecture incorporates responsive design principles to ensure that the application works seamlessly on both desktop and mobile devices. This is achieved through CSS frameworks and media queries.

• State Management: The application uses React’s built-in state management along with context APIs to manage the state of the application efficiently, especially when dealing with multiple 3D objects and their animations.

2. Key Technologies Used

• React: A JavaScript library for building user interfaces, React is used to create reusable UI components and manage the application state.

• Vite: A build tool that provides a fast development environment and optimizes the application for production. Vite’s hot module replacement (HMR) feature enhances the development experience.

• React Three Fiber: This library allows for the integration of Three.js with React, enabling the rendering of 3D graphics in a declarative manner. It simplifies the process of working with 3D models and scenes.

• Theatre JS: A powerful animation library that enables the creation of complex animations and interactive experiences. It is used to animate the 3D objects based on user interactions and narratives.

• Blender: An open-source 3D modeling tool used to create and convert 3D models into glTF format, which is optimized for web use.

3. Interesting Implementation Details

• Animated Storyline: The application features an animated storyline that guides users through the details of the 3D objects. This is implemented using Theatre JS, where each object can have its own animation timeline. For example:

  import { useAnimation } from 'theatre-react';
  
  const My3DObject = () => {
      const { play, stop } = useAnimation('myAnimation');
  
      return (
          <mesh onClick={play}>
              <boxGeometry args={[1, 1, 1]} />
              <meshStandardMaterial color="orange" />
          </mesh>
      );
  };

• Orbit Tool: The orbit tool allows users to explore 3D models from different angles. This is achieved using the OrbitControls from Three.js, which enables rotation, zooming, and panning of the 3D scene.

  import { OrbitControls } from '@react-three/drei';
  
  const Scene = () => {
      return (
          <>
              <ambientLight />
              <pointLight position={[10, 10, 10]} />
              <My3DObject />
              <OrbitControls />
          </>
      );
  };

• Modal Windows: Modal windows provide additional context and information about the 3D objects. These are implemented using React’s state management to control the visibility of the modal.

  const [isModalOpen, setModalOpen] = useState(false);
  
  return (
      <>
          <button onClick={() => setModalOpen(true)}>Show Details</button>
          {isModalOpen && (
              <Modal onClose={() => setModalOpen(false)}>
                  <h2>Object Details</h2>
                  <p>Additional information about the object.</p>
              </Modal>
          )}
      </>
  );

4. Technical Challenges Overcome

• Performance Optimization: Rendering 3D models can be resource-intensive. To optimize performance, techniques such as model simplification and level of detail (LOD) were implemented. This ensures that only the necessary details are rendered based on the user’s distance from the object.

• Cross-Browser Compatibility: Ensuring that the application works consistently across different browsers required thorough testing and the use of polyfills for certain features. This was particularly important for WebGL support in rendering 3D graphics.

• User Interaction Design: Designing intuitive user interactions for navigating 3D spaces posed a challenge. User testing and feedback were crucial in refining the navigation controls and ensuring a smooth user experience.

• Integration of Animation Libraries

Lessons from the Trenches

Key Technical Lessons Learned

1. Integration of Technologies: Successfully combining React, Vite, and Three.js through React Three Fiber was a significant learning experience. Understanding how to manage state and props in a 3D context was crucial for creating interactive experiences.

2. Animation Management: Using Theatre JS for animations taught us the importance of managing timelines and sequences effectively. It highlighted the need for clear organization in animation states to ensure smooth transitions and interactions.

3. Responsive Design Challenges: Ensuring that the application is responsive across devices required extensive testing and adjustments. We learned the importance of using CSS frameworks and media queries to maintain usability on both desktop and mobile platforms.

4. Model Optimization: Working with 3D models in Blender and converting them to glTF format emphasized the need for optimization. Reducing polygon counts and texture sizes was essential for maintaining performance in the browser.

What Worked Well

1. User Engagement: The interactive nature of the 3D models and the animated storyline significantly enhanced user engagement. Users appreciated the ability to explore garments from different angles and learn about their history interactively.

2. Collaboration: The collaboration with the Urban Complexity Lab was fruitful. Their expertise in urban studies and complexity science provided valuable insights that enriched the project’s narrative and design.

3. Documentation: The comprehensive README and user guide facilitated onboarding for new contributors and users. Clear instructions on installation, usage, and contribution processes helped streamline collaboration.

4. Community Feedback: Engaging with users and receiving feedback during the development process allowed us to iterate quickly and address usability issues effectively.

What You’d Do Differently

1. Early User Testing: Conducting user testing earlier in the development process would have provided insights into user experience and interface design. This could have led to more user-friendly features from the start.

2. Modular Architecture: While the project is functional, adopting a more modular architecture from the beginning would have made it easier to manage and scale. This would involve breaking down components into smaller, reusable pieces.

3. Performance Optimization: More emphasis on performance optimization during the initial stages could have prevented some later challenges with loading times and responsiveness, especially with larger 3D models.

4. Version Control Practices: Implementing stricter version control practices, such as more frequent commits and clearer commit messages, would have improved collaboration and tracking of changes.

Advice for Others

1. Start with a Clear Plan: Before diving into development, outline a clear project plan that includes goals, timelines, and responsibilities. This helps keep the team aligned and focused.

2. Prioritize Documentation: Invest time in creating thorough documentation from the outset. This will save time later and make it easier for new contributors to get involved.

3. Embrace Feedback: Actively seek and embrace feedback from users and collaborators. Iterative development based on real user experiences can lead to a more polished final product.

4. Stay Updated on Technologies: The landscape of web development and 3D graphics is constantly evolving. Stay informed about new tools, libraries, and best practices to keep your project modern and efficient.

What’s Next?

Conclusion

Project Development Analytics

timeline gant

Commit Activity Heatmap

Contributor Network

Commit Activity Patterns

Code Frequency