whs

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Welcome - 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>Welcome to whs.js docs!</h1>whs.js is a framework for 3D web apps built with Three.js technology. <pre class="prettyprint source lang-bash"><code># Install npm version $ npm install whs</code></pre>It implements a core with component system and plugin support for fast development of 3D scene with physics. Automizing your web app with whitestorm is fast and comfortable. This engine has physics support implemented by custom Physi.js library, which is much faster than others. Framework provides extended component control and high frame rate, because it uses WebWorkers technology for multithreading. <pre class="prettyprint source lang-javascript"><code>const app = new WHS.App([ new WHS.ElementModule(), // Apply to DOM. new WHS.SceneModule(), // Create a new THREE.Scene and set it to app. new WHS.DefineModule('camera', new WHS.PerspectiveCamera({ // Apply a camera. position: new Vector3(0, 0, 50) })), new WHS.RenderingModule({bgColor: 0x162129}), // Apply THREE.WebGLRenderer new WHS.ResizeModule() // Make it resizable. ]); app.start(); // Run app.</code></pre><a href="Showcase.html">> featured projects</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>