@aidinabedi/playcanvas
Version:
PlayCanvas WebGL game engine
752 lines (705 loc) • 51.9 kB
HTML
<!doctype html>
<html lang="en">
<head>
<title>pc.CameraComponent | PlayCanvas API Reference</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="images/playcanvas-favicon.png">
<link href="styles/styles.css" rel="stylesheet">
<link href="styles/playcanvas-theme.css" rel="stylesheet">
<script src="scripts/interface.js"></script>
<script src="scripts/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<header>
<nav class="header-width">
<a href="/" class="header-title"><img src="images/playcanvas-manual.png"></a>
<ul class="header-menu">
<li class="user-manual"><a href="https://developer.playcanvas.com/en/user-manual/">User Manual</a></li>
<li class="tutorials"><a href="https://developer.playcanvas.com/en/tutorials">Tutorials</a></li>
<li class="forum"><a href="https://forum.playcanvas.com/" target="_blank">Forum</a></li>
<li class="api active"><a href="/api/">API Reference</a></li>
</ul>
</nav>
<div class="header-content header-page header-width">
<h1><span class="font-icon"></span>API Reference</h1>
<input id="search" class="search" type="text" placeholder="Search"></input>
</div>
</header>
<div class="container content-width">
<nav class="sidebar">
<div class="sidebarFilter">
<input id="filter-input" type="text" placeholder="Filter">
</div>
<ul>
<li id="nav-pc"><a href="pc.html">pc</a></li>
<li id="nav-pc.callbacks"><a href="pc.callbacks.html">pc.callbacks</a></li>
<li id="nav-pc.guid"><a href="pc.guid.html">pc.guid</a></li>
<li id="nav-pc.math"><a href="pc.math.html">pc.math</a></li>
<li id="nav-pc.path"><a href="pc.path.html">pc.path</a></li>
<li id="nav-pc.platform"><a href="pc.platform.html">pc.platform</a></li>
<li id="nav-pc.script"><a href="pc.script.html">pc.script</a></li>
<li id="nav-pc.string"><a href="pc.string.html">pc.string</a></li>
<li id="nav-pc.Animation"><a href="pc.Animation.html">Animation</a></li>
<li id="nav-pc.AnimationComponent"><a href="pc.AnimationComponent.html">AnimationComponent</a></li>
<li id="nav-pc.AnimationComponentSystem"><a href="pc.AnimationComponentSystem.html">AnimationComponentSystem</a></li>
<li id="nav-pc.AnimationHandler"><a href="pc.AnimationHandler.html">AnimationHandler</a></li>
<li id="nav-pc.AnimCache"><a href="pc.AnimCache.html">AnimCache</a></li>
<li id="nav-pc.AnimClip"><a href="pc.AnimClip.html">AnimClip</a></li>
<li id="nav-pc.AnimController"><a href="pc.AnimController.html">AnimController</a></li>
<li id="nav-pc.AnimCurve"><a href="pc.AnimCurve.html">AnimCurve</a></li>
<li id="nav-pc.AnimData"><a href="pc.AnimData.html">AnimData</a></li>
<li id="nav-pc.AnimSnapshot"><a href="pc.AnimSnapshot.html">AnimSnapshot</a></li>
<li id="nav-pc.AnimTarget"><a href="pc.AnimTarget.html">AnimTarget</a></li>
<li id="nav-pc.AnimTrack"><a href="pc.AnimTrack.html">AnimTrack</a></li>
<li id="nav-pc.Application"><a href="pc.Application.html">Application</a></li>
<li id="nav-pc.Asset"><a href="pc.Asset.html">Asset</a></li>
<li id="nav-pc.AssetReference"><a href="pc.AssetReference.html">AssetReference</a></li>
<li id="nav-pc.AssetRegistry"><a href="pc.AssetRegistry.html">AssetRegistry</a></li>
<li id="nav-pc.AudioHandler"><a href="pc.AudioHandler.html">AudioHandler</a></li>
<li id="nav-pc.AudioListenerComponent"><a href="pc.AudioListenerComponent.html">AudioListenerComponent</a></li>
<li id="nav-pc.AudioListenerComponentSystem"><a href="pc.AudioListenerComponentSystem.html">AudioListenerComponentSystem</a></li>
<li id="nav-pc.BasicMaterial"><a href="pc.BasicMaterial.html">BasicMaterial</a></li>
<li id="nav-pc.Batch"><a href="pc.Batch.html">Batch</a></li>
<li id="nav-pc.BatchGroup"><a href="pc.BatchGroup.html">BatchGroup</a></li>
<li id="nav-pc.BatchManager"><a href="pc.BatchManager.html">BatchManager</a></li>
<li id="nav-pc.BoundingBox"><a href="pc.BoundingBox.html">BoundingBox</a></li>
<li id="nav-pc.BoundingSphere"><a href="pc.BoundingSphere.html">BoundingSphere</a></li>
<li id="nav-pc.ButtonComponent"><a href="pc.ButtonComponent.html">ButtonComponent</a></li>
<li id="nav-pc.ButtonComponentSystem"><a href="pc.ButtonComponentSystem.html">ButtonComponentSystem</a></li>
<li id="nav-pc.CameraComponent"><a href="pc.CameraComponent.html">CameraComponent</a></li>
<li id="nav-pc.CameraComponentSystem"><a href="pc.CameraComponentSystem.html">CameraComponentSystem</a></li>
<li id="nav-pc.CollisionComponent"><a href="pc.CollisionComponent.html">CollisionComponent</a></li>
<li id="nav-pc.CollisionComponentSystem"><a href="pc.CollisionComponentSystem.html">CollisionComponentSystem</a></li>
<li id="nav-pc.Color"><a href="pc.Color.html">Color</a></li>
<li id="nav-pc.Component"><a href="pc.Component.html">Component</a></li>
<li id="nav-pc.ComponentSystem"><a href="pc.ComponentSystem.html">ComponentSystem</a></li>
<li id="nav-pc.ComponentSystemRegistry"><a href="pc.ComponentSystemRegistry.html">ComponentSystemRegistry</a></li>
<li id="nav-pc.ContactPoint"><a href="pc.ContactPoint.html">ContactPoint</a></li>
<li id="nav-pc.ContactResult"><a href="pc.ContactResult.html">ContactResult</a></li>
<li id="nav-pc.ContainerHandler"><a href="pc.ContainerHandler.html">ContainerHandler</a></li>
<li id="nav-pc.ContainerResource"><a href="pc.ContainerResource.html">ContainerResource</a></li>
<li id="nav-pc.Controller"><a href="pc.Controller.html">Controller</a></li>
<li id="nav-pc.CubemapHandler"><a href="pc.CubemapHandler.html">CubemapHandler</a></li>
<li id="nav-pc.Curve"><a href="pc.Curve.html">Curve</a></li>
<li id="nav-pc.CurveSet"><a href="pc.CurveSet.html">CurveSet</a></li>
<li id="nav-pc.ElementComponent"><a href="pc.ElementComponent.html">ElementComponent</a></li>
<li id="nav-pc.ElementComponentSystem"><a href="pc.ElementComponentSystem.html">ElementComponentSystem</a></li>
<li id="nav-pc.ElementDragHelper"><a href="pc.ElementDragHelper.html">ElementDragHelper</a></li>
<li id="nav-pc.ElementInput"><a href="pc.ElementInput.html">ElementInput</a></li>
<li id="nav-pc.ElementInputEvent"><a href="pc.ElementInputEvent.html">ElementInputEvent</a></li>
<li id="nav-pc.ElementMouseEvent"><a href="pc.ElementMouseEvent.html">ElementMouseEvent</a></li>
<li id="nav-pc.ElementTouchEvent"><a href="pc.ElementTouchEvent.html">ElementTouchEvent</a></li>
<li id="nav-pc.Entity"><a href="pc.Entity.html">Entity</a></li>
<li id="nav-pc.EventHandler"><a href="pc.EventHandler.html">EventHandler</a></li>
<li id="nav-pc.Font"><a href="pc.Font.html">Font</a></li>
<li id="nav-pc.FontHandler"><a href="pc.FontHandler.html">FontHandler</a></li>
<li id="nav-pc.ForwardRenderer"><a href="pc.ForwardRenderer.html">ForwardRenderer</a></li>
<li id="nav-pc.Frustum"><a href="pc.Frustum.html">Frustum</a></li>
<li id="nav-pc.GamePads"><a href="pc.GamePads.html">GamePads</a></li>
<li id="nav-pc.GraphicsDevice"><a href="pc.GraphicsDevice.html">GraphicsDevice</a></li>
<li id="nav-pc.GraphNode"><a href="pc.GraphNode.html">GraphNode</a></li>
<li id="nav-pc.Http"><a href="pc.Http.html">Http</a></li>
<li id="nav-pc.I18n"><a href="pc.I18n.html">I18n</a></li>
<li id="nav-pc.IndexBuffer"><a href="pc.IndexBuffer.html">IndexBuffer</a></li>
<li id="nav-pc.Keyboard"><a href="pc.Keyboard.html">Keyboard</a></li>
<li id="nav-pc.KeyboardEvent"><a href="pc.KeyboardEvent.html">KeyboardEvent</a></li>
<li id="nav-pc.Layer"><a href="pc.Layer.html">Layer</a></li>
<li id="nav-pc.LayerComposition"><a href="pc.LayerComposition.html">LayerComposition</a></li>
<li id="nav-pc.LayoutChildComponent"><a href="pc.LayoutChildComponent.html">LayoutChildComponent</a></li>
<li id="nav-pc.LayoutChildComponentSystem"><a href="pc.LayoutChildComponentSystem.html">LayoutChildComponentSystem</a></li>
<li id="nav-pc.LayoutGroupComponent"><a href="pc.LayoutGroupComponent.html">LayoutGroupComponent</a></li>
<li id="nav-pc.LayoutGroupComponentSystem"><a href="pc.LayoutGroupComponentSystem.html">LayoutGroupComponentSystem</a></li>
<li id="nav-pc.LightComponent"><a href="pc.LightComponent.html">LightComponent</a></li>
<li id="nav-pc.LightComponentSystem"><a href="pc.LightComponentSystem.html">LightComponentSystem</a></li>
<li id="nav-pc.Lightmapper"><a href="pc.Lightmapper.html">Lightmapper</a></li>
<li id="nav-pc.Mat3"><a href="pc.Mat3.html">Mat3</a></li>
<li id="nav-pc.Mat4"><a href="pc.Mat4.html">Mat4</a></li>
<li id="nav-pc.Material"><a href="pc.Material.html">Material</a></li>
<li id="nav-pc.MaterialHandler"><a href="pc.MaterialHandler.html">MaterialHandler</a></li>
<li id="nav-pc.Mesh"><a href="pc.Mesh.html">Mesh</a></li>
<li id="nav-pc.MeshInstance"><a href="pc.MeshInstance.html">MeshInstance</a></li>
<li id="nav-pc.Model"><a href="pc.Model.html">Model</a></li>
<li id="nav-pc.ModelComponent"><a href="pc.ModelComponent.html">ModelComponent</a></li>
<li id="nav-pc.ModelComponentSystem"><a href="pc.ModelComponentSystem.html">ModelComponentSystem</a></li>
<li id="nav-pc.ModelHandler"><a href="pc.ModelHandler.html">ModelHandler</a></li>
<li id="nav-pc.Morph"><a href="pc.Morph.html">Morph</a></li>
<li id="nav-pc.MorphInstance"><a href="pc.MorphInstance.html">MorphInstance</a></li>
<li id="nav-pc.MorphTarget"><a href="pc.MorphTarget.html">MorphTarget</a></li>
<li id="nav-pc.Mouse"><a href="pc.Mouse.html">Mouse</a></li>
<li id="nav-pc.MouseEvent"><a href="pc.MouseEvent.html">MouseEvent</a></li>
<li id="nav-pc.Node"><a href="pc.Node.html">Node</a></li>
<li id="nav-pc.OrientedBox"><a href="pc.OrientedBox.html">OrientedBox</a></li>
<li id="nav-pc.ParticleSystemComponent"><a href="pc.ParticleSystemComponent.html">ParticleSystemComponent</a></li>
<li id="nav-pc.ParticleSystemComponentSystem"><a href="pc.ParticleSystemComponentSystem.html">ParticleSystemComponentSystem</a></li>
<li id="nav-pc.Picker"><a href="pc.Picker.html">Picker</a></li>
<li id="nav-pc.PostEffect"><a href="pc.PostEffect.html">PostEffect</a></li>
<li id="nav-pc.PostEffectQueue"><a href="pc.PostEffectQueue.html">PostEffectQueue</a></li>
<li id="nav-pc.Quat"><a href="pc.Quat.html">Quat</a></li>
<li id="nav-pc.Ray"><a href="pc.Ray.html">Ray</a></li>
<li id="nav-pc.RaycastResult"><a href="pc.RaycastResult.html">RaycastResult</a></li>
<li id="nav-pc.RenderTarget"><a href="pc.RenderTarget.html">RenderTarget</a></li>
<li id="nav-pc.ResourceHandler"><a href="pc.ResourceHandler.html">ResourceHandler</a></li>
<li id="nav-pc.ResourceLoader"><a href="pc.ResourceLoader.html">ResourceLoader</a></li>
<li id="nav-pc.RigidBodyComponent"><a href="pc.RigidBodyComponent.html">RigidBodyComponent</a></li>
<li id="nav-pc.RigidBodyComponentSystem"><a href="pc.RigidBodyComponentSystem.html">RigidBodyComponentSystem</a></li>
<li id="nav-pc.Scene"><a href="pc.Scene.html">Scene</a></li>
<li id="nav-pc.SceneHandler"><a href="pc.SceneHandler.html">SceneHandler</a></li>
<li id="nav-pc.ScopeId"><a href="pc.ScopeId.html">ScopeId</a></li>
<li id="nav-pc.ScopeSpace"><a href="pc.ScopeSpace.html">ScopeSpace</a></li>
<li id="nav-pc.ScreenComponent"><a href="pc.ScreenComponent.html">ScreenComponent</a></li>
<li id="nav-pc.ScreenComponentSystem"><a href="pc.ScreenComponentSystem.html">ScreenComponentSystem</a></li>
<li id="nav-pc.ScriptAttributes"><a href="pc.ScriptAttributes.html">ScriptAttributes</a></li>
<li id="nav-pc.ScriptComponent"><a href="pc.ScriptComponent.html">ScriptComponent</a></li>
<li id="nav-pc.ScriptComponentSystem"><a href="pc.ScriptComponentSystem.html">ScriptComponentSystem</a></li>
<li id="nav-pc.ScriptHandler"><a href="pc.ScriptHandler.html">ScriptHandler</a></li>
<li id="nav-pc.ScriptRegistry"><a href="pc.ScriptRegistry.html">ScriptRegistry</a></li>
<li id="nav-pc.ScriptType"><a href="pc.ScriptType.html">ScriptType</a></li>
<li id="nav-pc.ScrollbarComponent"><a href="pc.ScrollbarComponent.html">ScrollbarComponent</a></li>
<li id="nav-pc.ScrollbarComponentSystem"><a href="pc.ScrollbarComponentSystem.html">ScrollbarComponentSystem</a></li>
<li id="nav-pc.ScrollViewComponent"><a href="pc.ScrollViewComponent.html">ScrollViewComponent</a></li>
<li id="nav-pc.ScrollViewComponentSystem"><a href="pc.ScrollViewComponentSystem.html">ScrollViewComponentSystem</a></li>
<li id="nav-pc.Shader"><a href="pc.Shader.html">Shader</a></li>
<li id="nav-pc.SingleContactResult"><a href="pc.SingleContactResult.html">SingleContactResult</a></li>
<li id="nav-pc.Skeleton"><a href="pc.Skeleton.html">Skeleton</a></li>
<li id="nav-pc.Skin"><a href="pc.Skin.html">Skin</a></li>
<li id="nav-pc.SkinInstance"><a href="pc.SkinInstance.html">SkinInstance</a></li>
<li id="nav-pc.Sound"><a href="pc.Sound.html">Sound</a></li>
<li id="nav-pc.SoundComponent"><a href="pc.SoundComponent.html">SoundComponent</a></li>
<li id="nav-pc.SoundComponentSystem"><a href="pc.SoundComponentSystem.html">SoundComponentSystem</a></li>
<li id="nav-pc.SoundInstance"><a href="pc.SoundInstance.html">SoundInstance</a></li>
<li id="nav-pc.SoundInstance3d"><a href="pc.SoundInstance3d.html">SoundInstance3d</a></li>
<li id="nav-pc.SoundManager"><a href="pc.SoundManager.html">SoundManager</a></li>
<li id="nav-pc.SoundSlot"><a href="pc.SoundSlot.html">SoundSlot</a></li>
<li id="nav-pc.Sprite"><a href="pc.Sprite.html">Sprite</a></li>
<li id="nav-pc.SpriteAnimationClip"><a href="pc.SpriteAnimationClip.html">SpriteAnimationClip</a></li>
<li id="nav-pc.SpriteComponent"><a href="pc.SpriteComponent.html">SpriteComponent</a></li>
<li id="nav-pc.SpriteComponentSystem"><a href="pc.SpriteComponentSystem.html">SpriteComponentSystem</a></li>
<li id="nav-pc.SpriteHandler"><a href="pc.SpriteHandler.html">SpriteHandler</a></li>
<li id="nav-pc.StandardMaterial"><a href="pc.StandardMaterial.html">StandardMaterial</a></li>
<li id="nav-pc.StencilParameters"><a href="pc.StencilParameters.html">StencilParameters</a></li>
<li id="nav-pc.Tags"><a href="pc.Tags.html">Tags</a></li>
<li id="nav-pc.Texture"><a href="pc.Texture.html">Texture</a></li>
<li id="nav-pc.TextureAtlas"><a href="pc.TextureAtlas.html">TextureAtlas</a></li>
<li id="nav-pc.TextureAtlasHandler"><a href="pc.TextureAtlasHandler.html">TextureAtlasHandler</a></li>
<li id="nav-pc.TextureHandler"><a href="pc.TextureHandler.html">TextureHandler</a></li>
<li id="nav-pc.Touch"><a href="pc.Touch.html">Touch</a></li>
<li id="nav-pc.TouchDevice"><a href="pc.TouchDevice.html">TouchDevice</a></li>
<li id="nav-pc.TouchEvent"><a href="pc.TouchEvent.html">TouchEvent</a></li>
<li id="nav-pc.TransformFeedback"><a href="pc.TransformFeedback.html">TransformFeedback</a></li>
<li id="nav-pc.Vec2"><a href="pc.Vec2.html">Vec2</a></li>
<li id="nav-pc.Vec3"><a href="pc.Vec3.html">Vec3</a></li>
<li id="nav-pc.Vec4"><a href="pc.Vec4.html">Vec4</a></li>
<li id="nav-pc.VertexAttributeDescription"><a href="pc.VertexAttributeDescription.html">VertexAttributeDescription</a></li>
<li id="nav-pc.VertexAttributeElement"><a href="pc.VertexAttributeElement.html">VertexAttributeElement</a></li>
<li id="nav-pc.VertexBuffer"><a href="pc.VertexBuffer.html">VertexBuffer</a></li>
<li id="nav-pc.VertexFormat"><a href="pc.VertexFormat.html">VertexFormat</a></li>
<li id="nav-pc.VertexIterator"><a href="pc.VertexIterator.html">VertexIterator</a></li>
<li id="nav-pc.VertexIteratorAccessor"><a href="pc.VertexIteratorAccessor.html">VertexIteratorAccessor</a></li>
<li id="nav-pc.XrInput"><a href="pc.XrInput.html">XrInput</a></li>
<li id="nav-pc.XrInputSource"><a href="pc.XrInputSource.html">XrInputSource</a></li>
<li id="nav-pc.XrManager"><a href="pc.XrManager.html">XrManager</a></li>
</ul>
</nav>
<div class='sidebarToggle'><span></span>Class List</div>
<main class="cls">
<h1>pc.CameraComponent</h1>
<p class="extends">Extends: <a href="pc.Component.html">pc.Component</a></p>
<p><p>The Camera Component enables an Entity to render the scene. A scene requires at least one
enabled camera component to be rendered. Note that multiple camera components can be enabled
simultaneously (for split-screen or offscreen rendering, for example).</p></p>
<pre><code class="javascript">// Add a pc.CameraComponent to an entity
var entity = new pc.Entity();
entity.addComponent('camera', {
nearClip: 1,
farClip: 100,
fov: 55
});</code></pre>
<pre><code class="javascript">// Get the pc.CameraComponent on an entity
var cameraComponent = entity.camera;</code></pre>
<pre><code class="javascript">// Update a property on a camera component
entity.camera.nearClip = 2;</code></pre>
<!-- summary -->
<h1>Summary</h1>
<!--type definitions-->
<!--static properties-->
<!--static methods-->
<!--properties-->
<h3>Properties</h3>
<table class="properties">
<tr>
<td><a href="#aspectRatio">aspectRatio</a></td><td><p>The aspect ratio (width divided by height) of the camera.</td>
</tr>
<tr>
<td><a href="#aspectRatioMode">aspectRatioMode</a></td><td><p>The aspect ratio mode of the camera.</td>
</tr>
<tr>
<td><a href="#calculateProjection">calculateProjection</a></td><td><p>Custom function you can provide to calculate the camera projection matrix manually.</td>
</tr>
<tr>
<td><a href="#calculateTransform">calculateTransform</a></td><td><p>Custom function you can provide to calculate the camera transformation matrix manually.</td>
</tr>
<tr>
<td><a href="#clearColor">clearColor</a></td><td><p>The color used to clear the canvas to before the camera starts to render.</td>
</tr>
<tr>
<td><a href="#clearColorBuffer">clearColorBuffer</a></td><td><p>If true the camera will clear the color buffer to the color set in clearColor.</td>
</tr>
<tr>
<td><a href="#clearDepthBuffer">clearDepthBuffer</a></td><td><p>If true the camera will clear the depth buffer.</td>
</tr>
<tr>
<td><a href="#clearStencilBuffer">clearStencilBuffer</a></td><td><p>If true the camera will clear the stencil buffer.</td>
</tr>
<tr>
<td><a href="#cullFaces">cullFaces</a></td><td><p>If true the camera will take material.</td>
</tr>
<tr>
<td><a href="#farClip">farClip</a></td><td><p>The distance from the camera after which no rendering will take place.</td>
</tr>
<tr>
<td><a href="#flipFaces">flipFaces</a></td><td><p>If true the camera will invert front and back faces.</td>
</tr>
<tr>
<td><a href="#fov">fov</a></td><td><p>The field of view of the camera in degrees.</td>
</tr>
<tr>
<td><a href="#frustum">frustum</a></td><td><p>Queries the camera's frustum shape.<span class='readonly'>[read only]</span></td>
</tr>
<tr>
<td><a href="#frustumCulling">frustumCulling</a></td><td><p>Controls the culling of mesh instances against the camera frustum, i.</td>
</tr>
<tr>
<td><a href="#horizontalFov">horizontalFov</a></td><td><p>Set which axis to use for the Field of View calculation.</td>
</tr>
<tr>
<td><a href="#layers">layers</a></td><td><p>An array of layer IDs (pc.Layer#id) to which this camera should belong.</td>
</tr>
<tr>
<td><a href="#nearClip">nearClip</a></td><td><p>The distance from the camera before which no rendering will take place.</td>
</tr>
<tr>
<td><a href="#node">node</a></td><td><p>Queries the camera's GraphNode.<span class='readonly'>[read only]</span></td>
</tr>
<tr>
<td><a href="#orthoHeight">orthoHeight</a></td><td><p>The half-height of the orthographic view window (in the Y-axis).</td>
</tr>
<tr>
<td><a href="#postEffects">postEffects</a></td><td><p>The post effects queue for this camera.</td>
</tr>
<tr>
<td><a href="#priority">priority</a></td><td><p>Controls the order in which cameras are rendered.</td>
</tr>
<tr>
<td><a href="#projection">projection</a></td><td><p>The type of projection used to render the camera.</td>
</tr>
<tr>
<td><a href="#projectionMatrix">projectionMatrix</a></td><td><p>Queries the camera's projection matrix.<span class='readonly'>[read only]</span></td>
</tr>
<tr>
<td><a href="#rect">rect</a></td><td><p>Controls where on the screen the camera will be rendered in normalized screen coordinates.</td>
</tr>
<tr>
<td><a href="#scissorRect">scissorRect</a></td><td><p>Clips all pixels which are not in the rectangle.</td>
</tr>
<tr>
<td><a href="#viewMatrix">viewMatrix</a></td><td><p>Queries the camera's view matrix.<span class='readonly'>[read only]</span></td>
</tr>
</table>
<!--methods-->
<h3>Methods</h3>
<table class="properties">
<tr>
<td><a href="#calculateAspectRatio">calculateAspectRatio</a></td><td><p>Calculates aspect ratio value for a given render target.</td>
</tr>
<tr>
<td><a href="#endXr">endXr</a></td><td><p>Attempt to end XR session of this camera</p></td>
</tr>
<tr>
<td><a href="#screenToWorld">screenToWorld</a></td><td><p>Convert a point from 2D screen space to 3D world space.</td>
</tr>
<tr>
<td><a href="#startXr">startXr</a></td><td><p>Attempt to start XR session with this camera</p></td>
</tr>
<tr>
<td><a href="#worldToScreen">worldToScreen</a></td><td><p>Convert a point from 3D world space to 2D screen space.</td>
</tr>
</table>
<!--events-->
<h2>Inherited</h2>
<!--inherited methods-->
<!--inherited properties-->
<h3>Properties</h3>
<table class="properties">
<tr>
<td><a href="#system">system</a></td><td><p>The ComponentSystem used to create this Component.</td>
</tr>
<tr>
<td><a href="#entity">entity</a></td><td><p>The Entity that this Component is attached to.</td>
</tr>
<tr>
<td><a href="#enabled">enabled</a></td><td><p>Enables or disables the component.</td>
</tr>
</table>
<!--inherited static methods-->
<h3>Methods</h3>
<table class="properties">
<tr>
<td><a href="#fire">fire</a></td><td><p>Fire an event, all additional arguments are passed on to the event listener.</td>
</tr>
<tr>
<td><a href="#hasEvent">hasEvent</a></td><td><p>Test if there are any handlers bound to an event name.</td>
</tr>
<tr>
<td><a href="#off">off</a></td><td><p>Detach an event handler from an event.</td>
</tr>
<tr>
<td><a href="#on">on</a></td><td><p>Attach an event handler to an event.</td>
</tr>
<tr>
<td><a href="#once">once</a></td><td><p>Attach an event handler to an event.</td>
</tr>
</table>
<!--inherited events-->
<h1>Details</h1>
<!--type definitions-->
<!--static members-->
<!--static methods-->
<h2>Constructor</h2>
<!-- Constructor -->
<div id="CameraComponent">
<h3 class="methodname">CameraComponent(system, entity) <a class="font-icon" href="#CameraComponent"></a></h3>
<p><p>Create a new Camera Component.</p></p>
<pre><code class="javascript">// Add a pc.CameraComponent to an entity
var entity = new pc.Entity();
entity.addComponent('camera', {
nearClip: 1,
farClip: 100,
fov: 55
});</code></pre>
<pre><code class="javascript">// Get the pc.CameraComponent on an entity
var cameraComponent = entity.camera;</code></pre>
<pre><code class="javascript">// Update a property on a camera component
entity.camera.nearClip = 2;</code></pre>
<h4>Parameters</h4>
<table>
<tr>
<td>system</td><td><a href="pc.CameraComponentSystem.html">pc.CameraComponentSystem</a></td><td><p>The ComponentSystem that created this Component.</p></td>
</tr>
<tr>
<td>entity</td><td><a href="pc.Entity.html">pc.Entity</a></td><td><p>The Entity that this Component is attached to.</p></td>
</tr>
</table>
</div>
<!--properties-->
<h2>Properties</h2>
<div id="aspectRatio">
<span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">aspectRatio <a class="font-icon" href="#aspectRatio"></a></span>
<p><p>The aspect ratio (width divided by height) of the camera. If aspectRatioMode is ASPECT_AUTO, then this value will be automatically calculated every frame, and you can only read it. If it's ASPECT_MANUAL, you can set the value.</p></p>
</div>
<div id="aspectRatioMode">
<span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">aspectRatioMode <a class="font-icon" href="#aspectRatioMode"></a></span>
<p><p>The aspect ratio mode of the camera. Can be pc.ASPECT_AUTO (default) or pc.ASPECT_MANUAL. ASPECT_AUTO will always be current render target's width divided by height. ASPECT_MANUAL will use the aspectRatio value instead.</p></p>
</div>
<div id="calculateProjection">
<span class="property"><a href="pc.callbacks.html#CalculateMatrix">pc.callbacks.CalculateMatrix</a></span><span class="property">calculateProjection <a class="font-icon" href="#calculateProjection"></a></span>
<p><p>Custom function you can provide to calculate the camera projection matrix manually. Can be used for complex effects like doing oblique projection. Function is called using component's scope.
Arguments:</p>
<ul>
<li>{pc.Mat4} transformMatrix: output of the function</li>
<li>{number} view: Type of view. Can be pc.VIEW_CENTER, pc.VIEW_LEFT or pc.VIEW_RIGHT. Left and right are only used in stereo rendering.</li>
</ul></p>
</div>
<div id="calculateTransform">
<span class="property"><a href="pc.callbacks.html#CalculateMatrix">pc.callbacks.CalculateMatrix</a></span><span class="property">calculateTransform <a class="font-icon" href="#calculateTransform"></a></span>
<p><p>Custom function you can provide to calculate the camera transformation matrix manually. Can be used for complex effects like reflections. Function is called using component's scope.
Arguments:</p>
<ul>
<li>{pc.Mat4} transformMatrix: output of the function.</li>
<li>{number} view: Type of view. Can be pc.VIEW_CENTER, pc.VIEW_LEFT or pc.VIEW_RIGHT. Left and right are only used in stereo rendering.</li>
</ul></p>
</div>
<div id="clearColor">
<span class="property"><a href="pc.Color.html">pc.Color</a></span><span class="property">clearColor <a class="font-icon" href="#clearColor"></a></span>
<p><p>The color used to clear the canvas to before the camera starts to render.</p></p>
</div>
<div id="clearColorBuffer">
<span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span><span class="property">clearColorBuffer <a class="font-icon" href="#clearColorBuffer"></a></span>
<p><p>If true the camera will clear the color buffer to the color set in clearColor.</p></p>
</div>
<div id="clearDepthBuffer">
<span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span><span class="property">clearDepthBuffer <a class="font-icon" href="#clearDepthBuffer"></a></span>
<p><p>If true the camera will clear the depth buffer.</p></p>
</div>
<div id="clearStencilBuffer">
<span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span><span class="property">clearStencilBuffer <a class="font-icon" href="#clearStencilBuffer"></a></span>
<p><p>If true the camera will clear the stencil buffer.</p></p>
</div>
<div id="cullFaces">
<span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span><span class="property">cullFaces <a class="font-icon" href="#cullFaces"></a></span>
<p><p>If true the camera will take material.cull into account. Otherwise both front and back faces will be rendered.</p></p>
</div>
<div id="farClip">
<span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">farClip <a class="font-icon" href="#farClip"></a></span>
<p><p>The distance from the camera after which no rendering will take place.</p></p>
</div>
<div id="flipFaces">
<span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span><span class="property">flipFaces <a class="font-icon" href="#flipFaces"></a></span>
<p><p>If true the camera will invert front and back faces. Can be useful for reflection rendering.</p></p>
</div>
<div id="fov">
<span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">fov <a class="font-icon" href="#fov"></a></span>
<p><p>The field of view of the camera in degrees. Usually this is the Y-axis field of
view, see pc.CameraComponent#horizontalFov. Used for <a href="pc.html#PROJECTION_PERSPECTIVE">pc.PROJECTION_PERSPECTIVE</a> cameras only. Defaults to 45.</p></p>
</div>
<div id="frustum">
<span class="property"><a href="pc.Frustum.html">pc.Frustum</a></span><span class="property">frustum <a class="font-icon" href="#frustum"></a></span>
<p><p>Queries the camera's frustum shape.</p><span class='readonly'>[read only]</span></p>
</div>
<div id="frustumCulling">
<span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span><span class="property">frustumCulling <a class="font-icon" href="#frustumCulling"></a></span>
<p><p>Controls the culling of mesh instances against the camera frustum, i.e. if objects outside of camera should be omitted from rendering.
If true, culling is enabled.
If false, all mesh instances in the scene are rendered by the camera, regardless of visibility. Defaults to false.</p></p>
</div>
<div id="horizontalFov">
<span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span><span class="property">horizontalFov <a class="font-icon" href="#horizontalFov"></a></span>
<p><p>Set which axis to use for the Field of View calculation. Defaults to false (use Y-axis).</p></p>
</div>
<div id="layers">
<span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number[]</a></span><span class="property">layers <a class="font-icon" href="#layers"></a></span>
<p><p>An array of layer IDs (pc.Layer#id) to which this camera should belong.
Don't push/pop/splice or modify this array, if you want to change it - set a new one instead.</p></p>
</div>
<div id="nearClip">
<span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">nearClip <a class="font-icon" href="#nearClip"></a></span>
<p><p>The distance from the camera before which no rendering will take place.</p></p>
</div>
<div id="node">
<span class="property"><a href="pc.GraphNode.html">pc.GraphNode</a></span><span class="property">node <a class="font-icon" href="#node"></a></span>
<p><p>Queries the camera's GraphNode. Can be used to get position and rotation.</p><span class='readonly'>[read only]</span></p>
</div>
<div id="orthoHeight">
<span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">orthoHeight <a class="font-icon" href="#orthoHeight"></a></span>
<p><p>The half-height of the orthographic view window (in the Y-axis). Used for
<a href="pc.html#PROJECTION_ORTHOGRAPHIC">pc.PROJECTION_ORTHOGRAPHIC</a> cameras only. Defaults to 10.</p></p>
</div>
<div id="postEffects">
<span class="property"><a href="pc.PostEffectQueue.html">pc.PostEffectQueue</a></span><span class="property">postEffects <a class="font-icon" href="#postEffects"></a></span>
<p><p>The post effects queue for this camera. Use this to add or remove post effects from the camera.</p></p>
</div>
<div id="priority">
<span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">priority <a class="font-icon" href="#priority"></a></span>
<p><p>Controls the order in which cameras are rendered. Cameras with smaller values for priority are rendered first.</p></p>
</div>
<div id="projection">
<span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">projection <a class="font-icon" href="#projection"></a></span>
<p><p>The type of projection used to render the camera. Can be:</p>
<ul>
<li><a href="pc.html#PROJECTION_PERSPECTIVE">pc.PROJECTION_PERSPECTIVE</a>: A perspective projection. The camera frustum resembles a truncated pyramid.</li>
<li><a href="pc.html#PROJECTION_ORTHOGRAPHIC">pc.PROJECTION_ORTHOGRAPHIC</a>: An orthographic projection. The camera frustum is a cuboid.</li>
</ul>
<p>Defaults to pc.PROJECTION_PERSPECTIVE.</p></p>
</div>
<div id="projectionMatrix">
<span class="property"><a href="pc.Mat4.html">pc.Mat4</a></span><span class="property">projectionMatrix <a class="font-icon" href="#projectionMatrix"></a></span>
<p><p>Queries the camera's projection matrix.</p><span class='readonly'>[read only]</span></p>
</div>
<div id="rect">
<span class="property"><a href="pc.Vec4.html">pc.Vec4</a></span><span class="property">rect <a class="font-icon" href="#rect"></a></span>
<p><p>Controls where on the screen the camera will be rendered in normalized screen coordinates.</p></p>
</div>
<div id="scissorRect">
<span class="property"><a href="pc.Vec4.html">pc.Vec4</a></span><span class="property">scissorRect <a class="font-icon" href="#scissorRect"></a></span>
<p><p>Clips all pixels which are not in the rectangle.
The order of the values is [x, y, width, height].</p></p>
</div>
<div id="viewMatrix">
<span class="property"><a href="pc.Mat4.html">pc.Mat4</a></span><span class="property">viewMatrix <a class="font-icon" href="#viewMatrix"></a></span>
<p><p>Queries the camera's view matrix.</p><span class='readonly'>[read only]</span></p>
</div>
<!--methods-->
<h2>Methods</h2>
<div id="calculateAspectRatio">
<h3 class="methodname">calculateAspectRatio([rt]) <a class="font-icon" href="#calculateAspectRatio"></a></h3>
<p><p>Calculates aspect ratio value for a given render target.</p></p>
<h4>Parameters</h4>
<table>
<tr>
<td>rt</td><td><a href="pc.RenderTarget.html">pc.RenderTarget</a></td><td><p>Optional render target. If unspecified, the backbuffer is assumed.</p></td>
</tr>
</table>
<h4>Returns</h4>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> <p>The aspect ratio of the render target (or backbuffer).</p>
</div>
<div id="endXr">
<h3 class="methodname">endXr([callback]) <a class="font-icon" href="#endXr"></a></h3>
<p><p>Attempt to end XR session of this camera</p></p>
<pre><code class="javascript">// On an entity with a camera component
this.entity.camera.endXr(function (err) {
// not anymore in XR
});</code></pre>
<h4>Parameters</h4>
<table>
<tr>
<td>callback</td><td><a href="pc.callbacks.html#XrError">pc.callbacks.XrError</a></td><td><p>Optional callback function called once session is ended. The callback has one argument Error - it is null if successfully ended XR session.</p></td>
</tr>
</table>
</div>
<div id="screenToWorld">
<h3 class="methodname">screenToWorld(screenx, screeny, cameraz, [worldCoord]) <a class="font-icon" href="#screenToWorld"></a></h3>
<p><p>Convert a point from 2D screen space to 3D world space.</p></p>
<pre><code class="javascript">// Get the start and end points of a 3D ray fired from a screen click position
var start = entity.camera.screenToWorld(clickX, clickY, entity.camera.nearClip);
var end = entity.camera.screenToWorld(clickX, clickY, entity.camera.farClip);
// Use the ray coordinates to perform a raycast
app.systems.rigidbody.raycastFirst(start, end, function (result) {
console.log("Entity " + result.entity.name + " was selected");
});</code></pre>
<h4>Parameters</h4>
<table>
<tr>
<td>screenx</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>X coordinate on PlayCanvas' canvas element.</p></td>
</tr>
<tr>
<td>screeny</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>Y coordinate on PlayCanvas' canvas element.</p></td>
</tr>
<tr>
<td>cameraz</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The distance from the camera in world space to create the new point.</p></td>
</tr>
<tr>
<td>worldCoord</td><td><a href="pc.Vec3.html">pc.Vec3</a></td><td><p>3D vector to receive world coordinate result.</p></td>
</tr>
</table>
<h4>Returns</h4>
<a href="pc.Vec3.html">pc.Vec3</a> <p>The world space coordinate.</p>
</div>
<div id="startXr">
<h3 class="methodname">startXr(type, spaceType, [callback]) <a class="font-icon" href="#startXr"></a></h3>
<p><p>Attempt to start XR session with this camera</p></p>
<pre><code class="javascript">// On an entity with a camera component
this.entity.camera.startXr(pc.XRTYPE_VR, pc.XRSPACE_LOCAL, function (err) {
if (err) {
// failed to start XR session
} else {
// in XR
}
});</code></pre>
<h4>Parameters</h4>
<table>
<tr>
<td>type</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></td><td><p>The type of session. Can be one of the following:</p>
<ul>
<li><a href="pc.html#XRTYPE_INLINE">pc.XRTYPE_INLINE</a>: Inline - always available type of session. It has limited feature availability and is rendered into HTML element.</li>
<li><a href="pc.html#XRTYPE_VR">pc.XRTYPE_VR</a>: Immersive VR - session that provides exclusive access to the VR device with the best available tracking features.</li>
<li><a href="pc.html#XRTYPE_AR">pc.XRTYPE_AR</a>: Immersive AR - session that provides exclusive access to the VR/AR device that is intended to be blended with the real-world environment.</li>
</ul></td>
</tr>
<tr>
<td>spaceType</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></td><td><p>reference space type. Can be one of the following:</p>
<ul>
<li><a href="pc.html#XRSPACE_VIEWER">pc.XRSPACE_VIEWER</a>: Viewer - always supported space with some basic tracking capabilities.</li>
<li><a href="pc.html#XRSPACE_LOCAL">pc.XRSPACE_LOCAL</a>: Local - represents a tracking space with a native origin near the viewer at the time of creation. It is meant for seated or basic local XR sessions.</li>
<li><a href="pc.html#XRSPACE_LOCALFLOOR">pc.XRSPACE_LOCALFLOOR</a>: Local Floor - represents a tracking space with a native origin at the floor in a safe position for the user to stand. The y axis equals 0 at floor level. Floor level value might be estimated by the underlying platform. It is meant for seated or basic local XR sessions.</li>
<li><a href="pc.html#XRSPACE_BOUNDEDFLOOR">pc.XRSPACE_BOUNDEDFLOOR</a>: Bounded Floor - represents a tracking space with its native origin at the floor, where the user is expected to move within a pre-established boundary.</li>
<li><a href="pc.html#XRSPACE_UNBOUNDED">pc.XRSPACE_UNBOUNDED</a>: Unbounded - represents a tracking space where the user is expected to move freely around their environment, potentially long distances from their starting point.</li>
</ul></td>
</tr>
<tr>
<td>callback</td><td><a href="pc.callbacks.html#XrError">pc.callbacks.XrError</a></td><td><p>Optional callback function called once the session is started. The callback has one argument Error - it is null if the XR session started successfully.</p></td>
</tr>
</table>
</div>
<div id="worldToScreen">
<h3 class="methodname">worldToScreen(worldCoord, [screenCoord]) <a class="font-icon" href="#worldToScreen"></a></h3>
<p><p>Convert a point from 3D world space to 2D screen space.</p></p>
<h4>Parameters</h4>
<table>
<tr>
<td>worldCoord</td><td><a href="pc.Vec3.html">pc.Vec3</a></td><td><p>The world space coordinate.</p></td>
</tr>
<tr>
<td>screenCoord</td><td><a href="pc.Vec3.html">pc.Vec3</a></td><td><p>3D vector to receive screen coordinate result.</p></td>
</tr>
</table>
<h4>Returns</h4>
<a href="pc.Vec3.html">pc.Vec3</a> <p>The screen space coordinate.</p>
</div>
<!--events-->
<h2>Inherited</h2>
<!--inherited properties-->
<h2>Properties</h2>
<div id="system">
<span class="property"><a href="pc.ComponentSystem.html">pc.ComponentSystem</a></span><span class="property">system <a class="font-icon" href="#system"></a></span>
<p><p>The ComponentSystem used to create this Component.</p></p>
</div>
<div id="entity">
<span class="property"><a href="pc.Entity.html">pc.Entity</a></span><span class="property">entity <a class="font-icon" href="#entity"></a></span>
<p><p>The Entity that this Component is attached to.</p></p>
</div>
<div id="enabled">
<span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span><span class="property">enabled <a class="font-icon" href="#enabled"></a></span>
<p><p>Enables or disables the component.</p></p>
</div>
<!--inherited methods-->
<h2>Methods</h2>
<div id="fire">
<h3 class="methodname">fire(name, [arg1], [arg2], [arg3], [arg4], [arg5], [arg6], [arg7], [arg8]) <a class="font-icon" href="#fire"></a></h3>
<p><p>Fire an event, all additional arguments are passed on to the event listener.</p></p>
<pre><code class="javascript">obj.fire('test', 'This is the message');</code></pre>
<h4>Parameters</h4>
<table>
<tr>
<td>name</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></td><td><p>Name of event to fire.</p></td>
</tr>
<tr>
<td>arg1</td><td><a href="#">*</a></td><td><p>First argument that is passed to the event handler.</p></td>
</tr>
<tr>
<td>arg2</td><td><a href="#">*</a></td><td><p>Second argument that is passed to the event handler.</p></td>
</tr>
<tr>
<td>arg3</td><td><a href="#">*</a></td><td><p>Third argument that is passed to the event handler.</p></td>
</tr>
<tr>
<td>arg4</td><td><a href="#">*</a></td><td><p>Fourth argument that is passed to the event handler.</p></td>
</tr>
<tr>
<td>arg5</td><td><a href="#">*</a></td><td><p>Fifth argument that is passed to the event handler.</p></td>
</tr>
<tr>
<td>arg6</td><td><a href="#">*</a></td><td><p>Sixth argument that is passed to the event handler.</p></td>
</tr>
<tr>
<td>arg7</td><td><a href="#">*</a></td><td><p>Seventh argument that is passed to the event handler.</p></td>
</tr>
<tr>
<td>arg8</td><td><a href="#">*</a></td><td><p>Eighth argument that is passed to the event handler.</p></td>
</tr>
</table>
<h4>Returns</h4>
<a href="pc.EventHandler.html">pc.EventHandler</a> <p>Self for chaining.</p>
</div>
<div id="hasEvent">
<h3 class="methodname">hasEvent(name) <a class="font-icon" href="#hasEvent"></a></h3>
<p><p>Test if there are any handlers bound to an event name.</p></p>
<pre><code class="javascript">obj.on('test', function () { }); // bind an event to 'test'
obj.hasEvent('test'); // returns true
obj.hasEvent('hello'); // returns false</code></pre>
<h4>Parameters</h4>
<table>
<tr>
<td>name</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></td><td><p>The name of the event to test.</p></td>
</tr>
</table>
<h4>Returns</h4>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a> <p>True if the object has handlers bound to the specified event name.</p>
</div>
<div id="off">
<h3 class="methodname">off([name], [callback], [scope]) <a class="font-icon" href="#off"></a></h3>
<p><p>Detach an event handler from an event. If callback is not provided then all callbacks are unbound from the event,
if scope is not provided then all events with the callback will be unbound.</p></p>
<pre><code class="javascript">var handler = function () {
};
obj.on('test', handler);
obj.off(); // Removes all events
obj.off('test'); // Removes all events called 'test'
obj.off('test', handler); // Removes all handler functions, called 'test'
obj.off('test', handler, this); // Removes all hander functions, called 'test' with scope this</code></pre>
<h4>Parameters</h4>
<table>
<tr>
<td>name</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></td><td><p>Name of the event to unbind.</p></td>
</tr>
<tr>
<td>callback</td><td><a href="pc.callbacks.html#HandleEvent">pc.callbacks.HandleEvent</a></td><td><p>Function to be unbound.</p></td>
</tr>
<tr>
<td>scope</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></td><td><p>Scope that was used as the this when the event is fired.</p></td>
</tr>
</table>
<h4>Returns</h4>
<a href="pc.EventHandler.html">pc.EventHandler</a> <p>Self for chaining.</p>
</div>
<div id="on">
<h3 class="methodname">on(name, callback, [scope]) <a class="font-icon" href="#on"></a></h3>
<p><p>Attach an event handler to an event.</p></p>
<pre><code class="javascript">obj.on('test', function (a, b) {
console.log(a + b);
});
obj.fire('test', 1, 2); // prints 3 to the console</code></pre>
<h4>Parameters</h4>
<table>
<tr>
<td>name</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></td><td><p>Name of the event to bind the callback to.</p></td>
</tr>
<tr>
<td>callback</td><td><a href="pc.callbacks.html#HandleEvent">pc.callbacks.HandleEvent</a></td><td><p>Function that is called when e