Back to projects
Interactive Learning

Interactive 3D & 360° Learning Visualization Platform

American Technical Publishers · Full-Stack Developer

American Technical Publishers | Interactive Learning / Web Graphics

Built interactive 3D and 360-degree visualization tools with administrative asset management and LMS-compatible export capabilities for technical education and training.

Vue.jsThree.jsJavaScriptPHPMySQLWebGLSCORM
Abstract architecture diagram — no product screenshots

Overview

Interactive 3D and 360-degree visualization tools for technical education and training. The platform combined browser-based model viewers, administrative asset management, and configuration output used in SCORM-compatible learning packages so learners could inspect technical products and components visually within LMS environments.

My Contribution

  • Built browser-based 3D viewers capable of rendering OBJ and MTL model assets
  • Developed administrative tools for managing categories, models, assets, and viewer configurations
  • Created reusable 360-degree product experiences using Vue.js
  • Generated configuration and XML output used in SCORM-compatible learning packages
  • Connected frontend visualization, backend asset management, database storage, and LMS packaging
  • Designed interactive experiences that allowed learners to inspect technical products and components visually

Technical Architecture

  1. Admin asset management → 3D/360 viewer → model interaction → SCORM package → LMS
  2. Vue.js and Three.js/WebGL for interactive visualization in the browser
  3. PHP and MySQL for asset management, categories, and viewer configuration

Engineering Challenges

  • Rendering technical models reliably in the browser
  • Managing categories, assets, and viewer configurations administratively
  • Connecting visualization tooling to LMS-compatible packaging
  • Keeping 3D and 360 experiences reusable across training contexts

Reliability and Confidentiality

Visualization work is described without proprietary textbook models, customer names, internal branding, or confidential course assets. SCORM packaging is stated generally without claiming a specific SCORM version or unsupported learning standards.

Technologies

  • Vue.js, Three.js, JavaScript, WebGL, PHP, MySQL, SCORM
  • CodeIgniter, Bootstrap, Knockout.js, OBJ, MTL, XML, HTML5, CSS3

Related Projects