@aidinabedi/playcanvas

<!doctype html> <html lang="en"> <head> <title>pc.Quat | 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.Quat</h1> <p><p>A quaternion.</p></p>  <h1>Summary</h1>   <h3>Static Properties</h3> <table class="properties"> <tr> <td><a href="#IDENTITY">IDENTITY</a></td><td><p>A constant quaternion set to [0, 0, 0, 1] (the identity).<span class='readonly'>[read only]</span></td> </tr> <tr> <td><a href="#ZERO">ZERO</a></td><td><p>A constant quaternion set to [0, 0, 0, 0].<span class='readonly'>[read only]</span></td> </tr> </table>   <h3>Properties</h3> <table class="properties"> <tr> <td><a href="#w">w</a></td><td><p>The w component of the quaternion.</td> </tr> <tr> <td><a href="#x">x</a></td><td><p>The x component of the quaternion.</td> </tr> <tr> <td><a href="#y">y</a></td><td><p>The y component of the quaternion.</td> </tr> <tr> <td><a href="#z">z</a></td><td><p>The z component of the quaternion.</td> </tr> </table>  <h3>Methods</h3> <table class="properties"> <tr> <td><a href="#clone">clone</a></td><td><p>Returns an identical copy of the specified quaternion.</td> </tr> <tr> <td><a href="#copy">copy</a></td><td><p>Copies the contents of a source quaternion to a destination quaternion.</td> </tr> <tr> <td><a href="#equals">equals</a></td><td><p>Reports whether two quaternions are equal.</td> </tr> <tr> <td><a href="#getAxisAngle">getAxisAngle</a></td><td><p>Gets the rotation axis and angle for a given quaternion.</td> </tr> <tr> <td><a href="#getEulerAngles">getEulerAngles</a></td><td><p>Converts the supplied quaternion to Euler angles.</td> </tr> <tr> <td><a href="#invert">invert</a></td><td><p>Generates the inverse of the specified quaternion.</td> </tr> <tr> <td><a href="#length">length</a></td><td><p>Returns the magnitude of the specified quaternion.</td> </tr> <tr> <td><a href="#lengthSq">lengthSq</a></td><td><p>Returns the magnitude squared of the specified quaternion.</td> </tr> <tr> <td><a href="#mul">mul</a></td><td><p>Returns the result of multiplying the specified quaternions together.</td> </tr> <tr> <td><a href="#mul2">mul2</a></td><td><p>Returns the result of multiplying the specified quaternions together.</td> </tr> <tr> <td><a href="#normalize">normalize</a></td><td><p>Returns the specified quaternion converted in place to a unit quaternion.</td> </tr> <tr> <td><a href="#set">set</a></td><td><p>Sets the specified quaternion to the supplied numerical values.</td> </tr> <tr> <td><a href="#setFromAxisAngle">setFromAxisAngle</a></td><td><p>Sets a quaternion from an angular rotation around an axis.</td> </tr> <tr> <td><a href="#setFromEulerAngles">setFromEulerAngles</a></td><td><p>Sets a quaternion from Euler angles specified in XYZ order.</td> </tr> <tr> <td><a href="#setFromMat4">setFromMat4</a></td><td><p>Converts the specified 4x4 matrix to a quaternion.</td> </tr> <tr> <td><a href="#slerp">slerp</a></td><td><p>Performs a spherical interpolation between two quaternions.</td> </tr> <tr> <td><a href="#toString">toString</a></td><td><p>Converts the quaternion to string form.</td> </tr> <tr> <td><a href="#transformVector">transformVector</a></td><td><p>Transforms a 3-dimensional vector by the specified quaternion.</td> </tr> </table>  <h1>Details</h1>   <h2>Static Properties</h2> <table class="members"> <tr> <td id="IDENTITY">IDENTITY</td><td><p>A constant quaternion set to [0, 0, 0, 1] (the identity).</p><span class='readonly'>[read only]</span></td> </tr> <tr> <td id="ZERO">ZERO</td><td><p>A constant quaternion set to [0, 0, 0, 0].</p><span class='readonly'>[read only]</span></td> </tr> </table>  <h2>Constructor</h2>  <div id="Quat"> <h3 class="methodname">Quat([x], [y], [z], [w]) <a class="font-icon" href="#Quat"></a></h3> <p><p>Create a new Quat object.</p></p> <h4>Parameters</h4> <table> <tr> <td>x</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number[]</a></td><td><p>The quaternion's x component. Default value 0. If x is an array of length 4, the array will be used to populate all components.</p></td> </tr> <tr> <td>y</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The quaternion's y component. Default value 0.</p></td> </tr> <tr> <td>z</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The quaternion's z component. Default value 0.</p></td> </tr> <tr> <td>w</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The quaternion's w component. Default value 1.</p></td> </tr> </table> </div>  <h2>Properties</h2> <div id="w"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">w <a class="font-icon" href="#w"></a></span> <p><p>The w component of the quaternion.</p></p> <pre><code class="javascript">var quat = new pc.Quat(); // Get w var w = quat.w; // Set w quat.w = 0;</code></pre> </div> <div id="x"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">x <a class="font-icon" href="#x"></a></span> <p><p>The x component of the quaternion.</p></p> <pre><code class="javascript">var quat = new pc.Quat(); // Get x var x = quat.x; // Set x quat.x = 0;</code></pre> </div> <div id="y"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">y <a class="font-icon" href="#y"></a></span> <p><p>The y component of the quaternion.</p></p> <pre><code class="javascript">var quat = new pc.Quat(); // Get y var y = quat.y; // Set y quat.y = 0;</code></pre> </div> <div id="z"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">z <a class="font-icon" href="#z"></a></span> <p><p>The z component of the quaternion.</p></p> <pre><code class="javascript">var quat = new pc.Quat(); // Get z var z = quat.z; // Set z quat.z = 0;</code></pre> </div>  <h2>Methods</h2> <div id="clone"> <h3 class="methodname">clone() <a class="font-icon" href="#clone"></a></h3> <p><p>Returns an identical copy of the specified quaternion.</p></p> <pre><code class="javascript">var q = new pc.Quat(-0.11, -0.15, -0.46, 0.87); var qclone = q.clone(); console.log("The result of the cloning is: " + q.toString());</code></pre> <h4>Returns</h4> <a href="pc.Quat.html">pc.Quat</a> <p>A quaternion containing the result of the cloning.</p> </div> <div id="copy"> <h3 class="methodname">copy(rhs) <a class="font-icon" href="#copy"></a></h3> <p><p>Copies the contents of a source quaternion to a destination quaternion.</p></p> <pre><code class="javascript">var src = new pc.Quat(); var dst = new pc.Quat(); dst.copy(src, src); console.log("The two quaternions are " + (src.equals(dst) ? "equal" : "different"));</code></pre> <h4>Parameters</h4> <table> <tr> <td>rhs</td><td><a href="pc.Quat.html">pc.Quat</a></td><td><p>The quaternion to be copied.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Quat.html">pc.Quat</a> <p>Self for chaining.</p> </div> <div id="equals"> <h3 class="methodname">equals(rhs) <a class="font-icon" href="#equals"></a></h3> <p><p>Reports whether two quaternions are equal.</p></p> <pre><code class="javascript">var a = new pc.Quat(); var b = new pc.Quat(); console.log("The two quaternions are " + (a.equals(b) ? "equal" : "different"));</code></pre> <h4>Parameters</h4> <table> <tr> <td>rhs</td><td><a href="pc.Quat.html">pc.Quat</a></td><td><p>The quaternion to be compared against.</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 quaternions are equal and false otherwise.</p> </div> <div id="getAxisAngle"> <h3 class="methodname">getAxisAngle(axis) <a class="font-icon" href="#getAxisAngle"></a></h3> <p><p>Gets the rotation axis and angle for a given quaternion. If a quaternion is created with setFromAxisAngle, this method will return the same values as provided in the original parameter list OR functionally equivalent values.</p></p> <pre><code class="javascript">var q = new pc.Quat(); q.setFromAxisAngle(new pc.Vec3(0, 1, 0), 90); var v = new pc.Vec3(); var angle = q.getAxisAngle(v); // Should output 90 console.log(angle); // Should output [0, 1, 0] console.log(v.toString());</code></pre> <h4>Parameters</h4> <table> <tr> <td>axis</td><td><a href="pc.Vec3.html">pc.Vec3</a></td><td><p>The 3-dimensional vector to receive the axis of rotation.</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>Angle, in degrees, of the rotation.</p> </div> <div id="getEulerAngles"> <h3 class="methodname">getEulerAngles([eulers]) <a class="font-icon" href="#getEulerAngles"></a></h3> <p><p>Converts the supplied quaternion to Euler angles.</p></p> <h4>Parameters</h4> <table> <tr> <td>eulers</td><td><a href="pc.Vec3.html">pc.Vec3</a></td><td><p>The 3-dimensional vector to receive the Euler angles.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Vec3.html">pc.Vec3</a> <p>The 3-dimensional vector holding the Euler angles that correspond to the supplied quaternion.</p> </div> <div id="invert"> <h3 class="methodname">invert() <a class="font-icon" href="#invert"></a></h3> <p><p>Generates the inverse of the specified quaternion.</p></p> <pre><code class="javascript">// Create a quaternion rotated 180 degrees around the y-axis var rot = new pc.Quat().setFromEulerAngles(0, 180, 0); // Invert in place rot.invert();</code></pre> <h4>Returns</h4> <a href="pc.Quat.html">pc.Quat</a> <p>Self for chaining.</p> </div> <div id="length"> <h3 class="methodname">length() <a class="font-icon" href="#length"></a></h3> <p><p>Returns the magnitude of the specified quaternion.</p></p> <pre><code class="javascript">var q = new pc.Quat(0, 0, 0, 5); var len = q.length(); // Should output 5 console.log("The length of the quaternion is: " + len);</code></pre> <h4>Returns</h4> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> <p>The magnitude of the specified quaternion.</p> </div> <div id="lengthSq"> <h3 class="methodname">lengthSq() <a class="font-icon" href="#lengthSq"></a></h3> <p><p>Returns the magnitude squared of the specified quaternion.</p></p> <pre><code class="javascript">var q = new pc.Quat(3, 4, 0); var lenSq = q.lengthSq(); // Should output 25 console.log("The length squared of the quaternion is: " + lenSq);</code></pre> <h4>Returns</h4> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> <p>The magnitude of the specified quaternion.</p> </div> <div id="mul"> <h3 class="methodname">mul(rhs) <a class="font-icon" href="#mul"></a></h3> <p><p>Returns the result of multiplying the specified quaternions together.</p></p> <pre><code class="javascript">var a = new pc.Quat().setFromEulerAngles(0, 30, 0); var b = new pc.Quat().setFromEulerAngles(0, 60, 0); // a becomes a 90 degree rotation around the Y axis // In other words, a = a * b a.mul(b); console.log("The result of the multiplication is: " + a.toString());</code></pre> <h4>Parameters</h4> <table> <tr> <td>rhs</td><td><a href="pc.Quat.html">pc.Quat</a></td><td><p>The quaternion used as the second multiplicand of the operation.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Quat.html">pc.Quat</a> <p>Self for chaining.</p> </div> <div id="mul2"> <h3 class="methodname">mul2(lhs, rhs) <a class="font-icon" href="#mul2"></a></h3> <p><p>Returns the result of multiplying the specified quaternions together.</p></p> <pre><code class="javascript">var a = new pc.Quat().setFromEulerAngles(0, 30, 0); var b = new pc.Quat().setFromEulerAngles(0, 60, 0); var r = new pc.Quat(); // r is set to a 90 degree rotation around the Y axis // In other words, r = a * b r.mul2(a, b); console.log("The result of the multiplication is: " + r.toString());</code></pre> <h4>Parameters</h4> <table> <tr> <td>lhs</td><td><a href="pc.Quat.html">pc.Quat</a></td><td><p>The quaternion used as the first multiplicand of the operation.</p></td> </tr> <tr> <td>rhs</td><td><a href="pc.Quat.html">pc.Quat</a></td><td><p>The quaternion used as the second multiplicand of the operation.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Quat.html">pc.Quat</a> <p>Self for chaining.</p> </div> <div id="normalize"> <h3 class="methodname">normalize() <a class="font-icon" href="#normalize"></a></h3> <p><p>Returns the specified quaternion converted in place to a unit quaternion.</p></p> <pre><code class="javascript">var v = new pc.Quat(0, 0, 0, 5); v.normalize(); // Should output 0, 0, 0, 1 console.log("The result of the vector normalization is: " + v.toString());</code></pre> <h4>Returns</h4> <a href="pc.Quat.html">pc.Quat</a> <p>The result of the normalization.</p> </div> <div id="set"> <h3 class="methodname">set(x, y, z, w) <a class="font-icon" href="#set"></a></h3> <p><p>Sets the specified quaternion to the supplied numerical values.</p></p> <pre><code class="javascript">var q = new pc.Quat(); q.set(1, 0, 0, 0); // Should output 1, 0, 0, 0 console.log("The result of the vector set is: " + q.toString());</code></pre> <h4>Parameters</h4> <table> <tr> <td>x</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The x component of the quaternion.</p></td> </tr> <tr> <td>y</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The y component of the quaternion.</p></td> </tr> <tr> <td>z</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The z component of the quaternion.</p></td> </tr> <tr> <td>w</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The w component of the quaternion.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Quat.html">pc.Quat</a> <p>Self for chaining.</p> </div> <div id="setFromAxisAngle"> <h3 class="methodname">setFromAxisAngle(axis, angle) <a class="font-icon" href="#setFromAxisAngle"></a></h3> <p><p>Sets a quaternion from an angular rotation around an axis.</p></p> <pre><code class="javascript">var q = new pc.Quat(); q.setFromAxisAngle(pc.Vec3.UP, 90);</code></pre> <h4>Parameters</h4> <table> <tr> <td>axis</td><td><a href="pc.Vec3.html">pc.Vec3</a></td><td><p>World space axis around which to rotate.</p></td> </tr> <tr> <td>angle</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>Angle to rotate around the given axis in degrees.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Quat.html">pc.Quat</a> <p>Self for chaining.</p> </div> <div id="setFromEulerAngles"> <h3 class="methodname">setFromEulerAngles(ex, ey, ez) <a class="font-icon" href="#setFromEulerAngles"></a></h3> <p><p>Sets a quaternion from Euler angles specified in XYZ order.</p></p> <pre><code class="javascript">var q = new pc.Quat(); q.setFromEulerAngles(45, 90, 180);</code></pre> <h4>Parameters</h4> <table> <tr> <td>ex</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>Angle to rotate around X axis in degrees.</p></td> </tr> <tr> <td>ey</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>Angle to rotate around Y axis in degrees.</p></td> </tr> <tr> <td>ez</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>Angle to rotate around Z axis in degrees.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Quat.html">pc.Quat</a> <p>Self for chaining.</p> </div> <div id="setFromMat4"> <h3 class="methodname">setFromMat4(m) <a class="font-icon" href="#setFromMat4"></a></h3> <p><p>Converts the specified 4x4 matrix to a quaternion. Note that since a quaternion is purely a representation for orientation, only the translational part of the matrix is lost.</p></p> <pre><code class="javascript">// Create a 4x4 rotation matrix of 180 degrees around the y-axis var rot = new pc.Mat4().setFromAxisAngle(pc.Vec3.UP, 180); // Convert to a quaternion var q = new pc.Quat().setFromMat4(rot);</code></pre> <h4>Parameters</h4> <table> <tr> <td>m</td><td><a href="pc.Mat4.html">pc.Mat4</a></td><td><p>The 4x4 matrix to convert.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Quat.html">pc.Quat</a> <p>Self for chaining.</p> </div> <div id="slerp"> <h3 class="methodname">slerp(lhs, rhs, alpha) <a class="font-icon" href="#slerp"></a></h3> <p><p>Performs a spherical interpolation between two quaternions. The result of the interpolation is written to the quaternion calling the function.</p></p> <pre><code class="javascript">var q1 = new pc.Quat(-0.11, -0.15, -0.46, 0.87); var q2 = new pc.Quat(-0.21, -0.21, -0.67, 0.68); var result; result = new pc.Quat().slerp(q1, q2, 0); // Return q1 result = new pc.Quat().slerp(q1, q2, 0.5); // Return the midpoint interpolant result = new pc.Quat().slerp(q1, q2, 1); // Return q2</code></pre> <h4>Parameters</h4> <table> <tr> <td>lhs</td><td><a href="pc.Quat.html">pc.Quat</a></td><td><p>The quaternion to interpolate from.</p></td> </tr> <tr> <td>rhs</td><td><a href="pc.Quat.html">pc.Quat</a></td><td><p>The quaternion to interpolate to.</p></td> </tr> <tr> <td>alpha</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The value controlling the interpolation in relation to the two input quaternions. The value is in the range 0 to 1, 0 generating q1, 1 generating q2 and anything in between generating a spherical interpolation between the two.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Quat.html">pc.Quat</a> <p>Self for chaining.</p> </div> <div id="toString"> <h3 class="methodname">toString() <a class="font-icon" href="#toString"></a></h3> <p><p>Converts the quaternion to string form.</p></p> <pre><code class="javascript">var v = new pc.Quat(0, 0, 0, 1); // Should output '[0, 0, 0, 1]' console.log(v.toString());</code></pre> <h4>Returns</h4> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> <p>The quaternion in string form.</p> </div> <div id="transformVector"> <h3 class="methodname">transformVector(vec, [res]) <a class="font-icon" href="#transformVector"></a></h3> <p><p>Transforms a 3-dimensional vector by the specified quaternion.</p></p> <pre><code class="javascript">// Create a 3-dimensional vector var v = new pc.Vec3(1, 2, 3); // Create a 4x4 rotation matrix var q = new pc.Quat().setFromEulerAngles(10, 20, 30); var tv = q.transformVector(v);</code></pre> <h4>Parameters</h4> <table> <tr> <td>vec</td><td><a href="pc.Vec3.html">pc.Vec3</a></td><td><p>The 3-dimensional vector to be transformed.</p></td> </tr> <tr> <td>res</td><td><a href="pc.Vec3.html">pc.Vec3</a></td><td><p>An optional 3-dimensional vector to receive the result of the transformation.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Vec3.html">pc.Vec3</a> <p>The input vector v transformed by the current instance.</p> </div>  </main> </div> </body> </html>