@aidinabedi/playcanvas

<!doctype html> <html lang="en"> <head> <title>pc.LightComponent | 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.LightComponent</h1> <p class="extends">Extends: <a href="pc.Component.html">pc.Component</a></p> <p><p>The Light Component enables the Entity to light the scene. There are three types of light: directional, point and spot. Directional lights are global in that they are considered to be infinitely far away and light the entire scene. Point and spot lights are local in that they have a position and a range. A spot light is a specialization of a point light where light is emitted in a cone rather than in all directions. Lights also have the ability to cast shadows to add realism to your scenes.</p></p> <pre><code class="javascript">// Add a pc.LightComponent to an entity var entity = new pc.Entity(); entity.addComponent('light', { type: "point", color: new pc.Color(1, 0, 0), range: 10 });</code></pre> <pre><code class="javascript">// Get the pc.LightComponent on an entity var lightComponent = entity.light;</code></pre> <pre><code class="javascript">// Update a property on a light component entity.light.range = 20;</code></pre>  <h1>Summary</h1>     <h3>Properties</h3> <table class="properties"> <tr> <td><a href="#affectDynamic">affectDynamic</a></td><td><p>If enabled the light will affect non-lightmapped objects</p></td> </tr> <tr> <td><a href="#affectLightmapped">affectLightmapped</a></td><td><p>If enabled the light will affect lightmapped objects</p></td> </tr> <tr> <td><a href="#bake">bake</a></td><td><p>If enabled the light will be rendered into lightmaps</p></td> </tr> <tr> <td><a href="#bakeDir">bakeDir</a></td><td><p>If enabled and bake=true, the light's direction will contribute to directional lightmaps.</td> </tr> <tr> <td><a href="#castShadows">castShadows</a></td><td><p>If enabled the light will cast shadows.</td> </tr> <tr> <td><a href="#color">color</a></td><td><p>The Color of the light.</td> </tr> <tr> <td><a href="#cookie">cookie</a></td><td><p>Projection texture.</td> </tr> <tr> <td><a href="#cookieAngle">cookieAngle</a></td><td><p>Angle for spotlight cookie rotation.</td> </tr> <tr> <td><a href="#cookieAsset">cookieAsset</a></td><td><p>Asset that has texture that will be assigned to cookie internally once asset resource is available.</td> </tr> <tr> <td><a href="#cookieChannel">cookieChannel</a></td><td><p>Color channels of the projection texture to use.</td> </tr> <tr> <td><a href="#cookieFalloff">cookieFalloff</a></td><td><p>Toggle normal spotlight falloff when projection texture is used.</td> </tr> <tr> <td><a href="#cookieIntensity">cookieIntensity</a></td><td><p>Projection texture intensity (default is 1).</td> </tr> <tr> <td><a href="#cookieOffset">cookieOffset</a></td><td><p>Spotlight cookie position offset.</td> </tr> <tr> <td><a href="#cookieScale">cookieScale</a></td><td><p>Spotlight cookie scale.</td> </tr> <tr> <td><a href="#falloffMode">falloffMode</a></td><td><p>Controls the rate at which a light attentuates from its position.</td> </tr> <tr> <td><a href="#innerConeAngle">innerConeAngle</a></td><td><p>The angle at which the spotlight cone starts to fade off.</td> </tr> <tr> <td><a href="#intensity">intensity</a></td><td><p>The brightness of the light.</td> </tr> <tr> <td><a href="#isStatic">isStatic</a></td><td><p>Mark light as non-movable (optimization)</p></td> </tr> <tr> <td><a href="#layers">layers</a></td><td><p>An array of layer IDs (pc.Layer#id) to which this light should belong.</td> </tr> <tr> <td><a href="#mask">mask</a></td><td><p>Defines a mask to determine which <a href="pc.MeshInstance.html">pc.MeshInstance</a>s are lit by this light.</td> </tr> <tr> <td><a href="#normalOffsetBias">normalOffsetBias</a></td><td><p>Normal offset depth bias.</td> </tr> <tr> <td><a href="#outerConeAngle">outerConeAngle</a></td><td><p>The angle at which the spotlight cone has faded to nothing.</td> </tr> <tr> <td><a href="#range">range</a></td><td><p>The range of the light.</td> </tr> <tr> <td><a href="#shadowBias">shadowBias</a></td><td><p>The depth bias for tuning the appearance of the shadow mapping generated by this light.</td> </tr> <tr> <td><a href="#shadowDistance">shadowDistance</a></td><td><p>The distance from the viewpoint beyond which shadows are no longer rendered.</td> </tr> <tr> <td><a href="#shadowResolution">shadowResolution</a></td><td><p>The size of the texture used for the shadow map.</td> </tr> <tr> <td><a href="#shadowType">shadowType</a></td><td><p>Type of shadows being rendered by this light.</td> </tr> <tr> <td><a href="#shadowUpdateMode">shadowUpdateMode</a></td><td><p>Tells the renderer how often shadows must be updated for this light.</td> </tr> <tr> <td><a href="#type">type</a></td><td><p>The type of light.</td> </tr> <tr> <td><a href="#vsmBlurMode">vsmBlurMode</a></td><td><p>Blurring mode for variance shadow maps:</p> <ul> <li><a href="pc.html#BLUR_BOX">pc.BLUR_BOX</a>: Box filter.</td> </tr> <tr> <td><a href="#vsmBlurSize">vsmBlurSize</a></td><td><p>Number of samples used for blurring a variance shadow map.</td> </tr> </table>   <h2>Inherited</h2>   <h3>Properties</h3> <table class="properties"> <tr> <td><a href="#enabled">enabled</a></td><td><p>Enables or disables the 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="#system">system</a></td><td><p>The ComponentSystem used to create this Component.</td> </tr> </table>  <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>  <h1>Details</h1>    <h2>Constructor</h2>  <div id="LightComponent"> <h3 class="methodname">LightComponent(system, entity) <a class="font-icon" href="#LightComponent"></a></h3> <p><p>Creates a new Light Component.</p></p> <pre><code class="javascript">// Add a pc.LightComponent to an entity var entity = new pc.Entity(); entity.addComponent('light', { type: "point", color: new pc.Color(1, 0, 0), range: 10 });</code></pre> <pre><code class="javascript">// Get the pc.LightComponent on an entity var lightComponent = entity.light;</code></pre> <pre><code class="javascript">// Update a property on a light component entity.light.range = 20;</code></pre> <h4>Parameters</h4> <table> <tr> <td>system</td><td><a href="pc.LightComponentSystem.html">pc.LightComponentSystem</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>  <h2>Properties</h2> <div id="affectDynamic"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span><span class="property">affectDynamic <a class="font-icon" href="#affectDynamic"></a></span> <p><p>If enabled the light will affect non-lightmapped objects</p></p> </div> <div id="affectLightmapped"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span><span class="property">affectLightmapped <a class="font-icon" href="#affectLightmapped"></a></span> <p><p>If enabled the light will affect lightmapped objects</p></p> </div> <div id="bake"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span><span class="property">bake <a class="font-icon" href="#bake"></a></span> <p><p>If enabled the light will be rendered into lightmaps</p></p> </div> <div id="bakeDir"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span><span class="property">bakeDir <a class="font-icon" href="#bakeDir"></a></span> <p><p>If enabled and bake=true, the light's direction will contribute to directional lightmaps. Be aware, that directional lightmap is an approximation and can only hold single direction per pixel. Intersecting multiple lights with bakeDir=true may lead to incorrect look of specular/bump-mapping in the area of intersection. The error is not always visible though, and highly scene-dependent.</p></p> </div> <div id="castShadows"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span><span class="property">castShadows <a class="font-icon" href="#castShadows"></a></span> <p><p>If enabled the light will cast shadows. Defaults to false.</p></p> </div> <div id="color"> <span class="property"><a href="pc.Color.html">pc.Color</a></span><span class="property">color <a class="font-icon" href="#color"></a></span> <p><p>The Color of the light. The alpha component of the color is ignored. Defaults to white (1, 1, 1).</p></p> </div> <div id="cookie"> <span class="property"><a href="pc.Texture.html">pc.Texture</a></span><span class="property">cookie <a class="font-icon" href="#cookie"></a></span> <p><p>Projection texture. Must be 2D for spot and cubemap for point (ignored if incorrect type is used).</p></p> </div> <div id="cookieAngle"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">cookieAngle <a class="font-icon" href="#cookieAngle"></a></span> <p><p>Angle for spotlight cookie rotation.</p></p> </div> <div id="cookieAsset"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">cookieAsset <a class="font-icon" href="#cookieAsset"></a></span> <p><p>Asset that has texture that will be assigned to cookie internally once asset resource is available.</p></p> </div> <div id="cookieChannel"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span><span class="property">cookieChannel <a class="font-icon" href="#cookieChannel"></a></span> <p><p>Color channels of the projection texture to use. Can be "r", "g", "b", "a", "rgb" or any swizzled combination.</p></p> </div> <div id="cookieFalloff"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span><span class="property">cookieFalloff <a class="font-icon" href="#cookieFalloff"></a></span> <p><p>Toggle normal spotlight falloff when projection texture is used. When set to false, spotlight will work like a pure texture projector (only fading with distance). Default is false.</p></p> </div> <div id="cookieIntensity"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">cookieIntensity <a class="font-icon" href="#cookieIntensity"></a></span> <p><p>Projection texture intensity (default is 1).</p></p> </div> <div id="cookieOffset"> <span class="property"><a href="pc.Vec2.html">pc.Vec2</a></span><span class="property">cookieOffset <a class="font-icon" href="#cookieOffset"></a></span> <p><p>Spotlight cookie position offset.</p></p> </div> <div id="cookieScale"> <span class="property"><a href="pc.Vec2.html">pc.Vec2</a></span><span class="property">cookieScale <a class="font-icon" href="#cookieScale"></a></span> <p><p>Spotlight cookie scale.</p></p> </div> <div id="falloffMode"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">falloffMode <a class="font-icon" href="#falloffMode"></a></span> <p><p>Controls the rate at which a light attentuates from its position. Can be:</p> <ul> <li><a href="pc.html#LIGHTFALLOFF_LINEAR">pc.LIGHTFALLOFF_LINEAR</a>: Linear.</li> <li><a href="pc.html#LIGHTFALLOFF_INVERSESQUARED">pc.LIGHTFALLOFF_INVERSESQUARED</a>: Inverse squared. Affects point and spot lights only. Defaults to pc.LIGHTFALLOFF_LINEAR.</li> </ul></p> </div> <div id="innerConeAngle"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">innerConeAngle <a class="font-icon" href="#innerConeAngle"></a></span> <p><p>The angle at which the spotlight cone starts to fade off. The angle is specified in degrees. Affects spot lights only. Defaults to 40.</p></p> </div> <div id="intensity"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">intensity <a class="font-icon" href="#intensity"></a></span> <p><p>The brightness of the light. Defaults to 1.</p></p> </div> <div id="isStatic"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span><span class="property">isStatic <a class="font-icon" href="#isStatic"></a></span> <p><p>Mark light as non-movable (optimization)</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 light 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="mask"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">mask <a class="font-icon" href="#mask"></a></span> <p><p>Defines a mask to determine which <a href="pc.MeshInstance.html">pc.MeshInstance</a>s are lit by this light. Defaults to 1.</p></p> </div> <div id="normalOffsetBias"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">normalOffsetBias <a class="font-icon" href="#normalOffsetBias"></a></span> <p><p>Normal offset depth bias. Defaults to 0.</p></p> </div> <div id="outerConeAngle"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">outerConeAngle <a class="font-icon" href="#outerConeAngle"></a></span> <p><p>The angle at which the spotlight cone has faded to nothing. The angle is specified in degrees. Affects spot lights only. Defaults to 45.</p></p> </div> <div id="range"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">range <a class="font-icon" href="#range"></a></span> <p><p>The range of the light. Affects point and spot lights only. Defaults to 10.</p></p> </div> <div id="shadowBias"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">shadowBias <a class="font-icon" href="#shadowBias"></a></span> <p><p>The depth bias for tuning the appearance of the shadow mapping generated by this light. Defaults to 0.05.</p></p> </div> <div id="shadowDistance"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">shadowDistance <a class="font-icon" href="#shadowDistance"></a></span> <p><p>The distance from the viewpoint beyond which shadows are no longer rendered. Affects directional lights only. Defaults to 40.</p></p> </div> <div id="shadowResolution"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">shadowResolution <a class="font-icon" href="#shadowResolution"></a></span> <p><p>The size of the texture used for the shadow map. Valid sizes are 64, 128, 256, 512, 1024, 2048. Defaults to 1024.</p></p> </div> <div id="shadowType"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">shadowType <a class="font-icon" href="#shadowType"></a></span> <p><p>Type of shadows being rendered by this light. Options:</p> <ul> <li><a href="pc.html#SHADOW_PCF3">pc.SHADOW_PCF3</a>: Render depth (color-packed on WebGL 1.0), can be used for PCF 3x3 sampling.</li> <li><a href="pc.html#SHADOW_VSM8">pc.SHADOW_VSM8</a>: Render packed variance shadow map. All shadow receivers must also cast shadows for this mode to work correctly.</li> <li><a href="pc.html#SHADOW_VSM16">pc.SHADOW_VSM16</a>: Render 16-bit exponential variance shadow map. Requires OES_texture_half_float extension. Falls back to pc.SHADOW_VSM8, if not supported.</li> <li><a href="pc.html#SHADOW_VSM32">pc.SHADOW_VSM32</a>: Render 32-bit exponential variance shadow map. Requires OES_texture_float extension. Falls back to pc.SHADOW_VSM16, if not supported.</li> <li><a href="pc.html#SHADOW_PCF5">pc.SHADOW_PCF5</a>: Render depth buffer only, can be used for hardware-accelerated PCF 5x5 sampling. Requires WebGL2. Falls back to pc.SHADOW_PCF3 on WebGL 1.0.</li> </ul></p> </div> <div id="shadowUpdateMode"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">shadowUpdateMode <a class="font-icon" href="#shadowUpdateMode"></a></span> <p><p>Tells the renderer how often shadows must be updated for this light. Options:</p> <ul> <li><a href="pc.html#SHADOWUPDATE_NONE">pc.SHADOWUPDATE_NONE</a>: Don't render shadows.</li> <li><a href="pc.html#SHADOWUPDATE_THISFRAME">pc.SHADOWUPDATE_THISFRAME</a>: Render shadows only once (then automatically switches to pc.SHADOWUPDATE_NONE).</li> <li><a href="pc.html#SHADOWUPDATE_REALTIME">pc.SHADOWUPDATE_REALTIME</a>: Render shadows every frame (default).</li> </ul></p> </div> <div id="type"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span><span class="property">type <a class="font-icon" href="#type"></a></span> <p><p>The type of light. Can be:</p> <ul> <li>"directional": A light that is infinitely far away and lights the entire scene from one direction.</li> <li>"point": A light that illuminates in all directions from a point.</li> <li>"spot": A light that illuminates in all directions from a point and is bounded by a cone. Defaults to "directional".</li> </ul></p> </div> <div id="vsmBlurMode"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">vsmBlurMode <a class="font-icon" href="#vsmBlurMode"></a></span> <p><p>Blurring mode for variance shadow maps:</p> <ul> <li><a href="pc.html#BLUR_BOX">pc.BLUR_BOX</a>: Box filter.</li> <li><a href="pc.html#BLUR_GAUSSIAN">pc.BLUR_GAUSSIAN</a>: Gaussian filter. May look smoother than box, but requires more samples.</li> </ul></p> </div> <div id="vsmBlurSize"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">vsmBlurSize <a class="font-icon" href="#vsmBlurSize"></a></span> <p><p>Number of samples used for blurring a variance shadow map. Only uneven numbers work, even are incremented. Minimum value is 1, maximum is 25.</p></p> </div>   <h2>Inherited</h2>  <h2>Properties</h2> <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> <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="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>  <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 event is fired. Note the callback is limited to 8 arguments.</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>Object to use as 'this' when the event is fired, defaults to current this.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.EventHandler.html">pc.EventHandler</a> <p>Self for chaining.</p> </div> <div id="once"> <h3 class="methodname">once(name, callback, [scope]) <a class="font-icon" href="#once"></a></h3> <p><p>Attach an event handler to an event. This handler will be removed after being fired once.</p></p> <pre><code class="javascript">obj.once('test', function (a, b) { console.log(a + b); }); obj.fire('test', 1, 2); // prints 3 to the console obj.fire('test', 1, 2); // not going to get handled</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 event is fired. Note the callback is limited to 8 arguments.</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>Object to use as 'this' when the event is fired, defaults to current this.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.EventHandler.html">pc.EventHandler</a> <p>Self for chaining.</p> </div>  </main> </div> </body> </html>