wwobjloader2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Documentation Index</title>  <link type="text/css" rel="stylesheet" href="styles/sunlight.default.css"> <link type="text/css" rel="stylesheet" href="styles/site.simplex.css"> </head> <body> <div class="navbar navbar-default navbar-fixed-top "> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="index.html">Documentation</a> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#topNavigation"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse" id="topNavigation"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b class="caret"></b></a> <ul class="dropdown-menu "> <li><a href="THREE.LoaderSupport.Builder.html">THREE.LoaderSupport.Builder</a></li><li><a href="THREE.LoaderSupport.Callbacks.html">THREE.LoaderSupport.Callbacks</a></li><li><a href="THREE.LoaderSupport.ConsoleLogger.html">THREE.LoaderSupport.ConsoleLogger</a></li><li><a href="THREE.LoaderSupport.LoadedMeshUserOverride.html">THREE.LoaderSupport.LoadedMeshUserOverride</a></li><li><a href="THREE.LoaderSupport.LoaderBase.html">THREE.LoaderSupport.LoaderBase</a></li><li><a href="THREE.LoaderSupport.PrepData.html">THREE.LoaderSupport.PrepData</a></li><li><a href="THREE.LoaderSupport.ResourceDescriptor.html">THREE.LoaderSupport.ResourceDescriptor</a></li><li><a href="THREE.LoaderSupport.Validator.html">THREE.LoaderSupport.Validator</a></li><li><a href="THREE.LoaderSupport.WorkerDirector.html">THREE.LoaderSupport.WorkerDirector</a></li><li><a href="THREE.LoaderSupport.WorkerRunnerRefImpl.html">THREE.LoaderSupport.WorkerRunnerRefImpl</a></li><li><a href="THREE.LoaderSupport.WorkerSupport.html">THREE.LoaderSupport.WorkerSupport</a></li><li><a href="THREE.OBJLoader2.html">THREE.OBJLoader2</a></li> </ul> </li> </ul> <div class="col-sm-3 col-md-3"> <form class="navbar-form" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search" name="q" id="search-input"> <div class="input-group-btn"> <button class="btn btn-default" id="search-submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> </div> </div> </div> <div class="container" id="toc-content"> <div class="row"> <div class="col-md-8"> <div id="main"> <section class="readme-section"> <article><h1>OBJLoader2 (sync&async) for three.js</h1><p><a href="https://www.npmjs.com/package/wwobjloader2"><img src="https://img.shields.io/npm/v/wwobjloader2.svg" alt="Latest NPM release"></a> <a href="https://github.com/kaisalmen/WWOBJLoader/blob/master/LICENSE"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License: MIT"></a></p> <p>OBJLoader2 is a new loader for the OBJ file format that is additionally executable within a web worker.</p> <p>Interested in recent changes? Check the <a href="CHANGELOG.md">CHANGELOG</a>.</p> <h2>Repository structure / NPM content</h2><p>The directory structure is organized as follows:</p> <ul> <li><strong>build</strong>: Contains build libraries and documentation (NPM only)</li> <li><strong>src</strong>: Contains the sources for the loaders</li> <li><strong>test</strong>: Contains Tests/HTML examples</li> <li><strong>resource</strong>: Contains OBJs, MTLs and textures (GitHub only)</li> </ul> <h2>Building</h2><p><strong>This only applies to GitHub:</strong> Before you can start to play around some post-checkout initialization steps have to be performed.<br> <strong><a href="https://nodejs.org">npm</a></strong> and <strong><a href="http://gulpjs.com/">gulp</a></strong> must be installed on your local platform. They are required for retrieving dependencies and for building combined source bundles and the documentation. After checkout run:<br></p> <pre class="prettyprint source lang-bash"><code>npm update</code></pre><p>You require gulp to be able to build the bundles. If you have not yet installed the cli, execute this:<br></p> <pre class="prettyprint source lang-bash"><code>npm install --global gulp-cli</code></pre><p>From the project's root run <code>gulp</code> to create The documentation in directory <strong>build/docs</strong> and the bundles in directory <strong>build</strong>:</p> <ul> <li><strong>OBJLoader2[.min].js</strong>: Contains all code required for the loader to work</li> <li><strong>LoaderSupport[.min].js</strong>: Consists of common support functions, worker control and worker director code</li> </ul> <h3>Models and resources</h3><p>Use gulp to download missing resources (OBJ, MTL files and textures):</p> <pre class="prettyprint source lang-bash"><code>gulp get-resources</code></pre><h2>Implementation Overview</h2><p>Version 2.0.0 introduced substantial enhancements and chances especially but not only to the way the web worker execution of the parser is performed:</p> <ul> <li><code>OBJLoader2</code> and <code>WWOBJLoader2</code> have been fused. Worker based asynchronous execution of the loader is now handled by <code>parseAsync</code>, <code>load</code> with <code>useAsync</code> flag or <code>run</code> which is used for batch processing (see example <strong>OBJLoader2 usage options</strong> below). Common functionality independent of OBJ parsing has been moved to package <code>THREE.LoaderSupport</code> located in <code>LoaderSupport.js</code>. The Parser can either be executed directly or it is run inside a web worker (<code>THREE.LoaderSupport.WorkerSupport</code> handles the building and execution). Raw results are passed to a common mesh builder function. These support classes can be used to transform other Loaders to support asynchronous parsing. </li> </ul> <h3>Features</h3><p><code>OBJLoader2</code> contains all features of the existing <code>OBJLoader</code> and it has to . These are some interesting POIs:</p> <ul> <li><code>OBJLoader2.parse</code> method accepts arraybuffer or string as input. Text processing is approx. 15-20 pecent slower</li> <li><code>OBJLoader2.parseAsync</code> only accepts arraybuffer as input as buffer is passed to worker.</li> <li>Face N-Gons are now support supported</li> <li>Indexed rendering is now available, but <code>OBJLoader2</code> must it must be switched on via <code>setUseIndices</code> (see example <strong>OBJLoader2 basic usage</strong> below).</li> <li><code>OBJLoader2</code> must now be re-instantiated every time it is used, but caching of worker code via <code>WorkerSupport</code> and <code>LoaderDirector</code> is available</li> <li><code>ConsoleLogger</code> now encapsulates all console logging. Logging can be fully deactivated or switched to debug mode (issue #15)</li> <li>progress callbacks provide numerical values to indicate overall progress of download or parsing (issue #16) </li> <li>"o name" (object), "g name" (group) and new vertex definition without any other declaration lead to new object creation</li> <li>Multi-Materials are created when needed</li> <li>Flat smoothing defined by "s 0" or "s off" is supported and Multi-Material is created when one object/group defines both smoothing groups equal and not equal to zero.</li> </ul> <h3>Directing the symphony</h3><p><code>LoaderDirector</code> is able to create a configurable amount of <code>OBJLoader2</code> via reflection just by providing parameters. It is now able to direct all loaders that over automation via <code>run</code> and use <code>WorkerSupport</code> to allow running the <code>Parser</code> in a web worker. An instruction queue is fed and all workers created will work to deplete it once they have been started.</p> <h3>Web Worker Support</h3><p><code>LoaderSupport</code> offers utility functions used to serialize existing code into strings that are used to build the web worker code. Any loader that uses it must provide a function that builds the parser code (for example see <code>buildCode</code> inside <code>OBJLoader2.parseAsync</code>). <code>WorkerSupport</code> provides wrapper code to create the web worker and to organize communication with it. Configuration of the Parser inside the worker is handled by a configuration object that configures the parser identical to synchronous usage.</p> <h2>Examples:</h2><p><a href="https://kaisalmen.de/proto/test/objloader2/main.src.html">OBJLoader2 basic usage</a><br> <a href="https://kaisalmen.de/proto/test/wwobjloader2/main.src.html">OBJLoader2 usage options</a><br> <a href="https://kaisalmen.de/proto/test/wwobjloader2stage/main.src.html">OBJLoader2 Stage</a><br> <a href="https://kaisalmen.de/proto/test/meshspray/main.src.html">LoaderDirector - Mesh Spray</a><br> <a href="https://kaisalmen.de/proto/test/wwparallels/main.src.html">LoaderDirector Parallels Demo</a><br></p> <h2>Http server for development</h2><p>If you have <code>docker</code> and <code>docker-compose</code> installed on your development platform, you are now able to launch <code>nginx</code> which is serving the complete content of this repository. Any changes to files are directly available in the HTTP server. This is solely meant for development.</p> <p>From the command-line, use the following command to launch the HTTP server:</p> <pre class="prettyprint source lang-bash"><code>docker-compose up -d</code></pre><p>Content is available here: <a href="http://localhost:8085">http://localhost:8085</a><br> Nginx configuration is stored here: <code>resource/nginx/nginx.conf</code>. Adjust according your needs.</p> <p>From the command-line, use the following to stop the HTTP server:</p> <pre class="prettyprint source lang-bash"><code>docker-compose down</code></pre><p>Have fun!</p> <p>Kai</p></article> </section> </div> </div> <div class="clearfix"></div> <div class="col-md-3"> <div id="toc" class="col-md-3 hidden-xs hidden-sm hidden-md"></div> </div> </div> </div> <div class="modal fade" id="searchResults"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Search results</h4> </div> <div class="modal-body"></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <footer> <span class="jsdoc-message"> Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a> on October 24th 2017, 10:38:01 pm using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>. </span> </footer> <script src="scripts/docstrap.lib.js"></script> <script src="scripts/toc.js"></script> <script type="text/javascript" src="scripts/fulltext-search-ui.js"></script> <script> $( function () { $( "[id*='$']" ).each( function () { var $this = $( this ); $this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) ); } ); $( ".tutorial-section pre, .readme-section pre, pre.prettyprint.source" ).each( function () { var $this = $( this ); var example = $this.find( "code" ); exampleText = example.html(); var lang = /{@lang (.*?)}/.exec( exampleText ); if ( lang && lang[1] ) { exampleText = exampleText.replace( lang[0], "" ); example.html( exampleText ); lang = lang[1]; } else { var langClassMatch = example.parent()[0].className.match(/lang\-(\S+)/); lang = langClassMatch ? langClassMatch[1] : "javascript"; } if ( lang ) { $this .addClass( "sunlight-highlight-" + lang ) .addClass( "linenums" ) .html( example.html() ); } } ); Sunlight.highlightAll( { lineNumbers : true, showMenu : true, enableDoclinks : true } ); $.catchAnchorLinks( { navbarOffset: 10 } ); $( "#toc" ).toc( { anchorName : function ( i, heading, prefix ) { return $( heading ).attr( "id" ) || ( prefix + i ); }, selectors : "#toc-content h1,#toc-content h2,#toc-content h3,#toc-content h4", showAndHide : false, smoothScrolling: true } ); $( "#main span[id^='toc']" ).addClass( "toc-shim" ); $( '.dropdown-toggle' ).dropdown(); $( "table" ).each( function () { var $this = $( this ); $this.addClass('table'); } ); } ); </script>   <script type="text/javascript"> $(document).ready(function() { SearcherDisplay.init(); }); </script> </body> </html>