Skip to content

page.mdx

Latest commit

 

History

History
114 lines (92 loc) · 4.01 KB

page.mdx

File metadata and controls

114 lines (92 loc) · 4.01 KB
title Introduction

import { Cards } from 'nextra/components' import { Icons } from '@/docs-components/Icons' import { Terminal } from 'lucide-react' import { OpenHomePageExampleInCodeSandbox } from '@/docs-components/code-sandbox' import { OpenHomePageExampleInStackBlitz } from '@/docs-components/OpenInStackblitz' import Example from '@/templates/HomePageExample'

@playcanvas/react

A react library for for creating 3D apps, with an extensible Entity-Component System supporting physics, interaction, and scripting.

import { Tabs, Code } from 'nextra/components'

<Tabs items={['Demo', 'Code']}> <Tabs.Tab>

{/* /} <entity name='camera' key='a' position={[0, 0, 20]}> {/ /} {/ */}
</Tabs.Tab> <Tabs.Tab> {'sdf'} </Tabs.Tab>

} title="Open in Playground" href="/playground/model-viewer" arrow />

How does it work?

The library provides a thin declarative layer around the PlayCanvas ECS. You create an Application and add Entities to it. Entities have position, rotation and scale. You add behaviour by attaching Components to entities.

Here's a simple example rendering a simple 3D asset with orbit controls.

import { Application, Entity } from '@playcanvas/react'
import { Camera } from "@playcanvas/react/components"
import { OrbitControls } from "@playcanvas/react/scripts"

const App = (car) => {
  return (
    <Application>
        <Entity position={[0, 2, 0]}>
          <Camera clearColor="blue"/>
          <OrbitControls />
        </Entity>
        <Entity >
          <Container asset={car} />
        </Entity>
    </Application>
  );
}

Features

PlayCanvas comes with a number of built in components and scripts that you can use. This makes it easy to get started building your app.

  • Physics - Add rigid body components to your entities to enable physics sims
  • Gaussian Splats - Add a GSplat component to render high quality 3D content
  • Interactivity - Supports PointerEvents with event bubbling
  • Scripts - Provides an imperative API for adding non-declaratives logic to your app
  • Built using a natural ECS architecture.
  • Asset System - Easy to use asset loader for 3D models, audio, video and other assets
  • ECS - Intuitive Entity Component System

Who's using it?

Currently used in the following apps:

} title="SnapChat" href="https://ml.snapchat.com" />

First steps

If you're familiar with React but new to PlayCanvas and 3D in general, the best place to start is the Getting Started Guide. It will walk you through creating a simple app and explain the core concepts.

If you're already using PlayCanvas, but new to React, it's worth checking out the React docs first, which provide a great introduction to the React ecosystem. From then you can jump into the API Reference.

You can learn more about PlayCanvas on the developer site and through the tutorials. Similarly the React docs has a great tutorial section