UNPKG

@aidinabedi/playcanvas

Version:

PlayCanvas WebGL game engine

943 lines (837 loc) 48.2 kB
<!doctype html> <html lang="en"> <head> <title>pc.Mat4 | 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">&#58195;</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.Mat4</h1> <p><p>A 4x4 matrix.</p></p> <!-- summary --> <h1>Summary</h1> <!--type definitions--> <!--static properties--> <h3>Static Properties</h3> <table class="properties"> <tr> <td><a href="#IDENTITY">IDENTITY</a></td><td><p>A constant matrix set to the identity.<span class='readonly'>[read only]</span></td> </tr> <tr> <td><a href="#ZERO">ZERO</a></td><td><p>A constant matrix with all elements set to 0.<span class='readonly'>[read only]</span></td> </tr> </table> <!--static methods--> <!--properties--> <h3>Properties</h3> <table class="properties"> <tr> <td><a href="#data">data</a></td><td><p>Matrix elements in the form of a flat array.</td> </tr> </table> <!--methods--> <h3>Methods</h3> <table class="properties"> <tr> <td><a href="#add">add</a></td><td><p>Adds the specified 4x4 matrix to the current instance.</td> </tr> <tr> <td><a href="#add2">add2</a></td><td><p>Adds the specified 4x4 matrices together and stores the result in the current instance.</td> </tr> <tr> <td><a href="#clone">clone</a></td><td><p>Creates a duplicate of the specified matrix.</td> </tr> <tr> <td><a href="#copy">copy</a></td><td><p>Copies the contents of a source 4x4 matrix to a destination 4x4 matrix.</td> </tr> <tr> <td><a href="#equals">equals</a></td><td><p>Reports whether two matrices are equal.</td> </tr> <tr> <td><a href="#getEulerAngles">getEulerAngles</a></td><td><p>Extracts the Euler angles equivalent to the rotational portion of the specified matrix.</td> </tr> <tr> <td><a href="#getScale">getScale</a></td><td><p>Extracts the scale component from the specified 4x4 matrix.</td> </tr> <tr> <td><a href="#getTranslation">getTranslation</a></td><td><p>Extracts the translational component from the specified 4x4 matrix.</td> </tr> <tr> <td><a href="#getX">getX</a></td><td><p>Extracts the x-axis from the specified 4x4 matrix.</td> </tr> <tr> <td><a href="#getY">getY</a></td><td><p>Extracts the y-axis from the specified 4x4 matrix.</td> </tr> <tr> <td><a href="#getZ">getZ</a></td><td><p>Extracts the z-axis from the specified 4x4 matrix.</td> </tr> <tr> <td><a href="#invert">invert</a></td><td><p>Sets the specified matrix to its inverse.</td> </tr> <tr> <td><a href="#isIdentity">isIdentity</a></td><td><p>Reports whether the specified matrix is the identity matrix.</td> </tr> <tr> <td><a href="#mul">mul</a></td><td><p>Multiplies the current instance by the specified 4x4 matrix.</td> </tr> <tr> <td><a href="#mul2">mul2</a></td><td><p>Multiplies the specified 4x4 matrices together and stores the result in the current instance.</td> </tr> <tr> <td><a href="#set">set</a></td><td><p>Sets matrix data from an array.</td> </tr> <tr> <td><a href="#setFromAxisAngle">setFromAxisAngle</a></td><td><p>Sets the specified matrix to a rotation matrix equivalent to a rotation around an axis.</td> </tr> <tr> <td><a href="#setFromEulerAngles">setFromEulerAngles</a></td><td><p>Sets the specified matrix to a rotation matrix defined by Euler angles.</td> </tr> <tr> <td><a href="#setIdentity">setIdentity</a></td><td><p>Sets the specified matrix to the identity matrix.</td> </tr> <tr> <td><a href="#setLookAt">setLookAt</a></td><td><p>Sets the specified matrix to a viewing matrix derived from an eye point, a target point and an up vector.</td> </tr> <tr> <td><a href="#setOrtho">setOrtho</a></td><td><p>Sets the specified matrix to an orthographic projection matrix.</td> </tr> <tr> <td><a href="#setPerspective">setPerspective</a></td><td><p>Sets the specified matrix to a perspective projection matrix.</td> </tr> <tr> <td><a href="#setTRS">setTRS</a></td><td><p>Sets the specified matrix to the concatenation of a translation, a quaternion rotation and a scale.</td> </tr> <tr> <td><a href="#toString">toString</a></td><td><p>Converts the specified matrix to string form.</td> </tr> <tr> <td><a href="#transformPoint">transformPoint</a></td><td><p>Transforms a 3-dimensional point by a 4x4 matrix.</td> </tr> <tr> <td><a href="#transformVec4">transformVec4</a></td><td><p>Transforms a 4-dimensional vector by a 4x4 matrix.</td> </tr> <tr> <td><a href="#transformVector">transformVector</a></td><td><p>Transforms a 3-dimensional vector by a 4x4 matrix.</td> </tr> <tr> <td><a href="#transpose">transpose</a></td><td><p>Sets the specified matrix to its transpose.</td> </tr> </table> <!--events--> <h1>Details</h1> <!--type definitions--> <!--static members--> <h2>Static Properties</h2> <table class="members"> <tr> <td id="IDENTITY">IDENTITY</td><td><p>A constant matrix set to the identity.</p><span class='readonly'>[read only]</span></td> </tr> <tr> <td id="ZERO">ZERO</td><td><p>A constant matrix with all elements set to 0.</p><span class='readonly'>[read only]</span></td> </tr> </table> <!--static methods--> <h2>Constructor</h2> <!-- Constructor --> <div id="Mat4"> <h3 class="methodname">Mat4() <a class="font-icon" href="#Mat4">&#58216;</a></h3> <p><p>Creates a new identity Mat4 object.</p></p> </div> <!--properties--> <h2>Properties</h2> <div id="data"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array">Float32Array</a></span><span class="property">data <a class="font-icon" href="#data">&#58216;</a></span> <p><p>Matrix elements in the form of a flat array.</p></p> </div> <!--methods--> <h2>Methods</h2> <div id="add"> <h3 class="methodname">add(rhs) <a class="font-icon" href="#add">&#58216;</a></h3> <p><p>Adds the specified 4x4 matrix to the current instance.</p></p> <pre><code class="javascript">var m = new pc.Mat4(); m.add(pc.Mat4.ONE); console.log("The result of the addition is: " + m.toString());</code></pre> <h4>Parameters</h4> <table> <tr> <td>rhs</td><td><a href="pc.Mat4.html">pc.Mat4</a></td><td><p>The 4x4 matrix used as the second operand of the addition.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Mat4.html">pc.Mat4</a> <p>Self for chaining.</p> </div> <div id="add2"> <h3 class="methodname">add2(lhs, rhs) <a class="font-icon" href="#add2">&#58216;</a></h3> <p><p>Adds the specified 4x4 matrices together and stores the result in the current instance.</p></p> <pre><code class="javascript">var m = new pc.Mat4(); m.add2(pc.Mat4.IDENTITY, pc.Mat4.ONE); console.log("The result of the addition is: " + m.toString());</code></pre> <h4>Parameters</h4> <table> <tr> <td>lhs</td><td><a href="pc.Mat4.html">pc.Mat4</a></td><td><p>The 4x4 matrix used as the first operand of the addition.</p></td> </tr> <tr> <td>rhs</td><td><a href="pc.Mat4.html">pc.Mat4</a></td><td><p>The 4x4 matrix used as the second operand of the addition.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Mat4.html">pc.Mat4</a> <p>Self for chaining.</p> </div> <div id="clone"> <h3 class="methodname">clone() <a class="font-icon" href="#clone">&#58216;</a></h3> <p><p>Creates a duplicate of the specified matrix.</p></p> <pre><code class="javascript">var src = new pc.Mat4().setFromEulerAngles(10, 20, 30); var dst = src.clone(); console.log("The two matrices are " + (src.equals(dst) ? "equal" : "different"));</code></pre> <h4>Returns</h4> <a href="pc.Mat4.html">pc.Mat4</a> <p>A duplicate matrix.</p> </div> <div id="copy"> <h3 class="methodname">copy(rhs) <a class="font-icon" href="#copy">&#58216;</a></h3> <p><p>Copies the contents of a source 4x4 matrix to a destination 4x4 matrix.</p></p> <pre><code class="javascript">var src = new pc.Mat4().setFromEulerAngles(10, 20, 30); var dst = new pc.Mat4(); dst.copy(src); console.log("The two matrices are " + (src.equals(dst) ? "equal" : "different"));</code></pre> <h4>Parameters</h4> <table> <tr> <td>rhs</td><td><a href="pc.Mat4.html">pc.Mat4</a></td><td><p>A 4x4 matrix to be copied.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Mat4.html">pc.Mat4</a> <p>Self for chaining.</p> </div> <div id="equals"> <h3 class="methodname">equals(rhs) <a class="font-icon" href="#equals">&#58216;</a></h3> <p><p>Reports whether two matrices are equal.</p></p> <pre><code class="javascript">var a = new pc.Mat4().setFromEulerAngles(10, 20, 30); var b = new pc.Mat4(); console.log("The two matrices are " + (a.equals(b) ? "equal" : "different"));</code></pre> <h4>Parameters</h4> <table> <tr> <td>rhs</td><td><a href="pc.Mat4.html">pc.Mat4</a></td><td><p>The other matrix.</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 matrices are equal and false otherwise.</p> </div> <div id="getEulerAngles"> <h3 class="methodname">getEulerAngles([eulers]) <a class="font-icon" href="#getEulerAngles">&#58216;</a></h3> <p><p>Extracts the Euler angles equivalent to the rotational portion of the specified matrix. The returned Euler angles are in XYZ order an in degrees.</p></p> <pre><code class="javascript">// Create a 4x4 rotation matrix of 45 degrees around the y-axis var m = new pc.Mat4().setFromAxisAngle(pc.Vec3.UP, 45); var eulers = m.getEulerAngles();</code></pre> <h4>Parameters</h4> <table> <tr> <td>eulers</td><td><a href="pc.Vec3.html">pc.Vec3</a></td><td><p>A 3-d vector to receive the Euler angles.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Vec3.html">pc.Vec3</a> <p>A 3-d vector containing the Euler angles.</p> </div> <div id="getScale"> <h3 class="methodname">getScale([scale]) <a class="font-icon" href="#getScale">&#58216;</a></h3> <p><p>Extracts the scale component from the specified 4x4 matrix.</p></p> <pre><code class="javascript">// Create a 4x4 scale matrix var m = new pc.Mat4().scale(2, 3, 4); // Query the scale component var scale = m.getScale();</code></pre> <h4>Parameters</h4> <table> <tr> <td>scale</td><td><a href="pc.Vec3.html">pc.Vec3</a></td><td><p>Vector to receive the scale.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Vec3.html">pc.Vec3</a> <p>The scale in X, Y and Z of the specified 4x4 matrix.</p> </div> <div id="getTranslation"> <h3 class="methodname">getTranslation([t]) <a class="font-icon" href="#getTranslation">&#58216;</a></h3> <p><p>Extracts the translational component from the specified 4x4 matrix.</p></p> <pre><code class="javascript">// Create a 4x4 matrix var m = new pc.Mat4(); // Query the z-axis component var t = new pc.Vec3(); m.getTranslation(t);</code></pre> <h4>Parameters</h4> <table> <tr> <td>t</td><td><a href="pc.Vec3.html">pc.Vec3</a></td><td><p>The vector to receive the translation of the matrix.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Vec3.html">pc.Vec3</a> <p>The translation of the specified 4x4 matrix.</p> </div> <div id="getX"> <h3 class="methodname">getX([x]) <a class="font-icon" href="#getX">&#58216;</a></h3> <p><p>Extracts the x-axis from the specified 4x4 matrix.</p></p> <pre><code class="javascript">// Create a 4x4 matrix var m = new pc.Mat4(); // Query the z-axis component var x = new pc.Vec3(); m.getX(x);</code></pre> <h4>Parameters</h4> <table> <tr> <td>x</td><td><a href="pc.Vec3.html">pc.Vec3</a></td><td><p>The vector to receive the x axis of the matrix.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Vec3.html">pc.Vec3</a> <p>The x-axis of the specified 4x4 matrix.</p> </div> <div id="getY"> <h3 class="methodname">getY([y]) <a class="font-icon" href="#getY">&#58216;</a></h3> <p><p>Extracts the y-axis from the specified 4x4 matrix.</p></p> <pre><code class="javascript">// Create a 4x4 matrix var m = new pc.Mat4(); // Query the z-axis component var y = new pc.Vec3(); m.getY(y);</code></pre> <h4>Parameters</h4> <table> <tr> <td>y</td><td><a href="pc.Vec3.html">pc.Vec3</a></td><td><p>The vector to receive the y axis of the matrix.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Vec3.html">pc.Vec3</a> <p>The y-axis of the specified 4x4 matrix.</p> </div> <div id="getZ"> <h3 class="methodname">getZ([z]) <a class="font-icon" href="#getZ">&#58216;</a></h3> <p><p>Extracts the z-axis from the specified 4x4 matrix.</p></p> <pre><code class="javascript">// Create a 4x4 matrix var m = new pc.Mat4(); // Query the z-axis component var z = new pc.Vec3(); m.getZ(z);</code></pre> <h4>Parameters</h4> <table> <tr> <td>z</td><td><a href="pc.Vec3.html">pc.Vec3</a></td><td><p>The vector to receive the z axis of the matrix.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Vec3.html">pc.Vec3</a> <p>The z-axis of the specified 4x4 matrix.</p> </div> <div id="invert"> <h3 class="methodname">invert() <a class="font-icon" href="#invert">&#58216;</a></h3> <p><p>Sets the specified matrix to its inverse.</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); // Invert in place rot.invert();</code></pre> <h4>Returns</h4> <a href="pc.Mat4.html">pc.Mat4</a> <p>Self for chaining.</p> </div> <div id="isIdentity"> <h3 class="methodname">isIdentity() <a class="font-icon" href="#isIdentity">&#58216;</a></h3> <p><p>Reports whether the specified matrix is the identity matrix.</p></p> <pre><code class="javascript">var m = new pc.Mat4(); console.log("The matrix is " + (m.isIdentity() ? "identity" : "not identity"));</code></pre> <h4>Returns</h4> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a> <p>True if the matrix is identity and false otherwise.</p> </div> <div id="mul"> <h3 class="methodname">mul(rhs) <a class="font-icon" href="#mul">&#58216;</a></h3> <p><p>Multiplies the current instance by the specified 4x4 matrix.</p></p> <pre><code class="javascript">var a = new pc.Mat4().setFromEulerAngles(10, 20, 30); var b = new pc.Mat4().setFromAxisAngle(pc.Vec3.UP, 180); // 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.Mat4.html">pc.Mat4</a></td><td><p>The 4x4 matrix used as the second multiplicand of the operation.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Mat4.html">pc.Mat4</a> <p>Self for chaining.</p> </div> <div id="mul2"> <h3 class="methodname">mul2(lhs, rhs) <a class="font-icon" href="#mul2">&#58216;</a></h3> <p><p>Multiplies the specified 4x4 matrices together and stores the result in the current instance.</p></p> <pre><code class="javascript">var a = new pc.Mat4().setFromEulerAngles(10, 20, 30); var b = new pc.Mat4().setFromAxisAngle(pc.Vec3.UP, 180); var r = new pc.Mat4(); // 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.Mat4.html">pc.Mat4</a></td><td><p>The 4x4 matrix used as the first multiplicand of the operation.</p></td> </tr> <tr> <td>rhs</td><td><a href="pc.Mat4.html">pc.Mat4</a></td><td><p>The 4x4 matrix used as the second multiplicand of the operation.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Mat4.html">pc.Mat4</a> <p>Self for chaining.</p> </div> <div id="set"> <h3 class="methodname">set(src) <a class="font-icon" href="#set">&#58216;</a></h3> <p><p>Sets matrix data from an array.</p></p> <h4>Parameters</h4> <table> <tr> <td>src</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number[]</a></td><td><p>Source array. Must have 16 values.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Mat4.html">pc.Mat4</a> <p>Self for chaining.</p> </div> <div id="setFromAxisAngle"> <h3 class="methodname">setFromAxisAngle(axis, angle) <a class="font-icon" href="#setFromAxisAngle">&#58216;</a></h3> <p><p>Sets the specified matrix to a rotation matrix equivalent to a rotation around an axis. The axis must be normalized (unit length) and the angle must be specified in degrees.</p></p> <pre><code class="javascript">// Create a 4x4 rotation matrix var rm = new pc.Mat4().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>The normalized axis vector 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>The angle of rotation in degrees.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Mat4.html">pc.Mat4</a> <p>Self for chaining.</p> </div> <div id="setFromEulerAngles"> <h3 class="methodname">setFromEulerAngles(ex, ey, ez) <a class="font-icon" href="#setFromEulerAngles">&#58216;</a></h3> <p><p>Sets the specified matrix to a rotation matrix defined by Euler angles. The Euler angles are specified in XYZ order and in degrees.</p></p> <pre><code class="javascript">var m = new pc.Mat4(); m.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.Mat4.html">pc.Mat4</a> <p>Self for chaining.</p> </div> <div id="setIdentity"> <h3 class="methodname">setIdentity() <a class="font-icon" href="#setIdentity">&#58216;</a></h3> <p><p>Sets the specified matrix to the identity matrix.</p></p> <pre><code class="javascript">m.setIdentity(); console.log("The matrix is " + (m.isIdentity() ? "identity" : "not identity"));</code></pre> <h4>Returns</h4> <a href="pc.Mat4.html">pc.Mat4</a> <p>Self for chaining.</p> </div> <div id="setLookAt"> <h3 class="methodname">setLookAt(position, target, up) <a class="font-icon" href="#setLookAt">&#58216;</a></h3> <p><p>Sets the specified matrix to a viewing matrix derived from an eye point, a target point and an up vector. The matrix maps the target point to the negative z-axis and the eye point to the origin, so that when you use a typical projection matrix, the center of the scene maps to the center of the viewport. Similarly, the direction described by the up vector projected onto the viewing plane is mapped to the positive y-axis so that it points upward in the viewport. The up vector must not be parallel to the line of sight from the eye to the reference point.</p></p> <pre><code class="javascript">var position = new pc.Vec3(10, 10, 10); var target = new pc.Vec3(0, 0, 0); var up = new pc.Vec3(0, 1, 0); var m = new pc.Mat4().setLookAt(position, target, up);</code></pre> <h4>Parameters</h4> <table> <tr> <td>position</td><td><a href="pc.Vec3.html">pc.Vec3</a></td><td><p>3-d vector holding view position.</p></td> </tr> <tr> <td>target</td><td><a href="pc.Vec3.html">pc.Vec3</a></td><td><p>3-d vector holding reference point.</p></td> </tr> <tr> <td>up</td><td><a href="pc.Vec3.html">pc.Vec3</a></td><td><p>3-d vector holding the up direction.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Mat4.html">pc.Mat4</a> <p>Self for chaining.</p> </div> <div id="setOrtho"> <h3 class="methodname">setOrtho(left, right, bottom, top, near, far) <a class="font-icon" href="#setOrtho">&#58216;</a></h3> <p><p>Sets the specified matrix to an orthographic projection matrix. The function's parameters define the shape of a cuboid-shaped frustum.</p></p> <pre><code class="javascript">// Create a 4x4 orthographic projection matrix var ortho = pc.Mat4().ortho(-2, 2, -2, 2, 1, 1000);</code></pre> <h4>Parameters</h4> <table> <tr> <td>left</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The x-coordinate for the left edge of the camera's projection plane in eye space.</p></td> </tr> <tr> <td>right</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The x-coordinate for the right edge of the camera's projection plane in eye space.</p></td> </tr> <tr> <td>bottom</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The y-coordinate for the bottom edge of the camera's projection plane in eye space.</p></td> </tr> <tr> <td>top</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The y-coordinate for the top edge of the camera's projection plane in eye space.</p></td> </tr> <tr> <td>near</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The near clip plane in eye coordinates.</p></td> </tr> <tr> <td>far</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The far clip plane in eye coordinates.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Mat4.html">pc.Mat4</a> <p>Self for chaining.</p> </div> <div id="setPerspective"> <h3 class="methodname">setPerspective(fov, aspect, znear, zfar, [fovIsHorizontal]) <a class="font-icon" href="#setPerspective">&#58216;</a></h3> <p><p>Sets the specified matrix to a perspective projection matrix. The function's parameters define the shape of a frustum.</p></p> <pre><code class="javascript">// Create a 4x4 perspective projection matrix var persp = pc.Mat4().setPerspective(45, 16 / 9, 1, 1000);</code></pre> <h4>Parameters</h4> <table> <tr> <td>fov</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The frustum's field of view in degrees. The fovIsHorizontal parameter controls whether this is a vertical or horizontal field of view. By default, it's a vertical field of view.</p></td> </tr> <tr> <td>aspect</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The aspect ratio of the frustum's projection plane (width / height).</p></td> </tr> <tr> <td>znear</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The near clip plane in eye coordinates.</p></td> </tr> <tr> <td>zfar</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The far clip plane in eye coordinates.</p></td> </tr> <tr> <td>fovIsHorizontal</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></td><td><p>Set to true to treat the fov as horizontal (x-axis) and false for vertical (y-axis). Defaults to false.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Mat4.html">pc.Mat4</a> <p>Self for chaining.</p> </div> <div id="setTRS"> <h3 class="methodname">setTRS(t, r, s) <a class="font-icon" href="#setTRS">&#58216;</a></h3> <p><p>Sets the specified matrix to the concatenation of a translation, a quaternion rotation and a scale.</p></p> <pre><code class="javascript">var t = new pc.Vec3(10, 20, 30); var r = new pc.Quat(); var s = new pc.Vec3(2, 2, 2); var m = new pc.Mat4(); m.setTRS(t, r, s);</code></pre> <h4>Parameters</h4> <table> <tr> <td>t</td><td><a href="pc.Vec3.html">pc.Vec3</a></td><td><p>A 3-d vector translation.</p></td> </tr> <tr> <td>r</td><td><a href="pc.Quat.html">pc.Quat</a></td><td><p>A quaternion rotation.</p></td> </tr> <tr> <td>s</td><td><a href="pc.Vec3.html">pc.Vec3</a></td><td><p>A 3-d vector scale.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Mat4.html">pc.Mat4</a> <p>Self for chaining.</p> </div> <div id="toString"> <h3 class="methodname">toString() <a class="font-icon" href="#toString">&#58216;</a></h3> <p><p>Converts the specified matrix to string form.</p></p> <pre><code class="javascript">var m = new pc.Mat4(); // Should output '[1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]' console.log(m.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 matrix in string form.</p> </div> <div id="transformPoint"> <h3 class="methodname">transformPoint(vec, [res]) <a class="font-icon" href="#transformPoint">&#58216;</a></h3> <p><p>Transforms a 3-dimensional point by a 4x4 matrix.</p></p> <pre><code class="javascript">// Create a 3-dimensional point var v = new pc.Vec3(1, 2, 3); // Create a 4x4 rotation matrix var m = new pc.Mat4().setFromEulerAngles(10, 20, 30); var tv = m.transformPoint(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 point 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 point 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 point v transformed by the current instance.</p> </div> <div id="transformVec4"> <h3 class="methodname">transformVec4(vec, [res]) <a class="font-icon" href="#transformVec4">&#58216;</a></h3> <p><p>Transforms a 4-dimensional vector by a 4x4 matrix.</p></p> <pre><code class="javascript">// Create an input 4-dimensional vector var v = new pc.Vec4(1, 2, 3, 4); // Create an output 4-dimensional vector var result = new pc.Vec4(); // Create a 4x4 rotation matrix var m = new pc.Mat4().setFromEulerAngles(10, 20, 30); m.transformVec4(v, result);</code></pre> <h4>Parameters</h4> <table> <tr> <td>vec</td><td><a href="pc.Vec4.html">pc.Vec4</a></td><td><p>The 4-dimensional vector to be transformed.</p></td> </tr> <tr> <td>res</td><td><a href="pc.Vec4.html">pc.Vec4</a></td><td><p>An optional 4-dimensional vector to receive the result of the transformation.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Vec4.html">pc.Vec4</a> <p>The input vector v transformed by the current instance.</p> </div> <div id="transformVector"> <h3 class="methodname">transformVector(vec, [res]) <a class="font-icon" href="#transformVector">&#58216;</a></h3> <p><p>Transforms a 3-dimensional vector by a 4x4 matrix.</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 m = new pc.Mat4().setFromEulerAngles(10, 20, 30); var tv = m.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> <div id="transpose"> <h3 class="methodname">transpose() <a class="font-icon" href="#transpose">&#58216;</a></h3> <p><p>Sets the specified matrix to its transpose.</p></p> <pre><code class="javascript">var m = new pc.Mat4(); // Transpose in place m.transpose();</code></pre> <h4>Returns</h4> <a href="pc.Mat4.html">pc.Mat4</a> <p>Self for chaining.</p> </div> <!--events--> </main> </div> </body> </html>