whs

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>3D Transforms - Documentation</title> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script>  <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger" class="navicon-button x"> <div class="navicon"></div> </label> <label for="nav-trigger" class="overlay"></label> <nav> <a class="no-u" href="index.html">whs.js </a> <li> <a href="https://github.com/WhitestormJS/whitestorm.js/releases"><img src="https://img.shields.io/github/release/WhitestormJS/whitestorm.js.svg?style=flat-square" alt="GitHub release"></a> </li> <li><a href="https://discord.gg/5yNCvC4">chat</a> (discord)</li> <li><a href="https://github.com/WhitestormJS/whitestorm.js">github</a> (source code)</li> <li><a href="https://whs-dev.surge.sh/examples/">examples</a></li> <li> </li> <li><a href="https://threejs.org/">three.js</a></li> <li><a href="https://twitter.com/_alex_buzin">twitter</a> (me)</li> <li> </li> <li class="nav-heading">Pages</li><li class="nav-link nav-Welcome-link"><a href="index.html">Welcome</a></li><li class="nav-link nav-Showcase-link"><a href="Showcase.html">Showcase</a></li><li class="nav-link nav-Hello World!-link"><a href="Hello World!.html">Hello World!</a></li><li class="nav-link nav-Loops & 3D Animation-link"><a href="Loops & 3D Animation.html">Loops & 3D Animation</a></li><li class="nav-link nav-Groups-link"><a href="Groups.html">Groups</a></li><li class="nav-link nav-3D Transforms-link"><a href="3D Transforms.html">3D Transforms</a></li><li class="nav-link nav-Usage with webpack-link"><a href="Usage with webpack.html">Usage with webpack</a></li><li class="nav-link nav-Modules-link"><a href="Modules.html">Modules</a></li><li class="nav-link nav-Animation Clips-link"><a href="Animation Clips.html">Animation Clips</a></li><li class="nav-heading margin">Classes</li><li class="nav-heading pad "><a href="module-core.html">core</a></li><li class="nav-heading ">C<a href="module-core.App.html">App</a></li><li class="nav-heading ">C<a href="module-core.CameraComponent.html">CameraComponent</a></li><li class="nav-heading ">C<a href="module-core.Component.html">Component</a></li><li class="nav-heading ">C<a href="module-core.LightComponent.html">LightComponent</a></li><li class="nav-heading ">C<a href="module-core.Loop.html">Loop</a></li><li class="nav-heading ">C<a href="module-core.MeshComponent.html">MeshComponent</a></li><li class="nav-heading ">C<a href="module-core.ModuleManager.html">ModuleManager</a></li><li class="nav-heading ">C<a href="module-core.ModuleSystem.html">ModuleSystem</a></li><li class="nav-heading pad "><a href="module-components_meshes.html">components/meshes</a></li><li class="nav-heading ">C<a href="module-components_meshes.Box.html">Box</a></li><li class="nav-heading ">C<a href="module-components_meshes.Circle.html">Circle</a></li><li class="nav-heading ">C<a href="module-components_meshes.Cone.html">Cone</a></li><li class="nav-heading ">C<a href="module-components_meshes.Cylinder.html">Cylinder</a></li><li class="nav-heading ">C<a href="module-components_meshes.Dodecahedron.html">Dodecahedron</a></li><li class="nav-heading ">C<a href="module-components_meshes.Extrude.html">Extrude</a></li><li class="nav-heading ">C<a href="module-components_meshes.Group.html">Group</a></li><li class="nav-heading ">C<a href="module-components_meshes.Icosahedron.html">Icosahedron</a></li><li class="nav-heading ">C<a href="module-components_meshes.Importer.html">Importer</a></li><li class="nav-heading ">C<a href="module-components_meshes.Lathe.html">Lathe</a></li><li class="nav-heading ">C<a href="module-components_meshes.Line.html">Line</a></li><li class="nav-heading ">C<a href="module-components_meshes.Octahedron.html">Octahedron</a></li><li class="nav-heading ">C<a href="module-components_meshes.Parametric.html">Parametric</a></li><li class="nav-heading ">C<a href="module-components_meshes.Plane.html">Plane</a></li><li class="nav-heading ">C<a href="module-components_meshes.Polyhedron.html">Polyhedron</a></li><li class="nav-heading ">C<a href="module-components_meshes.Ring.html">Ring</a></li><li class="nav-heading ">C<a href="module-components_meshes.Shape.html">Shape</a></li><li class="nav-heading ">C<a href="module-components_meshes.Sphere.html">Sphere</a></li><li class="nav-heading ">C<a href="module-components_meshes.Tetrahedron.html">Tetrahedron</a></li><li class="nav-heading ">C<a href="module-components_meshes.Text.html">Text</a></li><li class="nav-heading ">C<a href="module-components_meshes.Torus.html">Torus</a></li><li class="nav-heading ">C<a href="module-components_meshes.Torusknot.html">Torusknot</a></li><li class="nav-heading ">C<a href="module-components_meshes.Tube.html">Tube</a></li><li class="nav-heading pad "><a href="module-components_lights.html">components/lights</a></li><li class="nav-heading ">C<a href="module-components_lights.AmbientLight.html">AmbientLight</a></li><li class="nav-heading ">C<a href="module-components_lights.DirectionalLight.html">DirectionalLight</a></li><li class="nav-heading ">C<a href="module-components_lights.HemisphereLight.html">HemisphereLight</a></li><li class="nav-heading ">C<a href="module-components_lights.PointLight.html">PointLight</a></li><li class="nav-heading ">C<a href="module-components_lights.SpotLight.html">SpotLight</a></li><li class="nav-heading pad "><a href="module-components_cameras.html">components/cameras</a></li><li class="nav-heading ">C<a href="module-components_cameras.CubeCamera.html">CubeCamera</a></li><li class="nav-heading ">C<a href="module-components_cameras.OrthographicCamera.html">OrthographicCamera</a></li><li class="nav-heading ">C<a href="module-components_cameras.PerspectiveCamera.html">PerspectiveCamera</a></li><li class="nav-heading pad "><a href="module-modules.html">modules</a></li><li class="nav-heading ">C<a href="module-modules.DefineModule.html">DefineModule</a></li><li class="nav-heading pad "><a href="module-modules_app.html">modules/app</a></li><li class="nav-heading ">C<a href="module-modules_app.ControlsModule.html">ControlsModule</a></li><li class="nav-heading ">C<a href="module-modules_app.ElementModule.html">ElementModule</a></li><li class="nav-heading ">C<a href="module-modules_app.FogModule.html">FogModule</a></li><li class="nav-heading ">C<a href="module-modules_app.OrbitControlsModule.html">OrbitControlsModule</a></li><li class="nav-heading ">C<a href="module-modules_app.PostProcessorModule.html">PostProcessorModule</a></li><li class="nav-heading ">C<a href="module-modules_app.RenderingModule.html">RenderingModule</a></li><li class="nav-heading ">C<a href="module-modules_app.ResizeModule.html">ResizeModule</a></li><li class="nav-heading ">C<a href="module-modules_app.SceneModule.html">SceneModule</a></li><li class="nav-heading ">C<a href="module-modules_app.StateModule.html">StateModule</a></li><li class="nav-heading ">C<a href="module-modules_app.VirtualMouseModule.html">VirtualMouseModule</a></li><li class="nav-heading pad "><a href="module-modules_mesh.html">modules/mesh</a></li><li class="nav-heading ">C<a href="module-modules_mesh.AnimationModule.html">AnimationModule</a></li><li class="nav-heading ">C<a href="module-modules_mesh.DynamicGeometryModule.html">DynamicGeometryModule</a></li><li class="nav-heading ">C<a href="module-modules_mesh.TextureModule.html">TextureModule</a></li><li class="nav-heading margin">Namespaces</li><li class="nav-heading ">N<a href="WHS.html">WHS</a></li><li class="nav-heading "><a href="global.html">Globals</a></li><li class="nav-item">M<a href="global.html#VREffect">VREffect</a></li><li class="nav-item">M<a href="global.html#WEBVR">WEBVR</a></li>  </nav> <div id="main"> <script> var folders = document.querySelectorAll('.folder'); console.log(folders); [].slice.call(folders).forEach(function (folder) { folder.addEventListener('click', function() { folder.classList.toggle('folded'); folder.parentNode.nextElementSibling.classList.toggle('folded'); folder.innerText = folder.className.indexOf('folded') > -1 ? '+ ' : '— '; }); }) </script> <section class="readme"> <article><h1>3D transforms</h1><h3><code>.position</code></h3><blockquote> Used in: <code>MeshComponent</code>, <code>LightComponent</code>, <code>CameraComponent</code> </blockquote> position is a 3D vector (<a href="https://threejs.org/docs/index.html#Reference/Math/Vector3"><code>THREE.Vector3</code></a>) object that defines where mesh is located in space. <pre class="prettyprint source lang-js"><code>ball.position.set(10, 20, 45); ball.position.x // -> 10 ball.position.y // -> 20 ball.position.z // -> 45</code></pre><h4>Modifying values and methods</h4>That's several examples of how you can modify positon: <ul> <li><code>ball.position.set( x, y, z )</code></li> <li><code>ball.position.setX( x )</code>, (<code>.setX()</code>, <code>.setY()</code>, <code>.setZ()</code> methods).</li> <li><code>ball.position = new THREE.Vector3( x, y, z )</code></li> </ul> There are a lot of other methods that <code>.position</code> handles as a <code>THREE.Vector3</code>. You may see the <a href="https://threejs.org/docs/index.html#Reference/Math/Vector3.set">list of methods</a> at Three.js documentation. <h3><code>.rotation</code></h3><blockquote> Used in: <code>MeshComponent</code>, <code>LightComponent</code>, <code>CameraComponent</code> </blockquote> rotation is a <a href="https://threejs.org/docs/index.html#Reference/Math/Euler"><code>THREE.Euler</code></a> with x, y and z values and has almost same methods as a <code>.position</code>. It defines a rotation regarding object position. <h4>Modifying values and methods</h4>Commonly used: <ul> <li><code>ball.rotation.set( x, y, z )</code></li> <li><code>ball.rotation.setX( x )</code>, (<code>.setX()</code>, <code>.setY()</code>, <code>.setZ()</code> methods).</li> <li><code>ball.rotation = new THREE.Euler( x, y, z )</code></li> </ul> See <a href="https://threejs.org/docs/index.html#Reference/Math/Euler.set">list of THREE.Euler methods</a> at Three.js documentation. <blockquote> <code>.rotation</code> will be converted to a quaternion and applied to it's physics object linked to the component. (Only if you use a Physics version [Todo: add link]). </blockquote> <h2><code>.quaternion</code></h2><blockquote> Used in: <code>MeshComponent</code>, <code>LightComponent</code>, <code>CameraComponent</code> </blockquote> quaternion, <a href="https://threejs.org/docs/index.html#Reference/Math/Quaternion"><code>THREE.Quaternion</code></a> is another way to rotate 3D object in space. It has x, y, z and w values. <pre class="prettyprint source lang-js"><code>// Convert euler to quaternion. ball.quaternion.setFromEuler(new THREE.Euler(Math.PI / 2, 0, 0)); // Set values. ball.quaternion.set(10, 20, 45, 60); ball.quaternion.x // -> 10 ball.quaternion.y // -> 20 ball.quaternion.z // -> 45 ball.quaternion.w // -> 60</code></pre><h4>Modifying values and methods</h4>Commonly used: <ul> <li><code>ball.quaternion.set( x, y, z, w )</code></li> <li><code>ball.quaternion.setX( x )</code>, (<code>.setX()</code>, <code>.setY()</code>, <code>.setZ()</code>, <code>.setW()</code> methods).</li> <li><code>ball.quaternion = new THREE.Quaternion( x, y, z, w )</code></li> <li><code>ball.quaternion.setFromEuler(new THREE.Euler( x, y, z ))</code></li> </ul> See <a href="https://threejs.org/docs/index.html#Reference/Math/Quaternion.set">list of THREE.Quaternion methods</a> at Three.js documentation. <h2><code>.scale</code></h2><blockquote> Used in: <code>MeshComponent</code> </blockquote> scale, <a href="https://threejs.org/docs/index.html#Reference/Math/Vector3"><code>THREE.Vector3</code></a> is a vector that defines mesh scale. <pre class="prettyprint source lang-js"><code>ball.scale.set(2, 2, 2) ball.scale.x // -> 2 ball.scale.y // -> 2 ball.scale.z // -> 2</code></pre><h4>Modifying values and methods</h4>Commonly used: <ul> <li><code>ball.scale.set( x, y, z )</code></li> <li><code>ball.scale.setX( x )</code>, (<code>.setX()</code>, <code>.setY()</code>, <code>.setZ()</code> methods).</li> <li><code>ball.scale= new THREE.Vector3( x, y, z )</code></li> </ul> See <a href="https://threejs.org/docs/index.html#Reference/Math/Vector3.set">list of THREE.Vector3 methods</a> at Three.js documentation. <a href="Usage with webpack.html">> Usage with webpack</a></article> </section> <script> var folders = document.querySelectorAll('.folder'); console.log(folders); [].slice.call(folders).forEach(function (folder) { folder.addEventListener('click', function() { folder.classList.toggle('folded'); folder.parentNode.nextElementSibling.classList.toggle('folded'); folder.innerText = folder.className.indexOf('folded') > -1 ? '+ ' : '— '; }); }) </script> </div> <footer> Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a> on Tue Jul 18 2017 14:29:46 GMT+0300 (EEST). Inspired by <a href="http://stack.gl/packages/">stack.gl</a> MIT, see <code>LICENSE.md</code> for details. </footer> <script>prettyPrint();</script> <script src="scripts/linenumber.js"></script> <script src="scripts/scroll.js"></script> <script> const links = document.querySelectorAll('.sidebar a[href]'); [].slice.call(links).forEach(link => { link.classList.add('scroll'); }); </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-83696871-1', 'auto'); ga('send', 'pageview'); </script> </body> </html>