├── .gitignore ├── README.md ├── deck.js ├── CHANGELOG.md ├── MIT-license.txt ├── Makefile ├── README.md ├── boilerplate.html ├── core │ ├── deck.core.css │ ├── deck.core.js │ ├── deck.core.scss │ ├── print.css │ └── print.scss ├── extensions │ ├── goto │ │ ├── deck.goto.css │ │ ├── deck.goto.html │ │ ├── deck.goto.js │ │ └── deck.goto.scss │ ├── menu │ │ ├── deck.menu.css │ │ ├── deck.menu.js │ │ └── deck.menu.scss │ ├── navigation │ │ ├── deck.navigation.css │ │ ├── deck.navigation.html │ │ ├── deck.navigation.js │ │ └── deck.navigation.scss │ ├── scale │ │ ├── deck.scale.css │ │ ├── deck.scale.js │ │ └── deck.scale.scss │ └── status │ │ ├── deck.status.css │ │ ├── deck.status.html │ │ ├── deck.status.js │ │ └── deck.status.scss ├── introduction │ └── index.html ├── jquery.min.js ├── modernizr.custom.js ├── test │ ├── fixtures │ │ ├── empty.html │ │ ├── nesteds.html │ │ └── standard.html │ ├── index.html │ ├── lib │ │ ├── jasmine-html.js │ │ ├── jasmine-jquery.js │ │ ├── jasmine.css │ │ └── jasmine.js │ ├── settings.js │ ├── spec.core.js │ ├── spec.goto.js │ ├── spec.menu.js │ ├── spec.navigation.js │ ├── spec.scale.js │ └── spec.status.js └── themes │ ├── style │ ├── _reset.scss │ ├── neon.css │ ├── neon.scss │ ├── swiss.css │ ├── swiss.scss │ ├── web-2.0.css │ └── web-2.0.scss │ └── transition │ ├── fade.css │ ├── fade.scss │ ├── horizontal-slide.css │ ├── horizontal-slide.scss │ ├── vertical-slide.css │ └── vertical-slide.scss ├── iframes ├── UVs.html ├── camera.html ├── circle-animation.html ├── cube-title.html ├── cubemap.html ├── geometry.html ├── getting-started.html ├── helpers.html ├── hierarchy.html ├── images │ ├── cube │ │ └── Bridge2 │ │ │ ├── negx.jpg │ │ │ ├── negy.jpg │ │ │ ├── negz.jpg │ │ │ ├── posx.jpg │ │ │ ├── posy.jpg │ │ │ ├── posz.jpg │ │ │ └── readme.txt │ ├── cursor-centered.png │ └── planets │ │ ├── all-maps.png │ │ ├── earth_alpha_2048.jpg │ │ ├── earth_atmos_2048.jpg │ │ ├── earth_clouds_1024.png │ │ ├── earth_normal_2048.jpg │ │ ├── earth_specular_2048.jpg │ │ ├── land_ocean_ice_cloud_2048.jpg │ │ └── moon_1024.jpg ├── interactive-cubes-gui.html ├── interactive-cubes-helpers.html ├── lights-three-point.html ├── lights.html ├── loader.html ├── material-options.html ├── material.html ├── misc_controls_orbit.html ├── models │ ├── pumpkin.js │ ├── teapot.js │ └── teapot.json ├── sprite.html ├── texture-mapping.html ├── three │ ├── LegacyJSONLoader.js │ ├── OrbitControls.js │ ├── UVsDebug.js │ ├── WebGL.js │ ├── geometries │ │ ├── TeapotBufferGeometry.js │ │ └── hilbert3D.js │ ├── libs │ │ ├── dat.gui.min.js │ │ └── tween.min.js │ ├── three.js │ └── three.min.js ├── transforms.html ├── tween.html ├── vertices.html ├── webgl_interactive_cubes.html ├── webgl_lines_colors.html └── webgl_points_random.html ├── images ├── 300.jpg ├── 3d-software.png ├── cardboard-ingredients.png ├── geometry.png ├── interaction.png ├── marble.jpg ├── node-map.png ├── obj-json.png ├── octocat.png ├── orbit-all-the-things.jpg ├── sublime-completions.png ├── sunny-sky.jpg ├── surface-normal.png ├── threejs.png ├── tron-legacy.jpg ├── tween-graphs.png ├── twitter.png ├── unit-circle-radians.png ├── unit-circle-trig.png ├── unit-circle.png └── webgl-browser-support.png ├── index.html ├── offline-extended.html ├── offline.html ├── resources ├── VRController.js ├── fonts.css ├── fonts │ ├── source-code-pro │ │ ├── SourceCodePro-Bold.eot │ │ ├── SourceCodePro-Bold.svg │ │ ├── SourceCodePro-Bold.woff │ │ ├── SourceCodePro-Regular.eot │ │ ├── SourceCodePro-Regular.svg │ │ └── SourceCodePro-Regular.woff │ └── source-sans-pro │ │ ├── SourceSansPro-Bold.eot │ │ ├── SourceSansPro-Bold.svg │ │ ├── SourceSansPro-Bold.woff │ │ ├── SourceSansPro-Regular.eot │ │ ├── SourceSansPro-Regular.svg │ │ └── SourceSansPro-Regular.woff ├── jquery-2.1.1.min.js ├── less │ ├── fonts.less │ ├── layout.less │ ├── prism │ │ ├── prism-base16-eighties.dark.less │ │ └── prism-default.less │ ├── theme.less │ └── vendor-prefixes.less ├── prism.js ├── slides.js └── theme.css ├── thumb-presentation.jpg └── videos ├── cardboard.mp4 ├── sublime-completions.mp4 └── webgl-demos.mp4 /.gitignore: -------------------------------------------------------------------------------- 1 | /dev 2 | .DS_Store 3 | *.codekit 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Intro to WebGL with Three.js 2 | ---------------------------- 3 | 4 | * `index.html` – Front Porch Conference 2014, Dallas, Texas ([Slides](http://davidscottlyons.com/threejs-intro) | [Video](https://youtu.be/6eLl8yQnxHQ)) 5 | * `offline-extended.html` – Dallas HTML5 User Group Meetup, November 2014 ([Slides](http://davidscottlyons.com/threejs-intro/offline-extended.html) | [Video](https://youtu.be/-L6WWbKthvw)) 6 | 7 | WebGL presentation slides. 8 | Runs on [deck.js](https://github.com/imakewebthings/deck.js) 9 | Use the "m" key to open the menu for quick navigation between slides. -------------------------------------------------------------------------------- /deck.js/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## v1.1.0 4 | 5 | - Expand `beforeInit` event to allow halting of init event. 6 | - Create alternative init signature with single options object using new `options.selectors.slides` option. 7 | - Added methods `getTopLevelSlides` and `getNestedSlides`. 8 | - Integrated hash plugin into core. 9 | - Allow for touch swiping to be axis specific or disabled. 10 | - Include ARIA attribute considerations in core and extensions. 11 | -------------------------------------------------------------------------------- /deck.js/MIT-license.txt: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2011-2014 Caleb Troughton 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 | -------------------------------------------------------------------------------- /deck.js/Makefile: -------------------------------------------------------------------------------- 1 | SASSOPTS=--scss --style expanded 2 | 3 | default: generate 4 | 5 | generate: 6 | sass --update ${SASSOPTS} . 7 | 8 | force: 9 | sass --update ${SASSOPTS} --force . 10 | 11 | watch: 12 | sass --watch ${SASSOPTS} . 13 | -------------------------------------------------------------------------------- /deck.js/README.md: -------------------------------------------------------------------------------- 1 | #deck.js 2 | 3 | A JavaScript library for building modern HTML presentations. deck.js is flexible enough to let advanced CSS and JavaScript authors craft highly customized decks, but also provides templates and themes for the HTML novice to build a standard slideshow. 4 | 5 | ## Quick Start 6 | 7 | This repository includes a `boilerplate.html` as a starting point, with all the extensions included. Just [download it](https://github.com/imakewebthings/deck.js/archive/latest.zip), open `boilerplate.html`, and start editing your slides. 8 | 9 | ## Documentation 10 | 11 | Check out the [documentation page](http://imakewebthings.github.com/deck.js/docs) for more information on the methods, events, and options available in core and all the included extensions. A sample standard slide deck is included in the package under the `introduction` folder. You can also [view that sample deck](http://imakewebthings.github.com/deck.js/introduction) online to play with the available style and transition themes. 12 | 13 | ## Extensions, Themes, and Related Projects 14 | 15 | Take a look at [the wiki](https://github.com/imakewebthings/deck.js/wiki) for lists of extensions, themes, and other related goodies. If you have a publicly available project of your own, feel free to add to the list. 16 | 17 | ## Dependencies (included in this repository) 18 | 19 | - [jQuery](http://jquery.com) 20 | - [Modernizr](http://modernizr.com) 21 | 22 | ## Tests & Support 23 | 24 | Unit tests are written with [Jasmine](http://pivotal.github.com/jasmine/) and [jasmine-jquery](https://github.com/velesin/jasmine-jquery). You can [run them here](http://imakewebthings.github.com/deck.js/test). 25 | 26 | deck.js has been tested with jQuery 1.6+ and works in IE7+, Chrome, FF, Safari, and Opera. The more capable browsers receive greater enhancements, but a basic cutaway slideshow will work for all browsers listed above. Please don't give your presentations in IE6. 27 | 28 | For any questions or general discussion about deck.js please direct your attention to the [mailing list](http://groups.google.com/group/deckjs) (uses Google groups.) If you would like to report a bug, please see the [issues page](https://github.com/imakewebthings/deck.js/issues). 29 | 30 | ## Printing 31 | 32 | Core includes stripped down black and white print styles for the standard slide template that is suitable for handouts. 33 | 34 | ## Awesome Contributors 35 | 36 | - [jbuck](https://github.com/jbuck) 37 | - [cykod](https://github.com/cykod) 38 | - [dougireton](https://github.com/dougireton) 39 | - [awirick](https://github.com/awirick) 40 | - Daniel Knittl-Frank 41 | - [alexch](https://github.com/alexch) 42 | - [twitwi](https://github.com/twitwi) 43 | 44 | If you would like to contribute a patch to deck.js please do as much as you can of the following: 45 | 46 | - Add or amend Jasmine tests. 47 | - Add inline documentation. 48 | - If the standard snippet of an extension changes, please change it in both the introduction deck and the snippet html in the extension folder. 49 | - If the API changes, it would be awesome to receive a parallel pull request to the gh-pages branch which updates the public-facing documentation. 50 | 51 | ## License 52 | 53 | Copyright (c) 2011-2014 Caleb Troughton 54 | 55 | Licensed under the [MIT license](https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt) 56 | 57 | ## Donations 58 | 59 | [![Gittip donate 60 | button](http://img.shields.io/gittip/imakewebthings.png)](https://www.gittip.com/imakewebthings/ "Donate weekly to this project using Gittip") 61 | -------------------------------------------------------------------------------- /deck.js/boilerplate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Your deck.js Presentation 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
34 | 35 | 36 | 37 |
38 |

Slide

39 |
40 | 41 |
42 |

Content

43 |
44 | 45 |
46 |

Here

47 |
48 | 49 | 50 | 51 | 52 | 53 | 54 |
55 | ← 56 | → 57 |
58 | 59 | 60 |

61 | 62 | / 63 | 64 |

65 | 66 | 67 |
68 | 69 | 70 | 71 | 72 |
73 | 74 | 75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /deck.js/core/deck.core.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | .deck-container { 8 | position: relative; 9 | min-height: 100%; 10 | margin: 0 auto; 11 | overflow: hidden; 12 | overflow-y: auto; 13 | } 14 | .js .deck-container { 15 | visibility: hidden; 16 | } 17 | .ready .deck-container { 18 | visibility: visible; 19 | } 20 | .touch .deck-container { 21 | -webkit-text-size-adjust: none; 22 | -moz-text-size-adjust: none; 23 | } 24 | 25 | .deck-loading { 26 | display: none; 27 | } 28 | 29 | .slide { 30 | width: auto; 31 | min-height: 100%; 32 | position: relative; 33 | } 34 | 35 | .deck-before, .deck-previous, .deck-next, .deck-after { 36 | position: absolute; 37 | left: -999em; 38 | top: -999em; 39 | } 40 | 41 | .deck-current { 42 | z-index: 2; 43 | } 44 | 45 | .slide .slide { 46 | visibility: hidden; 47 | position: static; 48 | min-height: 0; 49 | } 50 | 51 | .deck-child-current { 52 | position: static; 53 | z-index: 2; 54 | } 55 | .deck-child-current .slide { 56 | visibility: hidden; 57 | } 58 | .deck-child-current .deck-previous, .deck-child-current .deck-before, .deck-child-current .deck-current { 59 | visibility: visible; 60 | } 61 | -------------------------------------------------------------------------------- /deck.js/core/deck.core.scss: -------------------------------------------------------------------------------- 1 | html, body { 2 | height:100%; 3 | padding:0; 4 | margin:0; 5 | } 6 | 7 | .deck-container { 8 | position:relative; 9 | min-height:100%; 10 | margin:0 auto; 11 | overflow:hidden; 12 | overflow-y:auto; 13 | 14 | .js & { 15 | visibility:hidden; 16 | } 17 | 18 | .ready & { 19 | visibility:visible; 20 | } 21 | 22 | .touch & { 23 | -webkit-text-size-adjust:none; 24 | -moz-text-size-adjust:none; 25 | } 26 | } 27 | 28 | .deck-loading { 29 | display:none; 30 | } 31 | 32 | .slide { 33 | width:auto; 34 | min-height:100%; 35 | position:relative; 36 | } 37 | 38 | .deck-before, .deck-previous, .deck-next, .deck-after { 39 | position:absolute; 40 | left:-999em; 41 | top:-999em; 42 | } 43 | 44 | .deck-current { 45 | z-index:2; 46 | } 47 | 48 | .slide .slide { 49 | visibility:hidden; 50 | position:static; 51 | min-height:0; 52 | } 53 | 54 | .deck-child-current { 55 | position:static; 56 | z-index:2; 57 | 58 | .slide { 59 | visibility:hidden; 60 | } 61 | 62 | .deck-previous, .deck-before, .deck-current { 63 | visibility:visible; 64 | } 65 | } -------------------------------------------------------------------------------- /deck.js/core/print.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 18pt; 3 | } 4 | 5 | h1 { 6 | font-size: 48pt; 7 | } 8 | 9 | h2 { 10 | font-size: 36pt; 11 | } 12 | 13 | h3 { 14 | font-size: 28pt; 15 | } 16 | 17 | pre { 18 | border: 1px solid #000; 19 | padding: 10px; 20 | white-space: pre-wrap; 21 | } 22 | 23 | .deck-container > .slide { 24 | page-break-after: always; 25 | } 26 | -------------------------------------------------------------------------------- /deck.js/core/print.scss: -------------------------------------------------------------------------------- 1 | body { font-size:18pt; } 2 | h1 { font-size:48pt; } 3 | h2 { font-size:36pt; } 4 | h3 { font-size:28pt; } 5 | 6 | pre { 7 | border:1px solid #000; 8 | padding:10px; 9 | white-space:pre-wrap; 10 | } 11 | 12 | .deck-container > .slide { 13 | page-break-after: always; 14 | } 15 | -------------------------------------------------------------------------------- /deck.js/extensions/goto/deck.goto.css: -------------------------------------------------------------------------------- 1 | .goto-form { 2 | position: absolute; 3 | z-index: 3; 4 | bottom: 10px; 5 | left: 50%; 6 | height: 1.75em; 7 | margin: 0 0 0 -9.125em; 8 | line-height: 1.75em; 9 | padding: 0.625em; 10 | display: none; 11 | background: #ccc; 12 | overflow: hidden; 13 | border-radius: 10px; 14 | } 15 | .goto-form label { 16 | font-weight: bold; 17 | } 18 | .goto-form label, .goto-form input { 19 | display: inline-block; 20 | font-family: inherit; 21 | } 22 | .deck-goto .goto-form { 23 | display: block; 24 | } 25 | 26 | #goto-slide { 27 | width: 8.375em; 28 | margin: 0 0.625em; 29 | height: 1.4375em; 30 | } 31 | 32 | @media print { 33 | .goto-form, #goto-slide { 34 | display: none; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /deck.js/extensions/goto/deck.goto.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | 6 | 7 |
-------------------------------------------------------------------------------- /deck.js/extensions/goto/deck.goto.js: -------------------------------------------------------------------------------- 1 | /*! 2 | Deck JS - deck.goto 3 | Copyright (c) 2011-2014 Caleb Troughton 4 | Dual licensed under the MIT license. 5 | https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt 6 | */ 7 | 8 | /* 9 | This module adds the necessary methods and key bindings to show and hide a form 10 | for jumping to any slide number/id in the deck (and processes that form 11 | accordingly). The form-showing state is indicated by the presence of a class on 12 | the deck container. 13 | */ 14 | (function($, undefined) { 15 | var $document = $(document); 16 | var rootCounter; 17 | 18 | var bindKeyEvents = function() { 19 | $document.unbind('keydown.deckgoto'); 20 | $document.bind('keydown.deckgoto', function(event) { 21 | var key = $.deck('getOptions').keys.goto; 22 | if (event.which === key || $.inArray(event.which, key) > -1) { 23 | event.preventDefault(); 24 | $.deck('toggleGoTo'); 25 | } 26 | }); 27 | }; 28 | 29 | var populateDatalist = function() { 30 | var options = $.deck('getOptions'); 31 | var $datalist = $(options.selectors.gotoDatalist); 32 | 33 | $.each($.deck('getSlides'), function(i, $slide) { 34 | var id = $slide.attr('id'); 35 | if (id) { 36 | $datalist.append('