├── .gitignore ├── favicon.ico ├── img ├── dot.png ├── dotTexture.png └── X.svg ├── pater ├── TLD.png └── pater.css ├── fonts └── nexa_boldfree_macroman │ ├── Nexa_Free_Bold-webfont.eot │ ├── Nexa_Free_Bold-webfont.ttf │ ├── Nexa_Free_Bold-webfont.woff │ ├── Nexa_Free_Bold-webfont.woff2 │ ├── specimen_files │ ├── easytabs.js │ ├── grid_12-825-55-15.css │ └── specimen_stylesheet.css │ ├── stylesheet.css │ └── Nexa_Free_Bold-demo.html ├── css ├── demo5.css ├── demo1.css ├── demo3.css ├── demo6.css ├── demo2.css ├── demo4.css └── base.css ├── js ├── demo.js ├── demo3.js ├── demo6.js ├── demo5.js ├── demo4.js ├── demo2.js ├── demo1.js ├── perlin.js └── OrbitControls.js ├── README.md ├── index6.html ├── index3.html ├── index4.html ├── index5.html ├── index2.html └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mamboleoo/DecorativeBackgrounds/HEAD/favicon.ico -------------------------------------------------------------------------------- /img/dot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mamboleoo/DecorativeBackgrounds/HEAD/img/dot.png -------------------------------------------------------------------------------- /pater/TLD.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mamboleoo/DecorativeBackgrounds/HEAD/pater/TLD.png -------------------------------------------------------------------------------- /img/dotTexture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mamboleoo/DecorativeBackgrounds/HEAD/img/dotTexture.png -------------------------------------------------------------------------------- /fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mamboleoo/DecorativeBackgrounds/HEAD/fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.eot -------------------------------------------------------------------------------- /fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mamboleoo/DecorativeBackgrounds/HEAD/fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.ttf -------------------------------------------------------------------------------- /fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mamboleoo/DecorativeBackgrounds/HEAD/fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.woff -------------------------------------------------------------------------------- /fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mamboleoo/DecorativeBackgrounds/HEAD/fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.woff2 -------------------------------------------------------------------------------- /img/X.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | X 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /css/demo5.css: -------------------------------------------------------------------------------- 1 | .demo-5 { 2 | --color-text: #fff; 3 | --color-bg: #0F1617; 4 | --color-link: #4dc4a8; 5 | --color-link-hover: #333; 6 | --color-info: #ac1122; 7 | --color-title: #fff; 8 | --color-subtitle: #fff; 9 | --color-subtitle-bg: #4dc4a8; 10 | } 11 | 12 | .content__title { 13 | font-size: 10vw; 14 | font-weight: normal; 15 | color: var(--color-title); 16 | text-align: center; 17 | margin: 0; 18 | pointer-events: none; 19 | } 20 | 21 | .content__subtitle { 22 | font-size: 1.25em; 23 | background: var(--color-subtitle-bg); 24 | color: var(--color-subtitle); 25 | padding: 0.45em 0.5em; 26 | line-height: 1; 27 | margin: 0; 28 | letter-spacing: 0.5em; 29 | text-indent: 0.5em; 30 | font-weight: bold; 31 | text-transform: uppercase; 32 | } 33 | 34 | @media screen and (max-width: 55em) { 35 | .content__title { 36 | font-size: 3.5em; 37 | } 38 | .content__subtitle { 39 | font-size: 0.85em; 40 | } 41 | } -------------------------------------------------------------------------------- /css/demo1.css: -------------------------------------------------------------------------------- 1 | .demo-1 { 2 | --color-text: #fff; 3 | --color-bg: #000; 4 | --color-link: #fff; 5 | --color-link-hover: #ac1122; 6 | --color-info: #ac1122; 7 | --color-title: #fff; 8 | --color-subtitle: #fff; 9 | --color-subtitle-bg: #ac1122; 10 | } 11 | 12 | .content__title { 13 | font-family: 'Playfair Display', serif; 14 | font-size: 10vw; 15 | font-weight: normal; 16 | color: var(--color-title); 17 | text-align: center; 18 | margin: 0; 19 | pointer-events: none; 20 | } 21 | 22 | .content__subtitle { 23 | font-size: 1.25em; 24 | background: var(--color-subtitle-bg); 25 | color: var(--color-subtitle); 26 | padding: 0.45em 0.5em; 27 | line-height: 1; 28 | margin: 0; 29 | letter-spacing: 0.5em; 30 | text-indent: 0.5em; 31 | font-weight: bold; 32 | text-transform: uppercase; 33 | } 34 | 35 | @media screen and (max-width: 55em) { 36 | .content__title { 37 | font-size: 3em; 38 | } 39 | .content__subtitle { 40 | font-size: 0.85em; 41 | } 42 | } -------------------------------------------------------------------------------- /css/demo3.css: -------------------------------------------------------------------------------- 1 | .demo-3 { 2 | --color-text: #fff; 3 | --color-bg: #A9E7DA; 4 | --color-link: #523bdc; 5 | --color-link-hover: #fff; 6 | --color-title: #fff; 7 | } 8 | 9 | .content__title { 10 | font-family: 'Poppins', sans-serif; 11 | letter-spacing: -0.025em; 12 | font-size: 7vw; 13 | color: var(--color-title); 14 | line-height: 1; 15 | margin: 0; 16 | position: relative; 17 | } 18 | 19 | .content__title::before, 20 | .content__title::after { 21 | content: ''; 22 | position: absolute; 23 | width: 100px; 24 | height: 200px; 25 | background: url(../img/dot.png); 26 | background-size: 25px; 27 | opacity: 0.4; 28 | } 29 | 30 | .content__title::before { 31 | top: 120%; 32 | right: 81%; 33 | } 34 | 35 | .content__title::after { 36 | bottom: 120%; 37 | left: 81%; 38 | } 39 | 40 | @media screen and (max-width: 55em) { 41 | .content__title::before, 42 | .content__title::after { 43 | width: 50px; 44 | height: 100px; 45 | background-size: 12px; 46 | } 47 | } -------------------------------------------------------------------------------- /fonts/nexa_boldfree_macroman/specimen_files/easytabs.js: -------------------------------------------------------------------------------- 1 | (function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} 2 | if(typeof param.defaultContent=="number") 3 | {var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} 4 | $(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} 5 | function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") 6 | {$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} 7 | $(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); -------------------------------------------------------------------------------- /js/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * demo.js 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2017, Codrops 9 | * http://www.codrops.com 10 | */ 11 | { 12 | setTimeout(() => document.body.classList.add('render'), 60); 13 | const navdemos = Array.from(document.querySelectorAll('nav.demos > .demo')); 14 | const total = navdemos.length; 15 | const current = navdemos.findIndex(el => el.classList.contains('demo--current')); 16 | const navigate = (linkEl) => { 17 | document.body.classList.remove('render'); 18 | document.body.addEventListener('transitionend', () => window.location = linkEl.href); 19 | }; 20 | navdemos.forEach(link => link.addEventListener('click', (ev) => { 21 | ev.preventDefault(); 22 | navigate(ev.target); 23 | })); 24 | document.addEventListener('keydown', (ev) => { 25 | const keyCode = ev.keyCode || ev.which; 26 | let linkEl; 27 | if ( keyCode === 37 ) { 28 | linkEl = current > 0 ? navdemos[current-1] : navdemos[total-1]; 29 | } 30 | else if ( keyCode === 39 ) { 31 | linkEl = current < total-1 ? navdemos[current+1] : navdemos[0]; 32 | } 33 | else { 34 | return false; 35 | } 36 | navigate(linkEl); 37 | }); 38 | } 39 | -------------------------------------------------------------------------------- /css/demo6.css: -------------------------------------------------------------------------------- 1 | .demo-6 { 2 | --color-text: #fff; 3 | --color-bg: #191919; 4 | --color-link: #3F51B5; 5 | --color-link-hover: #ffffff; 6 | --color-title: #fff; 7 | --color-subtitle: #fff; 8 | } 9 | 10 | .content__title { 11 | font-family: 'Vidaloka', serif; 12 | font-size: 10vw; 13 | font-weight: normal; 14 | color: var(--color-title); 15 | text-align: center; 16 | margin: 0; 17 | pointer-events: none; 18 | line-height: 1; 19 | } 20 | 21 | .content__subtitle { 22 | font-size: 1.25em; 23 | color: var(--color-subtitle); 24 | padding: 0 0.75em; 25 | margin: 0; 26 | letter-spacing: 0.5em; 27 | text-indent: 0.5em; 28 | font-weight: bold; 29 | text-transform: uppercase; 30 | position: relative; 31 | } 32 | 33 | .content__subtitle::before, 34 | .content__subtitle::after { 35 | content: ''; 36 | position: absolute; 37 | top: 50%; 38 | height: 1px; 39 | background: var(--color-subtitle); 40 | width: 20%; 41 | } 42 | 43 | .content__subtitle::before { 44 | right: 100%; 45 | } 46 | 47 | .content__subtitle::after { 48 | left: 100%; 49 | } 50 | 51 | @media screen and (max-width: 55em) { 52 | .content__title { 53 | font-size: 3.75em; 54 | } 55 | .content__subtitle { 56 | font-size: 0.85em; 57 | } 58 | .content__subtitle::before, 59 | .content__subtitle::after { 60 | width: 10%; 61 | } 62 | } -------------------------------------------------------------------------------- /fonts/nexa_boldfree_macroman/stylesheet.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Web Fonts from fontspring.com 3 | * 4 | * All OpenType features and all extended glyphs have been removed. 5 | * Fully installable fonts can be purchased at http://www.fontspring.com 6 | * 7 | * The fonts included in this stylesheet are subject to the End User License you purchased 8 | * from Fontspring. The fonts are protected under domestic and international trademark and 9 | * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or 10 | * distributing this font software. 11 | * 12 | * (c) 2010-2016 Fontspring 13 | * 14 | * 15 | * 16 | * 17 | * The fonts included are copyrighted by the vendor listed below. 18 | * 19 | * Vendor: Fontfabric 20 | * License URL: https://www.fontspring.com/licenses/fontfabric/webfont 21 | * 22 | * 23 | */ 24 | 25 | @font-face { 26 | font-family: 'nexa_boldregular'; 27 | src: url('Nexa_Free_Bold-webfont.eot'); 28 | src: url('Nexa_Free_Bold-webfont.eot?#iefix') format('embedded-opentype'), 29 | url('Nexa_Free_Bold-webfont.woff2') format('woff2'), 30 | url('Nexa_Free_Bold-webfont.woff') format('woff'), 31 | url('Nexa_Free_Bold-webfont.ttf') format('truetype'), 32 | url('Nexa_Free_Bold-webfont.svg#nexa_boldregular') format('svg'); 33 | font-weight: normal; 34 | font-style: normal; 35 | 36 | } 37 | 38 | -------------------------------------------------------------------------------- /css/demo2.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'nexa_boldregular'; 3 | font-weight: bold; 4 | font-style: normal; 5 | src: url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.eot'); 6 | src: url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.woff2') format('woff2'), url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.woff') format('woff'), url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.ttf') format('truetype'), url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.svg#nexa_boldregular') format('svg'); 7 | } 8 | 9 | .demo-2 { 10 | --color-text: #fff; 11 | --color-bg: #59c384; 12 | --color-link: #0f2e5c; 13 | --color-link-hover: #fff; 14 | --color-title: #fff; 15 | --color-subtitle: #0f2e5c; 16 | } 17 | 18 | .content__title { 19 | font-size: 7vw; 20 | font-weight: 700; 21 | color: var(--color-title); 22 | text-align: center; 23 | margin: 0; 24 | text-transform: uppercase; 25 | letter-spacing: 0.15em; 26 | font-family: 'nexa_boldregular', sans-serif; 27 | } 28 | 29 | .content__subtitle { 30 | color: var(--color-subtitle); 31 | padding: 0 0.75em; 32 | margin: 0; 33 | letter-spacing: 0.5em; 34 | text-indent: 0.5em; 35 | font-weight: 700; 36 | text-transform: uppercase; 37 | } 38 | 39 | @media screen and (max-width: 55em) { 40 | .content--fixed { 41 | background: #acb2b9; 42 | } 43 | .content__title { 44 | font-size: 2em; 45 | } 46 | .content__subtitle { 47 | font-size: 0.85em; 48 | } 49 | } -------------------------------------------------------------------------------- /css/demo4.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'nexa_boldregular'; 3 | font-weight: bold; 4 | font-style: normal; 5 | src: url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.eot'); 6 | src: url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.woff2') format('woff2'), url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.woff') format('woff'), url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.ttf') format('truetype'), url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.svg#nexa_boldregular') format('svg'); 7 | } 8 | 9 | .demo-4 { 10 | --color-text: #fff; 11 | --color-bg: #101010; 12 | --color-link: #fe0e55; 13 | --color-link-hover: #fff; 14 | --color-info: #333; 15 | --color-title: #fff; 16 | --color-subtitle: #fff; 17 | --color-subtitle-bg: #fe0e55; 18 | background: #101010 url(../img/X.svg) no-repeat 50% 50%; 19 | background-size: 50%; 20 | } 21 | 22 | .content__title { 23 | font-family: 'nexa_boldregular', sans-serif; 24 | font-size: 10vw; 25 | font-weight: normal; 26 | color: var(--color-title); 27 | text-align: center; 28 | margin: 0; 29 | pointer-events: none; 30 | } 31 | 32 | .content__subtitle { 33 | font-size: 1.25em; 34 | color: var(--color-subtitle); 35 | padding: 0 0.75em; 36 | margin: 0; 37 | letter-spacing: 0.5em; 38 | text-indent: 0.5em; 39 | text-align: center; 40 | font-weight: bold; 41 | text-transform: uppercase; 42 | } 43 | 44 | @media screen and (max-width: 55em) { 45 | .content__title { 46 | font-size: 3.5em; 47 | } 48 | .content__subtitle { 49 | font-size: 0.85em; 50 | } 51 | .demo-4 { 52 | background-position: 50% 20em; 53 | } 54 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Decorative WebGL Backgrounds 2 | 3 | A collection of decorative shapes displayed as backgrounds using WebGL. The shapes are created with Three.js and animated with the TweenMax library. By Louis Hoebregts. 4 | 5 | ![Decorative WebGL Backgrounds](https://tympanus.net/codrops/wp-content/uploads/2017/11/DecorativeWebGLBackgrounds_Featured.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=33168) 8 | 9 | [Demo](http://tympanus.net/Development/DecorativeBackgrounds/) 10 | 11 | This demo is kindly sponsored by [we.design: Snag the hottest new domain name for designers](http://go.thoughtleaders.io/TLDcodrops211117) 12 | 13 | ## Credits 14 | 15 | - [three.js](https://threejs.org/) 16 | - [TweenMax](https://greensock.com/tweenmax) 17 | - [NOISE!](https://github.com/josephg/noisejs) by Seph Gentle 18 | - [Nexa Bold font](https://www.fontspring.com/fonts/fontfabric/nexa/nexa-bold-free) by Fontfabric 19 | 20 | ## License 21 | This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used. 22 | 23 | ## Misc 24 | 25 | Follow Louis: [Twitter](https://twitter.com/Mamboleoo), [Codepen](https://codepen.io/Mamboleoo/), [LinkedIn](https://www.linkedin.com/in/mamboleoo/), [GitHub](https://github.com/mamboleoo) 26 | 27 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/) 28 | 29 | [© Codrops 2017](http://www.codrops.com) 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /pater/pater.css: -------------------------------------------------------------------------------- 1 | .pater { 2 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important; 3 | position: fixed; 4 | z-index: 1000; 5 | right: 0; 6 | bottom: 0; 7 | display: grid; 8 | width: 100%; 9 | padding: 1em 0; 10 | text-align: left; 11 | color: #fff; 12 | background: #000; 13 | } 14 | 15 | .pater:hover, .pater:focus { 16 | color: #fff; 17 | } 18 | 19 | .pater::before { 20 | content: 'Our Sponsor'; 21 | font-size: 0.75em; 22 | display: inline-block; 23 | padding: 0 0 5px 10px; 24 | vertical-align: middle; 25 | z-index: 11; 26 | } 27 | 28 | .pater__img { 29 | display: none; 30 | background-image: url(TLD.png); 31 | background-size: cover; 32 | } 33 | 34 | .pater__title { 35 | font-size: 0.85em; 36 | font-weight: normal; 37 | font-weight: bold; 38 | margin: 0; 39 | } 40 | 41 | .pater__title, 42 | .pater__description { 43 | padding: 10px 0 0 10px; 44 | } 45 | 46 | .pater__description { 47 | font-size: 0.85em; 48 | display: none; 49 | margin: 0; 50 | opacity: 0; 51 | } 52 | 53 | @media screen and (min-width: 60em) { 54 | .pater { 55 | top: 0; 56 | right: 0; 57 | bottom: auto; 58 | width: 220px; 59 | margin: 0 1.5em 0 0; 60 | padding: 0; 61 | } 62 | .pater__img { 63 | display: block; 64 | width: 100%; 65 | position: relative; 66 | z-index: 10; 67 | } 68 | .pater::before { 69 | display: block; 70 | padding: 8px; 71 | position: absolute; 72 | color: #aaa; 73 | } 74 | .pater__description { 75 | display: block; 76 | position: absolute; 77 | top: 150px; 78 | padding: 1em; 79 | opacity: 1; 80 | transform: translate3d(0,-100%,0); 81 | transition: transform 0.3s; 82 | } 83 | .pater:hover .pater__description { 84 | transform: translate3d(0,0,0); 85 | } 86 | .pater__title { 87 | padding: 1em; 88 | font-size: 0.85em; 89 | font-weight: 700; 90 | transition: opacity 0.5s; 91 | } 92 | .pater:hover .pater__title { 93 | opacity: 0; 94 | } 95 | .pater__description, 96 | .pater__title { 97 | background: var(--bg-ad); 98 | } 99 | .demo-1 { --bg-ad: #171616; } 100 | .demo-2 { --bg-ad: #0f2e5c; } 101 | .demo-3 { --bg-ad: #4a8c98; } 102 | .demo-4 { --bg-ad: #000; } 103 | .demo-5 { --bg-ad: #000; } 104 | .demo-6 { --bg-ad: #171616; } 105 | } 106 | -------------------------------------------------------------------------------- /js/demo3.js: -------------------------------------------------------------------------------- 1 | var canvas = document.querySelector('#scene'); 2 | var width = canvas.offsetWidth, 3 | height = canvas.offsetHeight; 4 | 5 | var renderer = new THREE.WebGLRenderer({ 6 | canvas: canvas, 7 | antialias: true 8 | }); 9 | renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1); 10 | renderer.setSize(width, height); 11 | renderer.setClearColor(0xA9E7DA); 12 | 13 | var scene = new THREE.Scene(); 14 | 15 | var camera = new THREE.PerspectiveCamera(100, width / height, 0.1, 10000); 16 | camera.position.set(120, 0, 300); 17 | 18 | var light = new THREE.HemisphereLight(0xffffff, 0x0C056D, 0.6); 19 | scene.add(light); 20 | 21 | var light = new THREE.DirectionalLight(0x590D82, 0.5); 22 | light.position.set(200, 300, 400); 23 | scene.add(light); 24 | var light2 = light.clone(); 25 | light2.position.set(-200, 300, 400); 26 | scene.add(light2); 27 | 28 | var geometry = new THREE.IcosahedronGeometry(120, 4); 29 | for(var i = 0; i < geometry.vertices.length; i++) { 30 | var vector = geometry.vertices[i]; 31 | vector._o = vector.clone(); 32 | } 33 | var material = new THREE.MeshPhongMaterial({ 34 | emissive: 0x23f660, 35 | emissiveIntensity: 0.4, 36 | shininess: 0 37 | }); 38 | var shape = new THREE.Mesh(geometry, material); 39 | scene.add(shape); 40 | 41 | function updateVertices (a) { 42 | for(var i = 0; i < geometry.vertices.length; i++) { 43 | var vector = geometry.vertices[i]; 44 | vector.copy(vector._o); 45 | var perlin = noise.simplex3( 46 | (vector.x * 0.006) + (a * 0.0002), 47 | (vector.y * 0.006) + (a * 0.0003), 48 | (vector.z * 0.006) 49 | ); 50 | var ratio = ((perlin*0.4 * (mouse.y+0.1)) + 0.8); 51 | vector.multiplyScalar(ratio); 52 | } 53 | geometry.verticesNeedUpdate = true; 54 | } 55 | 56 | function render(a) { 57 | requestAnimationFrame(render); 58 | updateVertices(a); 59 | renderer.render(scene, camera); 60 | } 61 | 62 | function onResize() { 63 | canvas.style.width = ''; 64 | canvas.style.height = ''; 65 | width = canvas.offsetWidth; 66 | height = canvas.offsetHeight; 67 | camera.aspect = width / height; 68 | camera.updateProjectionMatrix(); 69 | renderer.setSize(width, height); 70 | } 71 | 72 | var mouse = new THREE.Vector2(0.8, 0.5); 73 | function onMouseMove(e) { 74 | TweenMax.to(mouse, 0.8, { 75 | y: (e.clientY / height), 76 | x : (e.clientX / width), 77 | ease: Power1.easeOut 78 | }); 79 | } 80 | 81 | requestAnimationFrame(render); 82 | window.addEventListener("mousemove", onMouseMove); 83 | var resizeTm; 84 | window.addEventListener("resize", function(){ 85 | resizeTm = clearTimeout(resizeTm); 86 | resizeTm = setTimeout(onResize, 200); 87 | }); -------------------------------------------------------------------------------- /js/demo6.js: -------------------------------------------------------------------------------- 1 | var canvas = document.querySelector('#scene'); 2 | var width = canvas.offsetWidth, 3 | height = canvas.offsetHeight; 4 | 5 | var renderer = new THREE.WebGLRenderer({ 6 | canvas: canvas, 7 | antialias: true 8 | }); 9 | renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1); 10 | renderer.setSize(width, height); 11 | renderer.setClearColor(0x191919); 12 | 13 | var scene = new THREE.Scene(); 14 | 15 | var camera = new THREE.PerspectiveCamera(40, width / height, 0.1, 1000); 16 | camera.position.set(0, 0, 280); 17 | 18 | var sphere = new THREE.Group(); 19 | scene.add(sphere); 20 | var mat1 = new THREE.LineBasicMaterial({ 21 | color:0x4a4a4a 22 | }); 23 | var mat2 = new THREE.LineBasicMaterial({ 24 | color:0x3F51B5 25 | }); 26 | 27 | var radius = 100; 28 | var lines = 50; 29 | var dots = 50; 30 | for(var i = 0; i < lines; i++) { 31 | var geometry = new THREE.Geometry(); 32 | var line = new THREE.Line(this.geometry, (Math.random()>0.2)?mat1:mat2); 33 | line.speed = Math.random() * 300 + 250; 34 | line.wave = Math.random(); 35 | line.radius = Math.floor(radius + (Math.random()-0.5) * (radius*0.2)); 36 | for(var j=0;j 1 ? 2 : 1); 10 | renderer.setSize(width, height); 11 | renderer.setClearColor(0x0F1617); 12 | 13 | var scene = new THREE.Scene(); 14 | 15 | var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000); 16 | camera.position.set(0, 0, 100); 17 | 18 | var geometry = new THREE.SphereGeometry(30, 4, 30); 19 | var geometry = new THREE.BoxGeometry(49, 49, 49, 7, 7, 7); 20 | for(var i=0;i 1 ? 2 : 1); 11 | renderer.setSize(width, height); 12 | renderer.setClearColor(0x000000,0); 13 | 14 | var scene = new THREE.Scene(); 15 | 16 | var camera = new THREE.PerspectiveCamera(40, width / height, 0.1, 1000); 17 | camera.position.set(0, 0, 350); 18 | 19 | var sphere = new THREE.Group(); 20 | scene.add(sphere); 21 | var material = new THREE.LineBasicMaterial({ 22 | color: 0xfe0e55 23 | }); 24 | var linesAmount = 18; 25 | var radius = 100; 26 | var verticesAmount = 50; 27 | for(var j=0;j radius*2) { 47 | line.geometry.y = 0; 48 | } 49 | var radiusHeight = Math.sqrt(line.geometry.y * (2*radius-line.geometry.y)); 50 | for(var i=0;i<=verticesAmount;i++) { 51 | var vector = line.geometry.vertices[i]; 52 | var ratio = noise.simplex3(vector.x*0.009, vector.z*0.009 + a*0.0006, line.geometry.y*0.009) * 15; 53 | vector.copy(vector._o); 54 | vector.multiplyScalar(radiusHeight + ratio); 55 | vector.y = line.geometry.y - radius; 56 | } 57 | line.geometry.verticesNeedUpdate = true; 58 | } 59 | } 60 | 61 | function render(a) { 62 | requestAnimationFrame(render); 63 | updateVertices(a); 64 | renderer.render(scene, camera); 65 | } 66 | 67 | function onResize() { 68 | canvas.style.width = ''; 69 | canvas.style.height = ''; 70 | width = canvas.offsetWidth; 71 | height = canvas.offsetHeight; 72 | camera.aspect = width / height; 73 | camera.updateProjectionMatrix(); 74 | renderer.setSize(width, height); 75 | } 76 | 77 | var mouse = new THREE.Vector2(0.8, 0.5); 78 | function onMouseMove(e) { 79 | mouse.y = e.clientY / window.innerHeight; 80 | TweenMax.to(sphere.rotation, 2, { 81 | x : (mouse.y * 1), 82 | ease:Power1.easeOut 83 | }); 84 | } 85 | 86 | requestAnimationFrame(render); 87 | window.addEventListener("mousemove", onMouseMove); 88 | var resizeTm; 89 | window.addEventListener("resize", function(){ 90 | resizeTm = clearTimeout(resizeTm); 91 | resizeTm = setTimeout(onResize, 200); 92 | }); -------------------------------------------------------------------------------- /js/demo2.js: -------------------------------------------------------------------------------- 1 | var canvas = document.querySelector('#scene'); 2 | var width = canvas.offsetWidth, 3 | height = canvas.offsetHeight; 4 | 5 | var renderer = new THREE.WebGLRenderer({ 6 | canvas: canvas, 7 | antialias: true 8 | }); 9 | renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1); 10 | renderer.setSize(width, height); 11 | renderer.setClearColor(0x59c384); 12 | 13 | var scene = new THREE.Scene(); 14 | 15 | var camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 2000); 16 | camera.position.set(0, 0, 80); 17 | 18 | var loader = new THREE.TextureLoader(); 19 | loader.crossOrigin = "Anonymous"; 20 | var dotTexture = loader.load('img/dotTexture.png'); 21 | 22 | var radius = 50; 23 | var sphereGeom = new THREE.IcosahedronGeometry(radius, 5); 24 | var dotsGeom = new THREE.Geometry(); 25 | var bufferDotsGeom = new THREE.BufferGeometry(); 26 | var positions = new Float32Array(sphereGeom.vertices.length * 3); 27 | for (var i = 0;i 2 | 3 | 4 | 5 | 6 | Decorative WebGL Backgrounds | Demo 6 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 40 |
41 |
42 |
43 |
44 | 45 | 46 |
47 |

Decorative WebGL Backgrounds

48 |
49 | 50 | 59 | 60 | TLD 61 |

​Snag the hottest new domain name for designers

62 |

.design domains were just released and some of the best ones are still available. They normally cost $35 but Codrops readers get them now for FREE!

63 | 64 |
65 |
66 | 67 |
68 |

Hawking

69 |

A Biography

70 |
71 |
72 |
73 | 74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Decorative WebGL Backgrounds | Demo 3 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 40 |
41 |
42 |
43 |
44 | 45 | 46 |
47 |

Decorative WebGL Backgrounds

48 |
49 | 50 | 59 | 60 | TLD 61 |

​Snag the hottest new domain name for designers

62 |

.design domains were just released and some of the best ones are still available. They normally cost $35 but Codrops readers get them now for FREE!

63 | 64 |
65 |
66 | 67 |
68 |

Quantum

69 |
70 |
71 |
72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Decorative WebGL Backgrounds | Demo 4 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 40 |
41 |
42 |
43 |
44 | 45 | 46 |
47 |

Decorative WebGL Backgrounds

48 |
49 | 50 | 59 | 60 | TLD 61 |

​Snag the hottest new domain name for designers

62 |

.design domains were just released and some of the best ones are still available. They normally cost $35 but Codrops readers get them now for FREE!

63 | 64 |
65 |
66 | 67 |
68 |

Physics

69 |

Quantum Mechanics

70 |
71 |
72 |
73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /index5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Decorative WebGL Backgrounds | Demo 5 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 40 |
41 |
42 |
43 |
44 | 45 | 46 |
47 |

Decorative WebGL Backgrounds

48 |
49 | 50 | 59 | 60 | TLD 61 |

​Snag the hottest new domain name for designers

62 |

.design domains were just released and some of the best ones are still available. They normally cost $35 but Codrops readers get them now for FREE!

63 | 64 |
65 |
66 | 67 |
68 |

Heuristics

69 |

Machine Learning

70 |
71 |
72 |
73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Decorative WebGL Backgrounds | Demo 2 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 40 |
41 |
42 |
43 |
44 | 45 | 46 |
47 |

Decorative WebGL Backgrounds

48 |
49 | 50 | 59 | 60 | TLD 61 |

​Snag the hottest new domain name for designers

62 |

.design domains were just released and some of the best ones are still available. They normally cost $35 but Codrops readers get them now for FREE!

63 | 64 |
65 |
66 | 67 | 76 | 86 |
87 |

Spacetime

88 |

Warp Drive

89 |
90 |
91 |
92 | 93 | 94 | 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /js/demo1.js: -------------------------------------------------------------------------------- 1 | var canvas = document.querySelector('canvas'); 2 | var width = canvas.offsetWidth, 3 | height = canvas.offsetHeight; 4 | 5 | var colors = [ 6 | new THREE.Color(0xac1122), 7 | new THREE.Color(0x96789f), 8 | new THREE.Color(0x535353)]; 9 | 10 | var renderer = new THREE.WebGLRenderer({ 11 | canvas: canvas, 12 | antialias: true 13 | }); 14 | renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1); 15 | renderer.setSize(width, height); 16 | renderer.setClearColor(0x000000); 17 | 18 | var scene = new THREE.Scene(); 19 | 20 | var raycaster = new THREE.Raycaster(); 21 | raycaster.params.Points.threshold = 6; 22 | 23 | 24 | var camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 2000); 25 | camera.position.set(0, 0, 350); 26 | 27 | var galaxy = new THREE.Group(); 28 | scene.add(galaxy); 29 | 30 | // Create dots 31 | var loader = new THREE.TextureLoader(); 32 | loader.crossOrigin = ""; 33 | var dotTexture = loader.load("img/dotTexture.png"); 34 | var dotsAmount = 3000; 35 | var dotsGeometry = new THREE.Geometry(); 36 | var positions = new Float32Array(dotsAmount * 3); 37 | 38 | var sizes = new Float32Array(dotsAmount); 39 | var colorsAttribute = new Float32Array(dotsAmount * 3); 40 | for (var i = 0; i < dotsAmount; i++) { 41 | var vector = new THREE.Vector3(); 42 | 43 | vector.color = Math.floor(Math.random() * colors.length); 44 | vector.theta = Math.random() * Math.PI * 2; 45 | vector.phi = 46 | (1 - Math.sqrt(Math.random())) * 47 | Math.PI / 48 | 2 * 49 | (Math.random() > 0.5 ? 1 : -1); 50 | 51 | vector.x = Math.cos(vector.theta) * Math.cos(vector.phi); 52 | vector.y = Math.sin(vector.phi); 53 | vector.z = Math.sin(vector.theta) * Math.cos(vector.phi); 54 | vector.multiplyScalar(120 + (Math.random() - 0.5) * 5); 55 | vector.scaleX = 5; 56 | 57 | if (Math.random() > 0.5) { 58 | moveDot(vector, i); 59 | } 60 | dotsGeometry.vertices.push(vector); 61 | vector.toArray(positions, i * 3); 62 | colors[vector.color].toArray(colorsAttribute, i*3); 63 | sizes[i] = 5; 64 | } 65 | 66 | function moveDot(vector, index) { 67 | var tempVector = vector.clone(); 68 | tempVector.multiplyScalar((Math.random() - 0.5) * 0.2 + 1); 69 | TweenMax.to(vector, Math.random() * 3 + 3, { 70 | x: tempVector.x, 71 | y: tempVector.y, 72 | z: tempVector.z, 73 | yoyo: true, 74 | repeat: -1, 75 | delay: -Math.random() * 3, 76 | ease: Power0.easeNone, 77 | onUpdate: function () { 78 | attributePositions.array[index*3] = vector.x; 79 | attributePositions.array[index*3+1] = vector.y; 80 | attributePositions.array[index*3+2] = vector.z; 81 | } 82 | }); 83 | } 84 | 85 | var bufferWrapGeom = new THREE.BufferGeometry(); 86 | var attributePositions = new THREE.BufferAttribute(positions, 3); 87 | bufferWrapGeom.addAttribute('position', attributePositions); 88 | var attributeSizes = new THREE.BufferAttribute(sizes, 1); 89 | bufferWrapGeom.addAttribute('size', attributeSizes); 90 | var attributeColors = new THREE.BufferAttribute(colorsAttribute, 3); 91 | bufferWrapGeom.addAttribute('color', attributeColors); 92 | var shaderMaterial = new THREE.ShaderMaterial({ 93 | uniforms: { 94 | texture: { 95 | value: dotTexture 96 | } 97 | }, 98 | vertexShader: document.getElementById("wrapVertexShader").textContent, 99 | fragmentShader: document.getElementById("wrapFragmentShader").textContent, 100 | transparent:true 101 | }); 102 | var wrap = new THREE.Points(bufferWrapGeom, shaderMaterial); 103 | scene.add(wrap); 104 | 105 | // Create white segments 106 | var segmentsGeom = new THREE.Geometry(); 107 | var segmentsMat = new THREE.LineBasicMaterial({ 108 | color: 0xffffff, 109 | transparent: true, 110 | opacity: 0.3, 111 | vertexColors: THREE.VertexColors 112 | }); 113 | for (i = dotsGeometry.vertices.length - 1; i >= 0; i--) { 114 | vector = dotsGeometry.vertices[i]; 115 | for (var j = dotsGeometry.vertices.length - 1; j >= 0; j--) { 116 | if (i !== j && vector.distanceTo(dotsGeometry.vertices[j]) < 12) { 117 | segmentsGeom.vertices.push(vector); 118 | segmentsGeom.vertices.push(dotsGeometry.vertices[j]); 119 | segmentsGeom.colors.push(colors[vector.color]); 120 | segmentsGeom.colors.push(colors[vector.color]); 121 | } 122 | } 123 | } 124 | var segments = new THREE.LineSegments(segmentsGeom, segmentsMat); 125 | galaxy.add(segments); 126 | 127 | var hovered = []; 128 | var prevHovered = []; 129 | function render(a) { 130 | var i; 131 | dotsGeometry.verticesNeedUpdate = true; 132 | segmentsGeom.verticesNeedUpdate = true; 133 | 134 | raycaster.setFromCamera( mouse, camera ); 135 | var intersections = raycaster.intersectObjects([wrap]); 136 | hovered = []; 137 | if (intersections.length) { 138 | for(i = 0; i < intersections.length; i++) { 139 | var index = intersections[i].index; 140 | hovered.push(index); 141 | if (prevHovered.indexOf(index) === -1) { 142 | onDotHover(index); 143 | } 144 | } 145 | } 146 | for(i = 0; i < prevHovered.length; i++){ 147 | if(hovered.indexOf(prevHovered[i]) === -1){ 148 | mouseOut(prevHovered[i]); 149 | } 150 | } 151 | prevHovered = hovered.slice(0); 152 | attributeSizes.needsUpdate = true; 153 | attributePositions.needsUpdate = true; 154 | renderer.render(scene, camera); 155 | } 156 | 157 | function onDotHover(index) { 158 | dotsGeometry.vertices[index].tl = new TimelineMax(); 159 | dotsGeometry.vertices[index].tl.to(dotsGeometry.vertices[index], 1, { 160 | scaleX: 10, 161 | ease: Elastic.easeOut.config(2, 0.2), 162 | onUpdate: function() { 163 | attributeSizes.array[index] = dotsGeometry.vertices[index].scaleX; 164 | } 165 | }); 166 | } 167 | 168 | function mouseOut(index) { 169 | dotsGeometry.vertices[index].tl.to(dotsGeometry.vertices[index], 0.4, { 170 | scaleX: 5, 171 | ease: Power2.easeOut, 172 | onUpdate: function() { 173 | attributeSizes.array[index] = dotsGeometry.vertices[index].scaleX; 174 | } 175 | }); 176 | } 177 | 178 | function onResize() { 179 | canvas.style.width = ''; 180 | canvas.style.height = ''; 181 | width = canvas.offsetWidth; 182 | height = canvas.offsetHeight; 183 | camera.aspect = width / height; 184 | camera.updateProjectionMatrix(); 185 | renderer.setSize(width, height); 186 | } 187 | 188 | var mouse = new THREE.Vector2(-100,-100); 189 | function onMouseMove(e) { 190 | var canvasBounding = canvas.getBoundingClientRect(); 191 | mouse.x = ((e.clientX - canvasBounding.left) / width) * 2 - 1; 192 | mouse.y = -((e.clientY - canvasBounding.top) / height) * 2 + 1; 193 | } 194 | 195 | TweenMax.ticker.addEventListener("tick", render); 196 | window.addEventListener("mousemove", onMouseMove); 197 | var resizeTm; 198 | window.addEventListener("resize", function(){ 199 | resizeTm = clearTimeout(resizeTm); 200 | resizeTm = setTimeout(onResize, 200); 201 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Decorative WebGL Backgrounds | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 40 |
41 |
42 |
43 |
44 | 45 | 46 |
47 |

Decorative WebGL Backgrounds

48 |
49 | 50 | 59 | 60 | TLD 61 |

​Snag the hottest new domain name for designers

62 |

.design domains were just released and some of the best ones are still available. They normally cost $35 but Codrops readers get them now for FREE!

63 | 64 |
65 |
66 | 67 | 78 | 88 |
89 |

Information

90 |

Data Science

91 |
92 |
93 |
94 | 95 | 96 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} 2 | *, 3 | *::after, 4 | *::before { 5 | box-sizing: border-box; 6 | } 7 | 8 | html { 9 | background: #000; 10 | } 11 | 12 | body { 13 | font-family: 'Barlow', Helvetica, Arial, sans-serif; 14 | font-weight: 500; 15 | min-height: 100vh; 16 | color: #57585c; 17 | color: var(--color-text); 18 | background-color: #000; 19 | background-color: var(--color-bg); 20 | -webkit-font-smoothing: antialiased; 21 | -moz-osx-font-smoothing: grayscale; 22 | } 23 | 24 | /* Fade effect */ 25 | .js body { 26 | opacity: 0; 27 | transition: opacity 0.6s; 28 | } 29 | 30 | .js body.render { 31 | opacity: 1; 32 | } 33 | 34 | a { 35 | text-decoration: none; 36 | color: var(--color-link); 37 | outline: none; 38 | } 39 | 40 | a:hover, 41 | a:focus { 42 | color: var(--color-link-hover); 43 | outline: none; 44 | } 45 | 46 | .hidden { 47 | position: absolute; 48 | overflow: hidden; 49 | width: 0; 50 | height: 0; 51 | pointer-events: none; 52 | } 53 | 54 | .message { 55 | position: relative; 56 | z-index: 100; 57 | display: none; 58 | padding: 1em; 59 | text-align: center; 60 | color: var(--color-bg); 61 | background: var(--color-text); 62 | } 63 | 64 | /* Icons */ 65 | .icon { 66 | display: block; 67 | width: 1.5em; 68 | height: 1.5em; 69 | margin: 0 auto; 70 | fill: currentColor; 71 | } 72 | 73 | .icon--keyboard { 74 | display: none; 75 | } 76 | 77 | main { 78 | position: relative; 79 | width: 100%; 80 | } 81 | 82 | .content { 83 | position: relative; 84 | display: grid; 85 | justify-content: center; 86 | align-items: center; 87 | align-content: center; 88 | margin: 0 auto; 89 | min-height: 100vh; 90 | } 91 | 92 | .content--fixed { 93 | position: fixed; 94 | z-index: 10000; 95 | top: 0; 96 | left: 0; 97 | display: grid; 98 | align-content: space-between; 99 | width: 100%; 100 | max-width: none; 101 | min-height: 0; 102 | height: 100vh; 103 | padding: 1.5em; 104 | pointer-events: none; 105 | grid-template-columns: 50% 50%; 106 | grid-template-rows: auto auto 4em; 107 | grid-template-areas: 'header ...' 108 | '... ...' 109 | 'github demos'; 110 | } 111 | 112 | .content--fixed a { 113 | pointer-events: auto; 114 | } 115 | 116 | /* Header */ 117 | .codrops-header { 118 | position: relative; 119 | z-index: 100; 120 | display: flex; 121 | flex-direction: row; 122 | align-items: flex-start; 123 | align-items: center; 124 | align-self: start; 125 | grid-area: header; 126 | justify-self: start; 127 | } 128 | 129 | .codrops-header__title { 130 | font-size: 1em; 131 | font-weight: 500; 132 | margin: 0; 133 | padding: 0.75em 0; 134 | } 135 | 136 | .info { 137 | margin: 0 0 0 1.25em; 138 | color: var(--color-info); 139 | } 140 | 141 | .github { 142 | display: block; 143 | align-self: end; 144 | grid-area: github; 145 | justify-self: start; 146 | } 147 | 148 | .demos { 149 | position: relative; 150 | display: block; 151 | align-self: end; 152 | text-align: center; 153 | grid-area: demos; 154 | } 155 | 156 | .demo { 157 | margin: 0 0.15em; 158 | } 159 | 160 | .demo:hover, 161 | .demo:focus { 162 | opacity: 0.5; 163 | } 164 | 165 | .demo span { 166 | white-space: nowrap; 167 | text-transform: lowercase; 168 | pointer-events: none; 169 | } 170 | 171 | .demo span::before { 172 | content: '#'; 173 | } 174 | 175 | a.demo--current { 176 | pointer-events: none; 177 | color: var(--color-link-hover); 178 | } 179 | 180 | /* Top Navigation Style */ 181 | .codrops-links { 182 | position: relative; 183 | display: flex; 184 | justify-content: center; 185 | margin: 0 1em 0 0; 186 | text-align: center; 187 | white-space: nowrap; 188 | } 189 | 190 | .codrops-icon { 191 | display: inline-block; 192 | margin: 0.15em; 193 | padding: 0.25em; 194 | } 195 | 196 | /* Canvas positions */ 197 | .content__inner { 198 | grid-area: 1 / 1 / 1 / 1; 199 | position: relative; 200 | display: flex; 201 | flex-direction: column; 202 | align-items: center; 203 | justify-content: center; 204 | align-content: center; 205 | } 206 | 207 | .scene { 208 | position: absolute; 209 | } 210 | 211 | .scene--left { 212 | width: 100vmin; 213 | height: 100vmin; 214 | transform: translate3d(-50vmin,0,0); 215 | } 216 | 217 | .scene--full { 218 | width: 100%; 219 | height: 100vh; 220 | } 221 | 222 | .scene--up { 223 | height: 150vmin; 224 | width: 150vmin; 225 | top: -50vh; 226 | left: 50%; 227 | margin-left: -75vmin; 228 | } 229 | 230 | @media screen and (min-width: 55em) { 231 | .icon--keyboard { 232 | position: absolute; 233 | right: 0.55em; 234 | bottom: -30%; 235 | display: block; 236 | width: 54px; 237 | height: 46px; 238 | fill: var(--color-link); 239 | } 240 | .demos { 241 | display: flex; 242 | padding-right: 80px; 243 | justify-self: end; 244 | } 245 | .demo { 246 | display: block; 247 | width: 17px; 248 | height: 17px; 249 | margin: 0 4px; 250 | border-radius: 50%; 251 | background: var(--color-link); 252 | } 253 | a.demo--current { 254 | background: var(--color-link-hover); 255 | } 256 | .demo span { 257 | line-height: 1; 258 | position: absolute; 259 | right: 100%; 260 | display: none; 261 | margin: 0 1em 0 0; 262 | } 263 | .demo--current span { 264 | display: block; 265 | } 266 | } 267 | 268 | @media screen and (max-width: 55em) { 269 | .message { 270 | /* display: block; */ 271 | } 272 | .content { 273 | flex-direction: column; 274 | height: auto; 275 | } 276 | .content--fixed { 277 | position: relative; 278 | z-index: 1000; 279 | display: block; 280 | padding: 0.85em; 281 | } 282 | .content:not(.content--fixed) { 283 | margin-bottom: 6em; 284 | } 285 | .codrops-header { 286 | flex-direction: column; 287 | align-items: center; 288 | } 289 | .codrops-header__title { 290 | font-weight: bold; 291 | padding-bottom: 0.25em; 292 | text-align: center; 293 | } 294 | .info { 295 | margin: 0; 296 | } 297 | .github { 298 | display: block; 299 | margin: 1em auto; 300 | } 301 | .codrops-links { 302 | margin: 0; 303 | } 304 | } 305 | -------------------------------------------------------------------------------- /fonts/nexa_boldfree_macroman/specimen_files/specimen_stylesheet.css: -------------------------------------------------------------------------------- 1 | @import url('grid_12-825-55-15.css'); 2 | 3 | /* 4 | CSS Reset by Eric Meyer - Released under Public Domain 5 | http://meyerweb.com/eric/tools/css/reset/ 6 | */ 7 | html, body, div, span, applet, object, iframe, 8 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 9 | a, abbr, acronym, address, big, cite, code, 10 | del, dfn, em, font, img, ins, kbd, q, s, samp, 11 | small, strike, strong, sub, sup, tt, var, 12 | b, u, i, center, dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, table, 14 | caption, tbody, tfoot, thead, tr, th, td 15 | {margin: 0;padding: 0;border: 0;outline: 0; 16 | font-size: 100%;vertical-align: baseline; 17 | background: transparent;} 18 | body {line-height: 1;} 19 | ol, ul {list-style: none;} 20 | blockquote, q {quotes: none;} 21 | blockquote:before, blockquote:after, 22 | q:before, q:after {content: ''; content: none;} 23 | :focus {outline: 0;} 24 | ins {text-decoration: none;} 25 | del {text-decoration: line-through;} 26 | table {border-collapse: collapse;border-spacing: 0;} 27 | 28 | 29 | 30 | 31 | body { 32 | color: #000; 33 | background-color: #dcdcdc; 34 | } 35 | 36 | a { 37 | text-decoration: none; 38 | color: #1883ba; 39 | } 40 | 41 | h1{ 42 | font-size: 32px; 43 | font-weight: normal; 44 | font-style: normal; 45 | margin-bottom: 18px; 46 | } 47 | 48 | h2{ 49 | font-size: 18px; 50 | } 51 | 52 | #container { 53 | width: 865px; 54 | margin: 0px auto; 55 | } 56 | 57 | 58 | #header { 59 | padding: 20px; 60 | font-size: 36px; 61 | background-color: #000; 62 | color: #fff; 63 | } 64 | 65 | #header span { 66 | color: #666; 67 | } 68 | #main_content { 69 | background-color: #fff; 70 | padding: 60px 20px 20px; 71 | } 72 | 73 | 74 | #footer p { 75 | margin: 0; 76 | padding-top: 10px; 77 | padding-bottom: 50px; 78 | color: #333; 79 | font: 10px Arial, sans-serif; 80 | } 81 | 82 | .tabs { 83 | width: 100%; 84 | height: 31px; 85 | background-color: #444; 86 | } 87 | .tabs li { 88 | float: left; 89 | margin: 0; 90 | overflow: hidden; 91 | background-color: #444; 92 | } 93 | .tabs li a { 94 | display: block; 95 | color: #fff; 96 | text-decoration: none; 97 | font: bold 11px/11px 'Arial'; 98 | text-transform: uppercase; 99 | padding: 10px 15px; 100 | border-right: 1px solid #fff; 101 | } 102 | 103 | .tabs li a:hover { 104 | background-color: #00b3ff; 105 | 106 | } 107 | 108 | .tabs li.active a { 109 | color: #000; 110 | background-color: #fff; 111 | } 112 | 113 | 114 | 115 | div.huge { 116 | 117 | font-size: 300px; 118 | line-height: 1em; 119 | padding: 0; 120 | letter-spacing: -.02em; 121 | overflow: hidden; 122 | } 123 | div.glyph_range { 124 | font-size: 72px; 125 | line-height: 1.1em; 126 | } 127 | 128 | .size10{ font-size: 10px; } 129 | .size11{ font-size: 11px; } 130 | .size12{ font-size: 12px; } 131 | .size13{ font-size: 13px; } 132 | .size14{ font-size: 14px; } 133 | .size16{ font-size: 16px; } 134 | .size18{ font-size: 18px; } 135 | .size20{ font-size: 20px; } 136 | .size24{ font-size: 24px; } 137 | .size30{ font-size: 30px; } 138 | .size36{ font-size: 36px; } 139 | .size48{ font-size: 48px; } 140 | .size60{ font-size: 60px; } 141 | .size72{ font-size: 72px; } 142 | .size90{ font-size: 90px; } 143 | 144 | 145 | .psample_row1 { height: 120px;} 146 | .psample_row1 { height: 120px;} 147 | .psample_row2 { height: 160px;} 148 | .psample_row3 { height: 160px;} 149 | .psample_row4 { height: 160px;} 150 | 151 | .psample { 152 | overflow: hidden; 153 | position: relative; 154 | } 155 | .psample p { 156 | line-height: 1.3em; 157 | display: block; 158 | overflow: hidden; 159 | margin: 0; 160 | } 161 | 162 | .psample span { 163 | margin-right: .5em; 164 | } 165 | 166 | .white_blend { 167 | width: 100%; 168 | height: 61px; 169 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); 170 | position: absolute; 171 | bottom: 0; 172 | } 173 | .black_blend { 174 | width: 100%; 175 | height: 61px; 176 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); 177 | position: absolute; 178 | bottom: 0; 179 | } 180 | .fullreverse { 181 | background: #000 !important; 182 | color: #fff !important; 183 | margin-left: -20px; 184 | padding-left: 20px; 185 | margin-right: -20px; 186 | padding-right: 20px; 187 | padding: 20px; 188 | margin-bottom:0; 189 | } 190 | 191 | 192 | .sample_table td { 193 | padding-top: 3px; 194 | padding-bottom:5px; 195 | padding-left: 5px; 196 | vertical-align: middle; 197 | line-height: 1.2em; 198 | } 199 | 200 | .sample_table td:first-child { 201 | background-color: #eee; 202 | text-align: right; 203 | padding-right: 5px; 204 | padding-left: 0; 205 | padding: 5px; 206 | font: 11px/12px "Courier New", Courier, mono; 207 | } 208 | 209 | code { 210 | white-space: pre; 211 | background-color: #eee; 212 | display: block; 213 | padding: 10px; 214 | margin-bottom: 18px; 215 | overflow: auto; 216 | } 217 | 218 | 219 | .bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} 220 | 221 | .box { 222 | padding: 18px; 223 | margin-bottom: 18px; 224 | background: #eee; 225 | } 226 | 227 | .reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} 228 | 229 | #bodycomparison { 230 | position: relative; 231 | overflow: hidden; 232 | font-size: 72px; 233 | height: 90px; 234 | white-space: nowrap; 235 | } 236 | 237 | #bodycomparison div{ 238 | font-size: 72px; 239 | line-height: 90px; 240 | display: inline; 241 | margin: 0 15px 0 0; 242 | padding: 0; 243 | } 244 | 245 | #bodycomparison div span{ 246 | font: 10px Arial; 247 | position: absolute; 248 | left: 0; 249 | } 250 | #xheight { 251 | float: none; 252 | position: absolute; 253 | color: #d9f3ff; 254 | font-size: 72px; 255 | line-height: 90px; 256 | } 257 | 258 | .fontbody { 259 | position: relative; 260 | } 261 | .arialbody{ 262 | font-family: Arial; 263 | position: relative; 264 | } 265 | .verdanabody{ 266 | font-family: Verdana; 267 | position: relative; 268 | } 269 | .georgiabody{ 270 | font-family: Georgia; 271 | position: relative; 272 | } 273 | 274 | /* @group Layout page 275 | */ 276 | 277 | #layout h1 { 278 | font-size: 36px; 279 | line-height: 42px; 280 | font-weight: normal; 281 | font-style: normal; 282 | } 283 | 284 | #layout h2 { 285 | font-size: 24px; 286 | line-height: 23px; 287 | font-weight: normal; 288 | font-style: normal; 289 | } 290 | 291 | #layout h3 { 292 | font-size: 22px; 293 | line-height: 1.4em; 294 | margin-top: 1em; 295 | font-weight: normal; 296 | font-style: normal; 297 | } 298 | 299 | 300 | #layout p.byline { 301 | font-size: 12px; 302 | margin-top: 18px; 303 | line-height: 12px; 304 | margin-bottom: 0; 305 | } 306 | #layout p { 307 | font-size: 14px; 308 | line-height: 21px; 309 | margin-bottom: .5em; 310 | } 311 | 312 | #layout p.large{ 313 | font-size: 18px; 314 | line-height: 26px; 315 | } 316 | 317 | #layout .sidebar p{ 318 | font-size: 12px; 319 | line-height: 1.4em; 320 | } 321 | 322 | #layout p.caption { 323 | font-size: 10px; 324 | margin-top: -16px; 325 | margin-bottom: 18px; 326 | } 327 | 328 | /* @end */ 329 | 330 | /* @group Glyphs */ 331 | 332 | #glyph_chart div{ 333 | background-color: #d9f3ff; 334 | color: black; 335 | float: left; 336 | font-size: 36px; 337 | height: 1.2em; 338 | line-height: 1.2em; 339 | margin-bottom: 1px; 340 | margin-right: 1px; 341 | text-align: center; 342 | width: 1.2em; 343 | position: relative; 344 | padding: .6em .2em .2em; 345 | } 346 | 347 | #glyph_chart div p { 348 | position: absolute; 349 | left: 0; 350 | top: 0; 351 | display: block; 352 | text-align: center; 353 | font: bold 9px Arial, sans-serif; 354 | background-color: #3a768f; 355 | width: 100%; 356 | color: #fff; 357 | padding: 2px 0; 358 | } 359 | 360 | 361 | #glyphs h1 { 362 | font-family: Arial, sans-serif; 363 | } 364 | /* @end */ 365 | 366 | /* @group Installing */ 367 | 368 | #installing { 369 | font: 13px Arial, sans-serif; 370 | } 371 | 372 | #installing p, 373 | #glyphs p{ 374 | line-height: 1.2em; 375 | margin-bottom: 18px; 376 | font: 13px Arial, sans-serif; 377 | } 378 | 379 | 380 | 381 | #installing h3{ 382 | font-size: 15px; 383 | margin-top: 18px; 384 | } 385 | 386 | /* @end */ 387 | 388 | #rendering h1 { 389 | font-family: Arial, sans-serif; 390 | } 391 | .render_table td { 392 | font: 11px "Courier New", Courier, mono; 393 | vertical-align: middle; 394 | } 395 | 396 | 397 | -------------------------------------------------------------------------------- /js/perlin.js: -------------------------------------------------------------------------------- 1 | /* 2 | * A speed-improved perlin and simplex noise algorithms for 2D. 3 | * 4 | * Based on example code by Stefan Gustavson (stegu@itn.liu.se). 5 | * Optimisations by Peter Eastman (peastman@drizzle.stanford.edu). 6 | * Better rank ordering method by Stefan Gustavson in 2012. 7 | * Converted to Javascript by Joseph Gentle. 8 | * 9 | * Version 2012-03-09 10 | * 11 | * This code was placed in the public domain by its original author, 12 | * Stefan Gustavson. You may use it as you see fit, but 13 | * attribution is appreciated. 14 | * 15 | */ 16 | 17 | (function(global){ 18 | var module = global.noise = {}; 19 | 20 | function Grad(x, y, z) { 21 | this.x = x; this.y = y; this.z = z; 22 | } 23 | 24 | Grad.prototype.dot2 = function(x, y) { 25 | return this.x*x + this.y*y; 26 | }; 27 | 28 | Grad.prototype.dot3 = function(x, y, z) { 29 | return this.x*x + this.y*y + this.z*z; 30 | }; 31 | 32 | var grad3 = [new Grad(1,1,0),new Grad(-1,1,0),new Grad(1,-1,0),new Grad(-1,-1,0), 33 | new Grad(1,0,1),new Grad(-1,0,1),new Grad(1,0,-1),new Grad(-1,0,-1), 34 | new Grad(0,1,1),new Grad(0,-1,1),new Grad(0,1,-1),new Grad(0,-1,-1)]; 35 | 36 | var p = [151,160,137,91,90,15, 37 | 131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23, 38 | 190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33, 39 | 88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166, 40 | 77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244, 41 | 102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196, 42 | 135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123, 43 | 5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42, 44 | 223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167, 43,172,9, 45 | 129,22,39,253, 19,98,108,110,79,113,224,232,178,185, 112,104,218,246,97,228, 46 | 251,34,242,193,238,210,144,12,191,179,162,241, 81,51,145,235,249,14,239,107, 47 | 49,192,214, 31,181,199,106,157,184, 84,204,176,115,121,50,45,127, 4,150,254, 48 | 138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180]; 49 | // To remove the need for index wrapping, double the permutation table length 50 | var perm = new Array(512); 51 | var gradP = new Array(512); 52 | 53 | // This isn't a very good seeding function, but it works ok. It supports 2^16 54 | // different seed values. Write something better if you need more seeds. 55 | module.seed = function(seed) { 56 | if(seed > 0 && seed < 1) { 57 | // Scale the seed out 58 | seed *= 65536; 59 | } 60 | 61 | seed = Math.floor(seed); 62 | if(seed < 256) { 63 | seed |= seed << 8; 64 | } 65 | 66 | for(var i = 0; i < 256; i++) { 67 | var v; 68 | if (i & 1) { 69 | v = p[i] ^ (seed & 255); 70 | } else { 71 | v = p[i] ^ ((seed>>8) & 255); 72 | } 73 | 74 | perm[i] = perm[i + 256] = v; 75 | gradP[i] = gradP[i + 256] = grad3[v % 12]; 76 | } 77 | }; 78 | 79 | module.seed(0); 80 | 81 | /* 82 | for(var i=0; i<256; i++) { 83 | perm[i] = perm[i + 256] = p[i]; 84 | gradP[i] = gradP[i + 256] = grad3[perm[i] % 12]; 85 | }*/ 86 | 87 | // Skewing and unskewing factors for 2, 3, and 4 dimensions 88 | var F2 = 0.5*(Math.sqrt(3)-1); 89 | var G2 = (3-Math.sqrt(3))/6; 90 | 91 | var F3 = 1/3; 92 | var G3 = 1/6; 93 | 94 | // 2D simplex noise 95 | module.simplex2 = function(xin, yin) { 96 | var n0, n1, n2; // Noise contributions from the three corners 97 | // Skew the input space to determine which simplex cell we're in 98 | var s = (xin+yin)*F2; // Hairy factor for 2D 99 | var i = Math.floor(xin+s); 100 | var j = Math.floor(yin+s); 101 | var t = (i+j)*G2; 102 | var x0 = xin-i+t; // The x,y distances from the cell origin, unskewed. 103 | var y0 = yin-j+t; 104 | // For the 2D case, the simplex shape is an equilateral triangle. 105 | // Determine which simplex we are in. 106 | var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords 107 | if(x0>y0) { // lower triangle, XY order: (0,0)->(1,0)->(1,1) 108 | i1=1; j1=0; 109 | } else { // upper triangle, YX order: (0,0)->(0,1)->(1,1) 110 | i1=0; j1=1; 111 | } 112 | // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and 113 | // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where 114 | // c = (3-sqrt(3))/6 115 | var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords 116 | var y1 = y0 - j1 + G2; 117 | var x2 = x0 - 1 + 2 * G2; // Offsets for last corner in (x,y) unskewed coords 118 | var y2 = y0 - 1 + 2 * G2; 119 | // Work out the hashed gradient indices of the three simplex corners 120 | i &= 255; 121 | j &= 255; 122 | var gi0 = gradP[i+perm[j]]; 123 | var gi1 = gradP[i+i1+perm[j+j1]]; 124 | var gi2 = gradP[i+1+perm[j+1]]; 125 | // Calculate the contribution from the three corners 126 | var t0 = 0.5 - x0*x0-y0*y0; 127 | if(t0<0) { 128 | n0 = 0; 129 | } else { 130 | t0 *= t0; 131 | n0 = t0 * t0 * gi0.dot2(x0, y0); // (x,y) of grad3 used for 2D gradient 132 | } 133 | var t1 = 0.5 - x1*x1-y1*y1; 134 | if(t1<0) { 135 | n1 = 0; 136 | } else { 137 | t1 *= t1; 138 | n1 = t1 * t1 * gi1.dot2(x1, y1); 139 | } 140 | var t2 = 0.5 - x2*x2-y2*y2; 141 | if(t2<0) { 142 | n2 = 0; 143 | } else { 144 | t2 *= t2; 145 | n2 = t2 * t2 * gi2.dot2(x2, y2); 146 | } 147 | // Add contributions from each corner to get the final noise value. 148 | // The result is scaled to return values in the interval [-1,1]. 149 | return 70 * (n0 + n1 + n2); 150 | }; 151 | 152 | // 3D simplex noise 153 | module.simplex3 = function(xin, yin, zin) { 154 | var n0, n1, n2, n3; // Noise contributions from the four corners 155 | 156 | // Skew the input space to determine which simplex cell we're in 157 | var s = (xin+yin+zin)*F3; // Hairy factor for 2D 158 | var i = Math.floor(xin+s); 159 | var j = Math.floor(yin+s); 160 | var k = Math.floor(zin+s); 161 | 162 | var t = (i+j+k)*G3; 163 | var x0 = xin-i+t; // The x,y distances from the cell origin, unskewed. 164 | var y0 = yin-j+t; 165 | var z0 = zin-k+t; 166 | 167 | // For the 3D case, the simplex shape is a slightly irregular tetrahedron. 168 | // Determine which simplex we are in. 169 | var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords 170 | var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords 171 | if(x0 >= y0) { 172 | if(y0 >= z0) { i1=1; j1=0; k1=0; i2=1; j2=1; k2=0; } 173 | else if(x0 >= z0) { i1=1; j1=0; k1=0; i2=1; j2=0; k2=1; } 174 | else { i1=0; j1=0; k1=1; i2=1; j2=0; k2=1; } 175 | } else { 176 | if(y0 < z0) { i1=0; j1=0; k1=1; i2=0; j2=1; k2=1; } 177 | else if(x0 < z0) { i1=0; j1=1; k1=0; i2=0; j2=1; k2=1; } 178 | else { i1=0; j1=1; k1=0; i2=1; j2=1; k2=0; } 179 | } 180 | // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z), 181 | // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and 182 | // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where 183 | // c = 1/6. 184 | var x1 = x0 - i1 + G3; // Offsets for second corner 185 | var y1 = y0 - j1 + G3; 186 | var z1 = z0 - k1 + G3; 187 | 188 | var x2 = x0 - i2 + 2 * G3; // Offsets for third corner 189 | var y2 = y0 - j2 + 2 * G3; 190 | var z2 = z0 - k2 + 2 * G3; 191 | 192 | var x3 = x0 - 1 + 3 * G3; // Offsets for fourth corner 193 | var y3 = y0 - 1 + 3 * G3; 194 | var z3 = z0 - 1 + 3 * G3; 195 | 196 | // Work out the hashed gradient indices of the four simplex corners 197 | i &= 255; 198 | j &= 255; 199 | k &= 255; 200 | var gi0 = gradP[i+ perm[j+ perm[k ]]]; 201 | var gi1 = gradP[i+i1+perm[j+j1+perm[k+k1]]]; 202 | var gi2 = gradP[i+i2+perm[j+j2+perm[k+k2]]]; 203 | var gi3 = gradP[i+ 1+perm[j+ 1+perm[k+ 1]]]; 204 | 205 | // Calculate the contribution from the four corners 206 | var t0 = 0.6 - x0*x0 - y0*y0 - z0*z0; 207 | if(t0<0) { 208 | n0 = 0; 209 | } else { 210 | t0 *= t0; 211 | n0 = t0 * t0 * gi0.dot3(x0, y0, z0); // (x,y) of grad3 used for 2D gradient 212 | } 213 | var t1 = 0.6 - x1*x1 - y1*y1 - z1*z1; 214 | if(t1<0) { 215 | n1 = 0; 216 | } else { 217 | t1 *= t1; 218 | n1 = t1 * t1 * gi1.dot3(x1, y1, z1); 219 | } 220 | var t2 = 0.6 - x2*x2 - y2*y2 - z2*z2; 221 | if(t2<0) { 222 | n2 = 0; 223 | } else { 224 | t2 *= t2; 225 | n2 = t2 * t2 * gi2.dot3(x2, y2, z2); 226 | } 227 | var t3 = 0.6 - x3*x3 - y3*y3 - z3*z3; 228 | if(t3<0) { 229 | n3 = 0; 230 | } else { 231 | t3 *= t3; 232 | n3 = t3 * t3 * gi3.dot3(x3, y3, z3); 233 | } 234 | // Add contributions from each corner to get the final noise value. 235 | // The result is scaled to return values in the interval [-1,1]. 236 | return 32 * (n0 + n1 + n2 + n3); 237 | 238 | }; 239 | 240 | // ##### Perlin noise stuff 241 | 242 | function fade(t) { 243 | return t*t*t*(t*(t*6-15)+10); 244 | } 245 | 246 | function lerp(a, b, t) { 247 | return (1-t)*a + t*b; 248 | } 249 | 250 | // 2D Perlin Noise 251 | module.perlin2 = function(x, y) { 252 | // Find unit grid cell containing point 253 | var X = Math.floor(x), Y = Math.floor(y); 254 | // Get relative xy coordinates of point within that cell 255 | x = x - X; y = y - Y; 256 | // Wrap the integer cells at 255 (smaller integer period can be introduced here) 257 | X = X & 255; Y = Y & 255; 258 | 259 | // Calculate noise contributions from each of the four corners 260 | var n00 = gradP[X+perm[Y]].dot2(x, y); 261 | var n01 = gradP[X+perm[Y+1]].dot2(x, y-1); 262 | var n10 = gradP[X+1+perm[Y]].dot2(x-1, y); 263 | var n11 = gradP[X+1+perm[Y+1]].dot2(x-1, y-1); 264 | 265 | // Compute the fade curve value for x 266 | var u = fade(x); 267 | 268 | // Interpolate the four results 269 | return lerp( 270 | lerp(n00, n10, u), 271 | lerp(n01, n11, u), 272 | fade(y)); 273 | }; 274 | 275 | // 3D Perlin Noise 276 | module.perlin3 = function(x, y, z) { 277 | // Find unit grid cell containing point 278 | var X = Math.floor(x), Y = Math.floor(y), Z = Math.floor(z); 279 | // Get relative xyz coordinates of point within that cell 280 | x = x - X; y = y - Y; z = z - Z; 281 | // Wrap the integer cells at 255 (smaller integer period can be introduced here) 282 | X = X & 255; Y = Y & 255; Z = Z & 255; 283 | 284 | // Calculate noise contributions from each of the eight corners 285 | var n000 = gradP[X+ perm[Y+ perm[Z ]]].dot3(x, y, z); 286 | var n001 = gradP[X+ perm[Y+ perm[Z+1]]].dot3(x, y, z-1); 287 | var n010 = gradP[X+ perm[Y+1+perm[Z ]]].dot3(x, y-1, z); 288 | var n011 = gradP[X+ perm[Y+1+perm[Z+1]]].dot3(x, y-1, z-1); 289 | var n100 = gradP[X+1+perm[Y+ perm[Z ]]].dot3(x-1, y, z); 290 | var n101 = gradP[X+1+perm[Y+ perm[Z+1]]].dot3(x-1, y, z-1); 291 | var n110 = gradP[X+1+perm[Y+1+perm[Z ]]].dot3(x-1, y-1, z); 292 | var n111 = gradP[X+1+perm[Y+1+perm[Z+1]]].dot3(x-1, y-1, z-1); 293 | 294 | // Compute the fade curve value for x, y, z 295 | var u = fade(x); 296 | var v = fade(y); 297 | var w = fade(z); 298 | 299 | // Interpolate 300 | return lerp( 301 | lerp( 302 | lerp(n000, n100, u), 303 | lerp(n001, n101, u), w), 304 | lerp( 305 | lerp(n010, n110, u), 306 | lerp(n011, n111, u), w), 307 | v); 308 | }; 309 | 310 | })(this); 311 | -------------------------------------------------------------------------------- /fonts/nexa_boldfree_macroman/Nexa_Free_Bold-demo.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | Nexa Bold Free Specimen 19 | 20 | 21 | 26 | 27 | 28 | 29 |
30 | 32 | 39 | 40 |
41 | 42 | 43 |
44 | 45 |
46 |
47 |
AaBb
48 |
49 |
50 | 51 |
52 |
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
53 |
54 |
55 |
56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 |
10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
73 | 74 |
75 | 76 |
77 | 78 | 79 | 80 |
81 | 82 | 83 |
84 |
body
body
body
body
85 |
86 | bodyNexa Bold Free 87 |
88 |
89 | bodyArial 90 |
91 |
92 | bodyVerdana 93 |
94 |
95 | bodyGeorgia 96 |
97 | 98 | 99 | 100 |
101 | 102 | 103 |
104 | 105 |
106 |

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

107 | 108 |
109 |
110 |

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

111 | 112 |
113 |
114 |

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

115 | 116 |
117 |
118 |

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

119 | 120 |
121 |
122 | 123 |
124 |
125 |
126 |

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

127 | 128 |
129 |
130 |

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

131 | 132 |
133 |
134 |

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

135 | 136 |
137 | 138 |
139 | 140 |
141 | 142 |
143 |
144 |

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

145 |
146 |
147 |

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

148 |
149 | 150 |
151 | 152 |
153 | 154 |
155 |
156 |

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

157 |
158 |
159 | 160 |
161 | 162 | 163 | 164 |
165 |
166 |

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

167 | 168 |
169 |
170 |

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

171 | 172 |
173 |
174 |

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

175 | 176 |
177 |
178 |

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

179 | 180 |
181 |
182 | 183 |
184 | 185 |
186 |
187 |

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

188 | 189 |
190 |
191 |

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

192 | 193 |
194 |
195 |

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

196 | 197 |
198 |
199 | 200 |
201 | 202 |
203 |
204 |

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

205 |
206 |
207 |

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

208 |
209 | 210 |
211 | 212 |
213 | 214 |
215 |
216 |

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

217 |
218 |
219 | 220 |
221 | 222 | 223 | 224 | 225 |
226 | 227 |
228 | 229 |
230 | 231 |
232 |

Lorem Ipsum Dolor

233 |

Etiam porta sem malesuada magna mollis euismod

234 | 235 |

By Aenean Lacinia

236 |
237 |
238 |
239 |
240 |

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

241 | 242 | 243 |

Pellentesque ornare sem

244 | 245 |

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

246 | 247 |

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

248 | 249 |

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

250 | 251 |

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

252 | 253 |

Cras mattis consectetur

254 | 255 |

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

256 | 257 |

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

258 |
259 | 260 |
261 | 262 |
263 |

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

264 |
265 | 266 |

Maecenas sed diam eget risus varius.

267 | 268 |

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

269 | 270 | 271 | 272 |

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.

273 | 274 |

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

275 | 276 |
277 |
278 | 279 |
280 | 281 | 282 | 283 | 284 | 285 | 286 |
287 |
288 |
289 | 290 |

Language Support

291 |

The subset of Nexa Bold Free in this kit supports the following languages:
292 | 293 | Albanian, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Basque, Bislama, Breton, Cebuano, Chamorro, Cheyenne, Corsican, Danish, Demo, Dutch, English, Estonian, Faroese, Fijian, Finnish, French, French Creole (Saint Lucia), Frisian, Galician, Genoese, German, Gilbertese (Kiribati), Greenlandic, Haitian Creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko (Ilokano), Indonesian, Interglossa (Glosa), Interlingua, Irish (Gaelic), Islandic, Italian, Jèrriais, Latin Basic, Lojban, Lombard, Luxembourgian, Malagasy, Manx, Mohawk, Norfolk/Pitcairnese, Northern Sotho (Pedi), Norwegian, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Portuguese, Potawatomi, Rhaeto-Romance, Romansh (Rumantsch), Rotokas, Sami (Lule), Samoan, Sardinian (Sardu), Scots (Gaelic), Seychellois Creole (Seselwa), Shona, Sicilian, Somali, Southern Ndebele, Southern Sotho (Sesotho), Spanish, Swahili, Swati/Swazi, Swedish, Tagalog (Filipino/Pilipino), Tetum (Tetun), Tok Pisin, Tswana, ubasic, Uyghur (Latinized), Volapük, Votic (Latinized), Walloon, Warlpiri, Xhosa, Yapese, Zulu

294 |

Glyph Chart

295 |

The subset of Nexa Bold Free in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

296 |
297 | 298 |
299 |
300 | 301 | 302 |
303 |
304 | 305 | 306 |
307 | 308 |
309 | 310 |
311 |
312 |
313 |

Installing Webfonts

314 | 315 |

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

316 | 317 |

1. Upload your webfonts

318 |

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

319 | 320 |

2. Include the webfont stylesheet

321 |

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

322 | 323 | 324 | 325 | @font-face{ 326 | font-family: 'MyWebFont'; 327 | src: url('WebFont.eot'); 328 | src: url('WebFont.eot?#iefix') format('embedded-opentype'), 329 | url('WebFont.woff') format('woff'), 330 | url('WebFont.ttf') format('truetype'), 331 | url('WebFont.svg#webfont') format('svg'); 332 | } 333 | 334 | 335 |

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

336 | <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> 337 | 338 |

3. Modify your own stylesheet

339 |

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

340 | p { font-family: 'MyWebFont', Arial, sans-serif; } 341 | 342 |

4. Test

343 |

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

344 |
345 | 346 |
347 |
348 |

Troubleshooting
Font-Face Problems

349 |

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

350 | 351 |

Fonts not showing in any browser

352 | 353 |

This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

354 | 355 |

Fonts not loading in iPhone or iPad

356 | 357 |

The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.

358 | 359 |

Fonts not loading in Firefox

360 | 361 |

The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

362 | 363 |

Fonts not loading in IE

364 | 365 |

Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.

366 | 367 |

Fonts not loading in IE9

368 | 369 |

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

370 |
371 |
372 |
373 | 374 |
375 | 376 |
377 | 380 |
381 | 382 | 383 | -------------------------------------------------------------------------------- /js/OrbitControls.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author qiao / https://github.com/qiao 3 | * @author mrdoob / http://mrdoob.com 4 | * @author alteredq / http://alteredqualia.com/ 5 | * @author WestLangley / http://github.com/WestLangley 6 | * @author erich666 / http://erichaines.com 7 | */ 8 | 9 | // This set of controls performs orbiting, dollying (zooming), and panning. 10 | // Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default). 11 | // 12 | // Orbit - left mouse / touch: one finger move 13 | // Zoom - middle mouse, or mousewheel / touch: two finger spread or squish 14 | // Pan - right mouse, or arrow keys / touch: three finger swipe 15 | 16 | THREE.OrbitControls = function ( object, domElement ) { 17 | 18 | this.object = object; 19 | 20 | this.domElement = ( domElement !== undefined ) ? domElement : document; 21 | 22 | // Set to false to disable this control 23 | this.enabled = true; 24 | 25 | // "target" sets the location of focus, where the object orbits around 26 | this.target = new THREE.Vector3(); 27 | 28 | // How far you can dolly in and out ( PerspectiveCamera only ) 29 | this.minDistance = 0; 30 | this.maxDistance = Infinity; 31 | 32 | // How far you can zoom in and out ( OrthographicCamera only ) 33 | this.minZoom = 0; 34 | this.maxZoom = Infinity; 35 | 36 | // How far you can orbit vertically, upper and lower limits. 37 | // Range is 0 to Math.PI radians. 38 | this.minPolarAngle = 0; // radians 39 | this.maxPolarAngle = Math.PI; // radians 40 | 41 | // How far you can orbit horizontally, upper and lower limits. 42 | // If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ]. 43 | this.minAzimuthAngle = - Infinity; // radians 44 | this.maxAzimuthAngle = Infinity; // radians 45 | 46 | // Set to true to enable damping (inertia) 47 | // If damping is enabled, you must call controls.update() in your animation loop 48 | this.enableDamping = false; 49 | this.dampingFactor = 0.25; 50 | 51 | // This option actually enables dollying in and out; left as "zoom" for backwards compatibility. 52 | // Set to false to disable zooming 53 | this.enableZoom = true; 54 | this.zoomSpeed = 1.0; 55 | 56 | // Set to false to disable rotating 57 | this.enableRotate = true; 58 | this.rotateSpeed = 1.0; 59 | 60 | // Set to false to disable panning 61 | this.enablePan = true; 62 | this.keyPanSpeed = 7.0; // pixels moved per arrow key push 63 | 64 | // Set to true to automatically rotate around the target 65 | // If auto-rotate is enabled, you must call controls.update() in your animation loop 66 | this.autoRotate = false; 67 | this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60 68 | 69 | // Set to false to disable use of the keys 70 | this.enableKeys = true; 71 | 72 | // The four arrow keys 73 | this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 }; 74 | 75 | // Mouse buttons 76 | this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT }; 77 | 78 | // for reset 79 | this.target0 = this.target.clone(); 80 | this.position0 = this.object.position.clone(); 81 | this.zoom0 = this.object.zoom; 82 | 83 | // 84 | // public methods 85 | // 86 | 87 | this.getPolarAngle = function () { 88 | 89 | return spherical.phi; 90 | 91 | }; 92 | 93 | this.getAzimuthalAngle = function () { 94 | 95 | return spherical.theta; 96 | 97 | }; 98 | 99 | this.saveState = function () { 100 | 101 | scope.target0.copy( scope.target ); 102 | scope.position0.copy( scope.object.position ); 103 | scope.zoom0 = scope.object.zoom; 104 | 105 | }; 106 | 107 | this.reset = function () { 108 | 109 | scope.target.copy( scope.target0 ); 110 | scope.object.position.copy( scope.position0 ); 111 | scope.object.zoom = scope.zoom0; 112 | 113 | scope.object.updateProjectionMatrix(); 114 | scope.dispatchEvent( changeEvent ); 115 | 116 | scope.update(); 117 | 118 | state = STATE.NONE; 119 | 120 | }; 121 | 122 | // this method is exposed, but perhaps it would be better if we can make it private... 123 | this.update = function () { 124 | 125 | var offset = new THREE.Vector3(); 126 | 127 | // so camera.up is the orbit axis 128 | var quat = new THREE.Quaternion().setFromUnitVectors( object.up, new THREE.Vector3( 0, 1, 0 ) ); 129 | var quatInverse = quat.clone().inverse(); 130 | 131 | var lastPosition = new THREE.Vector3(); 132 | var lastQuaternion = new THREE.Quaternion(); 133 | 134 | return function update() { 135 | 136 | var position = scope.object.position; 137 | 138 | offset.copy( position ).sub( scope.target ); 139 | 140 | // rotate offset to "y-axis-is-up" space 141 | offset.applyQuaternion( quat ); 142 | 143 | // angle from z-axis around y-axis 144 | spherical.setFromVector3( offset ); 145 | 146 | if ( scope.autoRotate && state === STATE.NONE ) { 147 | 148 | rotateLeft( getAutoRotationAngle() ); 149 | 150 | } 151 | 152 | spherical.theta += sphericalDelta.theta; 153 | spherical.phi += sphericalDelta.phi; 154 | 155 | // restrict theta to be between desired limits 156 | spherical.theta = Math.max( scope.minAzimuthAngle, Math.min( scope.maxAzimuthAngle, spherical.theta ) ); 157 | 158 | // restrict phi to be between desired limits 159 | spherical.phi = Math.max( scope.minPolarAngle, Math.min( scope.maxPolarAngle, spherical.phi ) ); 160 | 161 | spherical.makeSafe(); 162 | 163 | 164 | spherical.radius *= scale; 165 | 166 | // restrict radius to be between desired limits 167 | spherical.radius = Math.max( scope.minDistance, Math.min( scope.maxDistance, spherical.radius ) ); 168 | 169 | // move target to panned location 170 | scope.target.add( panOffset ); 171 | 172 | offset.setFromSpherical( spherical ); 173 | 174 | // rotate offset back to "camera-up-vector-is-up" space 175 | offset.applyQuaternion( quatInverse ); 176 | 177 | position.copy( scope.target ).add( offset ); 178 | 179 | scope.object.lookAt( scope.target ); 180 | 181 | if ( scope.enableDamping === true ) { 182 | 183 | sphericalDelta.theta *= ( 1 - scope.dampingFactor ); 184 | sphericalDelta.phi *= ( 1 - scope.dampingFactor ); 185 | 186 | } else { 187 | 188 | sphericalDelta.set( 0, 0, 0 ); 189 | 190 | } 191 | 192 | scale = 1; 193 | panOffset.set( 0, 0, 0 ); 194 | 195 | // update condition is: 196 | // min(camera displacement, camera rotation in radians)^2 > EPS 197 | // using small-angle approximation cos(x/2) = 1 - x^2 / 8 198 | 199 | if ( zoomChanged || 200 | lastPosition.distanceToSquared( scope.object.position ) > EPS || 201 | 8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) { 202 | 203 | scope.dispatchEvent( changeEvent ); 204 | 205 | lastPosition.copy( scope.object.position ); 206 | lastQuaternion.copy( scope.object.quaternion ); 207 | zoomChanged = false; 208 | 209 | return true; 210 | 211 | } 212 | 213 | return false; 214 | 215 | }; 216 | 217 | }(); 218 | 219 | this.dispose = function () { 220 | 221 | scope.domElement.removeEventListener( 'contextmenu', onContextMenu, false ); 222 | scope.domElement.removeEventListener( 'mousedown', onMouseDown, false ); 223 | scope.domElement.removeEventListener( 'wheel', onMouseWheel, false ); 224 | 225 | scope.domElement.removeEventListener( 'touchstart', onTouchStart, false ); 226 | scope.domElement.removeEventListener( 'touchend', onTouchEnd, false ); 227 | scope.domElement.removeEventListener( 'touchmove', onTouchMove, false ); 228 | 229 | document.removeEventListener( 'mousemove', onMouseMove, false ); 230 | document.removeEventListener( 'mouseup', onMouseUp, false ); 231 | 232 | window.removeEventListener( 'keydown', onKeyDown, false ); 233 | 234 | //scope.dispatchEvent( { type: 'dispose' } ); // should this be added here? 235 | 236 | }; 237 | 238 | // 239 | // internals 240 | // 241 | 242 | var scope = this; 243 | 244 | var changeEvent = { type: 'change' }; 245 | var startEvent = { type: 'start' }; 246 | var endEvent = { type: 'end' }; 247 | 248 | var STATE = { NONE: - 1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_DOLLY: 4, TOUCH_PAN: 5 }; 249 | 250 | var state = STATE.NONE; 251 | 252 | var EPS = 0.000001; 253 | 254 | // current position in spherical coordinates 255 | var spherical = new THREE.Spherical(); 256 | var sphericalDelta = new THREE.Spherical(); 257 | 258 | var scale = 1; 259 | var panOffset = new THREE.Vector3(); 260 | var zoomChanged = false; 261 | 262 | var rotateStart = new THREE.Vector2(); 263 | var rotateEnd = new THREE.Vector2(); 264 | var rotateDelta = new THREE.Vector2(); 265 | 266 | var panStart = new THREE.Vector2(); 267 | var panEnd = new THREE.Vector2(); 268 | var panDelta = new THREE.Vector2(); 269 | 270 | var dollyStart = new THREE.Vector2(); 271 | var dollyEnd = new THREE.Vector2(); 272 | var dollyDelta = new THREE.Vector2(); 273 | 274 | function getAutoRotationAngle() { 275 | 276 | return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed; 277 | 278 | } 279 | 280 | function getZoomScale() { 281 | 282 | return Math.pow( 0.95, scope.zoomSpeed ); 283 | 284 | } 285 | 286 | function rotateLeft( angle ) { 287 | 288 | sphericalDelta.theta -= angle; 289 | 290 | } 291 | 292 | function rotateUp( angle ) { 293 | 294 | sphericalDelta.phi -= angle; 295 | 296 | } 297 | 298 | var panLeft = function () { 299 | 300 | var v = new THREE.Vector3(); 301 | 302 | return function panLeft( distance, objectMatrix ) { 303 | 304 | v.setFromMatrixColumn( objectMatrix, 0 ); // get X column of objectMatrix 305 | v.multiplyScalar( - distance ); 306 | 307 | panOffset.add( v ); 308 | 309 | }; 310 | 311 | }(); 312 | 313 | var panUp = function () { 314 | 315 | var v = new THREE.Vector3(); 316 | 317 | return function panUp( distance, objectMatrix ) { 318 | 319 | v.setFromMatrixColumn( objectMatrix, 1 ); // get Y column of objectMatrix 320 | v.multiplyScalar( distance ); 321 | 322 | panOffset.add( v ); 323 | 324 | }; 325 | 326 | }(); 327 | 328 | // deltaX and deltaY are in pixels; right and down are positive 329 | var pan = function () { 330 | 331 | var offset = new THREE.Vector3(); 332 | 333 | return function pan( deltaX, deltaY ) { 334 | 335 | var element = scope.domElement === document ? scope.domElement.body : scope.domElement; 336 | 337 | if ( scope.object.isPerspectiveCamera ) { 338 | 339 | // perspective 340 | var position = scope.object.position; 341 | offset.copy( position ).sub( scope.target ); 342 | var targetDistance = offset.length(); 343 | 344 | // half of the fov is center to top of screen 345 | targetDistance *= Math.tan( ( scope.object.fov / 2 ) * Math.PI / 180.0 ); 346 | 347 | // we actually don't use screenWidth, since perspective camera is fixed to screen height 348 | panLeft( 2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix ); 349 | panUp( 2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix ); 350 | 351 | } else if ( scope.object.isOrthographicCamera ) { 352 | 353 | // orthographic 354 | panLeft( deltaX * ( scope.object.right - scope.object.left ) / scope.object.zoom / element.clientWidth, scope.object.matrix ); 355 | panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix ); 356 | 357 | } else { 358 | 359 | // camera neither orthographic nor perspective 360 | console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' ); 361 | scope.enablePan = false; 362 | 363 | } 364 | 365 | }; 366 | 367 | }(); 368 | 369 | function dollyIn( dollyScale ) { 370 | 371 | if ( scope.object.isPerspectiveCamera ) { 372 | 373 | scale /= dollyScale; 374 | 375 | } else if ( scope.object.isOrthographicCamera ) { 376 | 377 | scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom * dollyScale ) ); 378 | scope.object.updateProjectionMatrix(); 379 | zoomChanged = true; 380 | 381 | } else { 382 | 383 | console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' ); 384 | scope.enableZoom = false; 385 | 386 | } 387 | 388 | } 389 | 390 | function dollyOut( dollyScale ) { 391 | 392 | if ( scope.object.isPerspectiveCamera ) { 393 | 394 | scale *= dollyScale; 395 | 396 | } else if ( scope.object.isOrthographicCamera ) { 397 | 398 | scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / dollyScale ) ); 399 | scope.object.updateProjectionMatrix(); 400 | zoomChanged = true; 401 | 402 | } else { 403 | 404 | console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' ); 405 | scope.enableZoom = false; 406 | 407 | } 408 | 409 | } 410 | 411 | // 412 | // event callbacks - update the object state 413 | // 414 | 415 | function handleMouseDownRotate( event ) { 416 | 417 | //console.log( 'handleMouseDownRotate' ); 418 | 419 | rotateStart.set( event.clientX, event.clientY ); 420 | 421 | } 422 | 423 | function handleMouseDownDolly( event ) { 424 | 425 | //console.log( 'handleMouseDownDolly' ); 426 | 427 | dollyStart.set( event.clientX, event.clientY ); 428 | 429 | } 430 | 431 | function handleMouseDownPan( event ) { 432 | 433 | //console.log( 'handleMouseDownPan' ); 434 | 435 | panStart.set( event.clientX, event.clientY ); 436 | 437 | } 438 | 439 | function handleMouseMoveRotate( event ) { 440 | 441 | //console.log( 'handleMouseMoveRotate' ); 442 | 443 | rotateEnd.set( event.clientX, event.clientY ); 444 | rotateDelta.subVectors( rotateEnd, rotateStart ); 445 | 446 | var element = scope.domElement === document ? scope.domElement.body : scope.domElement; 447 | 448 | // rotating across whole screen goes 360 degrees around 449 | rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed ); 450 | 451 | // rotating up and down along whole screen attempts to go 360, but limited to 180 452 | rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed ); 453 | 454 | rotateStart.copy( rotateEnd ); 455 | 456 | scope.update(); 457 | 458 | } 459 | 460 | function handleMouseMoveDolly( event ) { 461 | 462 | //console.log( 'handleMouseMoveDolly' ); 463 | 464 | dollyEnd.set( event.clientX, event.clientY ); 465 | 466 | dollyDelta.subVectors( dollyEnd, dollyStart ); 467 | 468 | if ( dollyDelta.y > 0 ) { 469 | 470 | dollyIn( getZoomScale() ); 471 | 472 | } else if ( dollyDelta.y < 0 ) { 473 | 474 | dollyOut( getZoomScale() ); 475 | 476 | } 477 | 478 | dollyStart.copy( dollyEnd ); 479 | 480 | scope.update(); 481 | 482 | } 483 | 484 | function handleMouseMovePan( event ) { 485 | 486 | //console.log( 'handleMouseMovePan' ); 487 | 488 | panEnd.set( event.clientX, event.clientY ); 489 | 490 | panDelta.subVectors( panEnd, panStart ); 491 | 492 | pan( panDelta.x, panDelta.y ); 493 | 494 | panStart.copy( panEnd ); 495 | 496 | scope.update(); 497 | 498 | } 499 | 500 | function handleMouseUp( event ) { 501 | 502 | // console.log( 'handleMouseUp' ); 503 | 504 | } 505 | 506 | function handleMouseWheel( event ) { 507 | 508 | // console.log( 'handleMouseWheel' ); 509 | 510 | if ( event.deltaY < 0 ) { 511 | 512 | dollyOut( getZoomScale() ); 513 | 514 | } else if ( event.deltaY > 0 ) { 515 | 516 | dollyIn( getZoomScale() ); 517 | 518 | } 519 | 520 | scope.update(); 521 | 522 | } 523 | 524 | function handleKeyDown( event ) { 525 | 526 | //console.log( 'handleKeyDown' ); 527 | 528 | switch ( event.keyCode ) { 529 | 530 | case scope.keys.UP: 531 | pan( 0, scope.keyPanSpeed ); 532 | scope.update(); 533 | break; 534 | 535 | case scope.keys.BOTTOM: 536 | pan( 0, - scope.keyPanSpeed ); 537 | scope.update(); 538 | break; 539 | 540 | case scope.keys.LEFT: 541 | pan( scope.keyPanSpeed, 0 ); 542 | scope.update(); 543 | break; 544 | 545 | case scope.keys.RIGHT: 546 | pan( - scope.keyPanSpeed, 0 ); 547 | scope.update(); 548 | break; 549 | 550 | } 551 | 552 | } 553 | 554 | function handleTouchStartRotate( event ) { 555 | 556 | //console.log( 'handleTouchStartRotate' ); 557 | 558 | rotateStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ); 559 | 560 | } 561 | 562 | function handleTouchStartDolly( event ) { 563 | 564 | //console.log( 'handleTouchStartDolly' ); 565 | 566 | var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX; 567 | var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY; 568 | 569 | var distance = Math.sqrt( dx * dx + dy * dy ); 570 | 571 | dollyStart.set( 0, distance ); 572 | 573 | } 574 | 575 | function handleTouchStartPan( event ) { 576 | 577 | //console.log( 'handleTouchStartPan' ); 578 | 579 | panStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ); 580 | 581 | } 582 | 583 | function handleTouchMoveRotate( event ) { 584 | 585 | //console.log( 'handleTouchMoveRotate' ); 586 | 587 | rotateEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ); 588 | rotateDelta.subVectors( rotateEnd, rotateStart ); 589 | 590 | var element = scope.domElement === document ? scope.domElement.body : scope.domElement; 591 | 592 | // rotating across whole screen goes 360 degrees around 593 | rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed ); 594 | 595 | // rotating up and down along whole screen attempts to go 360, but limited to 180 596 | rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed ); 597 | 598 | rotateStart.copy( rotateEnd ); 599 | 600 | scope.update(); 601 | 602 | } 603 | 604 | function handleTouchMoveDolly( event ) { 605 | 606 | //console.log( 'handleTouchMoveDolly' ); 607 | 608 | var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX; 609 | var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY; 610 | 611 | var distance = Math.sqrt( dx * dx + dy * dy ); 612 | 613 | dollyEnd.set( 0, distance ); 614 | 615 | dollyDelta.subVectors( dollyEnd, dollyStart ); 616 | 617 | if ( dollyDelta.y > 0 ) { 618 | 619 | dollyOut( getZoomScale() ); 620 | 621 | } else if ( dollyDelta.y < 0 ) { 622 | 623 | dollyIn( getZoomScale() ); 624 | 625 | } 626 | 627 | dollyStart.copy( dollyEnd ); 628 | 629 | scope.update(); 630 | 631 | } 632 | 633 | function handleTouchMovePan( event ) { 634 | 635 | //console.log( 'handleTouchMovePan' ); 636 | 637 | panEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ); 638 | 639 | panDelta.subVectors( panEnd, panStart ); 640 | 641 | pan( panDelta.x, panDelta.y ); 642 | 643 | panStart.copy( panEnd ); 644 | 645 | scope.update(); 646 | 647 | } 648 | 649 | function handleTouchEnd( event ) { 650 | 651 | //console.log( 'handleTouchEnd' ); 652 | 653 | } 654 | 655 | // 656 | // event handlers - FSM: listen for events and reset state 657 | // 658 | 659 | function onMouseDown( event ) { 660 | 661 | if ( scope.enabled === false ) return; 662 | 663 | event.preventDefault(); 664 | 665 | switch ( event.button ) { 666 | 667 | case scope.mouseButtons.ORBIT: 668 | 669 | if ( scope.enableRotate === false ) return; 670 | 671 | handleMouseDownRotate( event ); 672 | 673 | state = STATE.ROTATE; 674 | 675 | break; 676 | 677 | case scope.mouseButtons.ZOOM: 678 | 679 | if ( scope.enableZoom === false ) return; 680 | 681 | handleMouseDownDolly( event ); 682 | 683 | state = STATE.DOLLY; 684 | 685 | break; 686 | 687 | case scope.mouseButtons.PAN: 688 | 689 | if ( scope.enablePan === false ) return; 690 | 691 | handleMouseDownPan( event ); 692 | 693 | state = STATE.PAN; 694 | 695 | break; 696 | 697 | } 698 | 699 | if ( state !== STATE.NONE ) { 700 | 701 | document.addEventListener( 'mousemove', onMouseMove, false ); 702 | document.addEventListener( 'mouseup', onMouseUp, false ); 703 | 704 | scope.dispatchEvent( startEvent ); 705 | 706 | } 707 | 708 | } 709 | 710 | function onMouseMove( event ) { 711 | 712 | if ( scope.enabled === false ) return; 713 | 714 | event.preventDefault(); 715 | 716 | switch ( state ) { 717 | 718 | case STATE.ROTATE: 719 | 720 | if ( scope.enableRotate === false ) return; 721 | 722 | handleMouseMoveRotate( event ); 723 | 724 | break; 725 | 726 | case STATE.DOLLY: 727 | 728 | if ( scope.enableZoom === false ) return; 729 | 730 | handleMouseMoveDolly( event ); 731 | 732 | break; 733 | 734 | case STATE.PAN: 735 | 736 | if ( scope.enablePan === false ) return; 737 | 738 | handleMouseMovePan( event ); 739 | 740 | break; 741 | 742 | } 743 | 744 | } 745 | 746 | function onMouseUp( event ) { 747 | 748 | if ( scope.enabled === false ) return; 749 | 750 | handleMouseUp( event ); 751 | 752 | document.removeEventListener( 'mousemove', onMouseMove, false ); 753 | document.removeEventListener( 'mouseup', onMouseUp, false ); 754 | 755 | scope.dispatchEvent( endEvent ); 756 | 757 | state = STATE.NONE; 758 | 759 | } 760 | 761 | function onMouseWheel( event ) { 762 | 763 | if ( scope.enabled === false || scope.enableZoom === false || ( state !== STATE.NONE && state !== STATE.ROTATE ) ) return; 764 | 765 | event.preventDefault(); 766 | event.stopPropagation(); 767 | 768 | handleMouseWheel( event ); 769 | 770 | scope.dispatchEvent( startEvent ); // not sure why these are here... 771 | scope.dispatchEvent( endEvent ); 772 | 773 | } 774 | 775 | function onKeyDown( event ) { 776 | 777 | if ( scope.enabled === false || scope.enableKeys === false || scope.enablePan === false ) return; 778 | 779 | handleKeyDown( event ); 780 | 781 | } 782 | 783 | function onTouchStart( event ) { 784 | 785 | if ( scope.enabled === false ) return; 786 | 787 | switch ( event.touches.length ) { 788 | 789 | case 1: // one-fingered touch: rotate 790 | 791 | if ( scope.enableRotate === false ) return; 792 | 793 | handleTouchStartRotate( event ); 794 | 795 | state = STATE.TOUCH_ROTATE; 796 | 797 | break; 798 | 799 | case 2: // two-fingered touch: dolly 800 | 801 | if ( scope.enableZoom === false ) return; 802 | 803 | handleTouchStartDolly( event ); 804 | 805 | state = STATE.TOUCH_DOLLY; 806 | 807 | break; 808 | 809 | case 3: // three-fingered touch: pan 810 | 811 | if ( scope.enablePan === false ) return; 812 | 813 | handleTouchStartPan( event ); 814 | 815 | state = STATE.TOUCH_PAN; 816 | 817 | break; 818 | 819 | default: 820 | 821 | state = STATE.NONE; 822 | 823 | } 824 | 825 | if ( state !== STATE.NONE ) { 826 | 827 | scope.dispatchEvent( startEvent ); 828 | 829 | } 830 | 831 | } 832 | 833 | function onTouchMove( event ) { 834 | 835 | if ( scope.enabled === false ) return; 836 | 837 | event.preventDefault(); 838 | event.stopPropagation(); 839 | 840 | switch ( event.touches.length ) { 841 | 842 | case 1: // one-fingered touch: rotate 843 | 844 | if ( scope.enableRotate === false ) return; 845 | if ( state !== STATE.TOUCH_ROTATE ) return; // is this needed?... 846 | 847 | handleTouchMoveRotate( event ); 848 | 849 | break; 850 | 851 | case 2: // two-fingered touch: dolly 852 | 853 | if ( scope.enableZoom === false ) return; 854 | if ( state !== STATE.TOUCH_DOLLY ) return; // is this needed?... 855 | 856 | handleTouchMoveDolly( event ); 857 | 858 | break; 859 | 860 | case 3: // three-fingered touch: pan 861 | 862 | if ( scope.enablePan === false ) return; 863 | if ( state !== STATE.TOUCH_PAN ) return; // is this needed?... 864 | 865 | handleTouchMovePan( event ); 866 | 867 | break; 868 | 869 | default: 870 | 871 | state = STATE.NONE; 872 | 873 | } 874 | 875 | } 876 | 877 | function onTouchEnd( event ) { 878 | 879 | if ( scope.enabled === false ) return; 880 | 881 | handleTouchEnd( event ); 882 | 883 | scope.dispatchEvent( endEvent ); 884 | 885 | state = STATE.NONE; 886 | 887 | } 888 | 889 | function onContextMenu( event ) { 890 | 891 | if ( scope.enabled === false ) return; 892 | 893 | event.preventDefault(); 894 | 895 | } 896 | 897 | // 898 | 899 | scope.domElement.addEventListener( 'contextmenu', onContextMenu, false ); 900 | 901 | scope.domElement.addEventListener( 'mousedown', onMouseDown, false ); 902 | scope.domElement.addEventListener( 'wheel', onMouseWheel, false ); 903 | 904 | scope.domElement.addEventListener( 'touchstart', onTouchStart, false ); 905 | scope.domElement.addEventListener( 'touchend', onTouchEnd, false ); 906 | scope.domElement.addEventListener( 'touchmove', onTouchMove, false ); 907 | 908 | window.addEventListener( 'keydown', onKeyDown, false ); 909 | 910 | // force an update at start 911 | 912 | this.update(); 913 | 914 | }; 915 | 916 | THREE.OrbitControls.prototype = Object.create( THREE.EventDispatcher.prototype ); 917 | THREE.OrbitControls.prototype.constructor = THREE.OrbitControls; 918 | 919 | Object.defineProperties( THREE.OrbitControls.prototype, { 920 | 921 | center: { 922 | 923 | get: function () { 924 | 925 | console.warn( 'THREE.OrbitControls: .center has been renamed to .target' ); 926 | return this.target; 927 | 928 | } 929 | 930 | }, 931 | 932 | // backward compatibility 933 | 934 | noZoom: { 935 | 936 | get: function () { 937 | 938 | console.warn( 'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' ); 939 | return ! this.enableZoom; 940 | 941 | }, 942 | 943 | set: function ( value ) { 944 | 945 | console.warn( 'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' ); 946 | this.enableZoom = ! value; 947 | 948 | } 949 | 950 | }, 951 | 952 | noRotate: { 953 | 954 | get: function () { 955 | 956 | console.warn( 'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' ); 957 | return ! this.enableRotate; 958 | 959 | }, 960 | 961 | set: function ( value ) { 962 | 963 | console.warn( 'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' ); 964 | this.enableRotate = ! value; 965 | 966 | } 967 | 968 | }, 969 | 970 | noPan: { 971 | 972 | get: function () { 973 | 974 | console.warn( 'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.' ); 975 | return ! this.enablePan; 976 | 977 | }, 978 | 979 | set: function ( value ) { 980 | 981 | console.warn( 'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.' ); 982 | this.enablePan = ! value; 983 | 984 | } 985 | 986 | }, 987 | 988 | noKeys: { 989 | 990 | get: function () { 991 | 992 | console.warn( 'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' ); 993 | return ! this.enableKeys; 994 | 995 | }, 996 | 997 | set: function ( value ) { 998 | 999 | console.warn( 'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' ); 1000 | this.enableKeys = ! value; 1001 | 1002 | } 1003 | 1004 | }, 1005 | 1006 | staticMoving: { 1007 | 1008 | get: function () { 1009 | 1010 | console.warn( 'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' ); 1011 | return ! this.enableDamping; 1012 | 1013 | }, 1014 | 1015 | set: function ( value ) { 1016 | 1017 | console.warn( 'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' ); 1018 | this.enableDamping = ! value; 1019 | 1020 | } 1021 | 1022 | }, 1023 | 1024 | dynamicDampingFactor: { 1025 | 1026 | get: function () { 1027 | 1028 | console.warn( 'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' ); 1029 | return this.dampingFactor; 1030 | 1031 | }, 1032 | 1033 | set: function ( value ) { 1034 | 1035 | console.warn( 'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' ); 1036 | this.dampingFactor = value; 1037 | 1038 | } 1039 | 1040 | } 1041 | 1042 | } ); 1043 | --------------------------------------------------------------------------------