Skip to main content

Your First Splat App

Welcome to building your first Gaussian splat application! This section provides step-by-step tutorials to create a simple application that loads a splat of a cute toy cat that users can orbit around, pan, and zoom.

Choose Your Path​

We offer four different approaches to build the same app. Pick the one that matches your background and project needs:

🔧 Using the Engine API​

Best for: Experienced JavaScript developers who want full control

  • What: Direct PlayCanvas Engine API usage with ES6 modules
  • Files: index.html + main.js
  • Pros: Maximum flexibility, full engine access, smallest footprint
  • Cons: More code to write, requires engine knowledge

🌐 Using Web Components​

Best for: Web developers familiar with HTML and modern standards

  • What: Declarative HTML using <pc-app>, <pc-entity>, <pc-splat> tags
  • Files: Single HTML file
  • Pros: No build tools needed, familiar HTML syntax, quick prototyping
  • Cons: Limited to web component capabilities

⚛️ Using PlayCanvas React​

Best for: React developers and teams using React ecosystems

  • What: JSX components that map to PlayCanvas entities and components
  • Files: React component
  • Pros: React integration, state management, TypeScript support, component composition
  • Cons: Requires React knowledge and build setup

🎨 Using the Editor​

Best for: Designers, artists, and visual learners

  • What: Point-and-click interface with Asset Store integration
  • Files: PlayCanvas project (cloud-based)
  • Pros: No coding required, visual tools, team collaboration, publishing features
  • Cons: Requires PlayCanvas account, less programmatic control