├── .gitignore
├── AFRAME_SITE.yml
├── LICENSE
├── README.md
├── aframe-lod.js
├── index.html
├── package.json
└── thirdparty
    └── aframe.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | *.sw[mnop]
 3 | 
 4 | # Logs
 5 | logs
 6 | *.log
 7 | npm-debug.log*
 8 | 
 9 | # Runtime data
10 | pids
11 | *.pid
12 | *.seed
13 | *.pid.lock
14 | 
15 | # Directory for instrumented libs generated by jscoverage/JSCover
16 | lib-cov
17 | 
18 | # Coverage directory used by tools like istanbul
19 | coverage
20 | 
21 | # nyc test coverage
22 | .nyc_output
23 | 
24 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
25 | .grunt
26 | 
27 | # node-waf configuration
28 | .lock-wscript
29 | 
30 | # Compiled binary addons (http://nodejs.org/api/addons.html)
31 | build/Release
32 | 
33 | # Dependency directories
34 | node_modules
35 | jspm_packages
36 | 
37 | # Optional npm cache directory
38 | .npm
39 | 
40 | # Optional REPL history
41 | .node_repl_history
42 | 


--------------------------------------------------------------------------------
/AFRAME_SITE.yml:
--------------------------------------------------------------------------------
1 | title: "Example"
2 | repo: ""
3 | description: ""
4 | mobile: true
5 | components:
6 | assets:
7 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License
 2 | 
 3 | Copyright © 2016 MinMax.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # A-LOD Component
 2 | For use with [A-Frame](https://aframe.io/)
 3 | 
 4 | [Live Demo](https://mflux.github.io/aframe-lod/)
 5 | 
 6 | Usage:
 7 | Include the script after a-frame
 8 |     
 9 |     <script type="text/javascript" src="aframe-lod.js"></script>
10 |     
11 | Create an `<a-lod>` which can be positioned, rotated, etc like normal A-Frame Entities.
12 | 
13 | Add child elements with an lod-level component. The number is the viewing distance from the camera (in meters for VR).
14 | 
15 |       <a-lod position="0 1.25 -5">
16 |         <a-sphere lod-level="0" radius="1.25" segments-width="64" segments-height="42" material="color: red; wireframe: true"></a-sphere>
17 |         <a-sphere lod-level="3" radius="1.25" segments-width="36" segments-height="18" material="color: red; wireframe: true"></a-sphere>
18 |         <a-sphere lod-level="5" radius="1.25" segments-width="24" segments-height="9" material="color: red; wireframe: true"></a-sphere>
19 |         <a-sphere lod-level="8" radius="1.25" segments-width="12" segments-height="6" material="color: red; wireframe: true"></a-sphere>
20 |       </a-lod>
21 | 
22 | 


--------------------------------------------------------------------------------
/aframe-lod.js:
--------------------------------------------------------------------------------
 1 | (function closure(){
 2 |   AFRAME.registerPrimitive('a-lod', {
 3 | 
 4 |     defaultComponents: {
 5 |       lod: {}
 6 |     }
 7 |   });
 8 | 
 9 |   AFRAME.registerComponent('lod', {
10 |     init: function(){
11 |       const lod = this.lod = new THREE.LOD();
12 |       Array.from( this.el.children ).forEach( function( childElement ){
13 |         childElement.addEventListener( 'loaded', function(){
14 |           const lodLevelComponent = childElement.components[ 'lod-level' ];
15 |           if( lodLevelComponent !== undefined ){
16 |             lod.addLevel( childElement.object3D, lodLevelComponent.data );
17 |           }
18 |         });
19 |       });
20 |       this.el.setObject3D( 'lod', lod );
21 |     },
22 |     tick: function(){
23 |       if( this.el.sceneEl.camera ){
24 |         this.lod.update( this.el.sceneEl.camera );
25 |       }
26 |     }
27 |   });
28 | 
29 |   AFRAME.registerComponent('lod-level', {
30 |     schema: {
31 |       type: 'number'
32 |     }
33 |   });
34 | 
35 | })();


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>LOD Example</title>
 6 |     <script type="text/javascript" src="thirdparty/aframe.js"></script>
 7 |     <script type="text/javascript" src="aframe-lod.js"></script>
 8 |   </head>
 9 |   <body>
10 | 
11 |     <a-scene>
12 | 
13 |       <a-sky color="#ECECEC"></a-sky>
14 | 
15 |       <a-lod position="0 1.25 -5">
16 |         <a-sphere lod-level="0" radius="1.25" segments-width="64" segments-height="42" material="color: red; wireframe: true"></a-sphere>
17 |         <a-sphere lod-level="3" radius="1.25" segments-width="36" segments-height="18" material="color: red; wireframe: true"></a-sphere>
18 |         <a-sphere lod-level="5" radius="1.25" segments-width="24" segments-height="9" material="color: red; wireframe: true"></a-sphere>
19 |         <a-sphere lod-level="8" radius="1.25" segments-width="12" segments-height="6" material="color: red; wireframe: true"></a-sphere>
20 |       </a-lod>
21 | 
22 |     </a-scene>
23 | 
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example",
 3 |   "description": "Example",
 4 |   "version": "0.3.0",
 5 |   "license": "MIT",
 6 |   "scripts": {
 7 |     "start": "budo --live --verbose --port 3000 --open",
 8 |     "deploy": "ghpages",
 9 |     "ghpages": "ghpages"
10 |   },
11 |   "devDependencies": {
12 |     "budo": "^7.0.0",
13 |     "ghpages": "0.0.3"
14 |   },
15 |   "keywords": [
16 |     "aframe",
17 |     "aframe-example",
18 |     "aframe-boilerplate",
19 |     "aframe-scene",
20 |     "webvr",
21 |     "vr"
22 |   ]
23 | }
24 | 


--------------------------------------------------------------------------------