threex
Version:
Game Extensions for three.js http://www.threejsgames.com/extensions/
475 lines (393 loc) • 9.73 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Three.js Mini Game Workshop</title>
<style type="text/css">
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #222;
background-color: #f7f7f7;
font-size: 100%;
}
#wrapper {
width: 850px;
height: 600px;
overflow: hidden;
margin: 80px auto 0 auto;
}
/* styles for print layout */
#wrapper.nohide {
overflow: auto;
height: auto;
box-shadow: none;
}
#wrapper.nohide .slide {
margin-bottom: 30px;
}
/* /styles */
.slide {
width: auto;
height: 540px;
padding: 30px;
font-weight: 200;
font-size: 200%;
line-height: 1.375;
}
.controls {
position: absolute;
bottom: 20px;
left: 20px;
}
.controls .arrow {
width: 0; height: 0;
border: 30px solid #333;
float: left;
margin-right: 30px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.controls .prev {
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
border-left-width: 0;
border-right-width: 50px;
}
.controls .next {
border-top-color: transparent;
border-bottom-color: transparent;
border-right-color: transparent;
border-left-width: 50px;
border-right-width: 0;
}
.controls .prev:hover {
border-right-color: #888;
cursor: pointer;
}
.controls .next:hover {
border-left-color: #888;
cursor: pointer;
}
.slide h1 {
font-size: 300%;
line-height: 1.2;
text-align: center;
margin: 170px 0 0;
}
.slide h2 {
font-size: 100%;
line-height: 1.2;
margin: 5px 0;
text-align: center;
font-weight: 200;
}
.slide h3 {
font-size: 140%;
line-height: 1.2;
border-bottom: 1px solid #aaa;
margin: 0;
padding-bottom: 15px;
}
.slide ul {
padding: 20px 0 0 60px;
font-weight: 200;
line-height: 1.375;
}
.slide .author h1.name {
font-size: 170%;
font-weight: 200;
text-align: center;
margin-bottom: 30px;
}
.slide .author h3 {
font-weight: 100;
text-align: center;
font-size: 95%;
border: none;
}
a {
text-decoration: none;
color: #44a4dd;
}
a:hover {
color: #66b5ff;
}
pre {
font-size: 60%;
line-height: 1.3;
}
code {
background-color: #e7e7e7;
}
pre > code {
background-color: inherit;
}
.progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
}
.progress-bar {
width: 0%;
height: 3px;
background-color: #b4b4b4;
-webkit-transition: width 0.1s ease-out;
-moz-transition: width 0.1s ease-out;
-o-transition: width 0.1s ease-out;
transition: width 0.1s ease-out;
}
@media (max-width: 850px) {
#wrapper {
width: auto;
}
body {
font-size: 70%;
}
img {
width: 100%;
}
.slide h1 {
margin-top: 120px;
}
.controls .prev, .controls .prev:hover {
border-right-color: rgba(135, 135, 135, 0.5);
}
.controls .next, .controls .next:hover {
border-left-color: rgba(135, 135, 135, 0.5);
}
}
@media (max-width: 480px) {
body {
font-size: 50%;
overflow: hidden;
}
#wrapper {
margin-top: 10px;
height: 340px;
}
.slide {
padding: 10px;
height: 340px;
}
.slide h1 {
margin-top: 50px;
}
.slide ul {
padding-left: 25px;
}
}
</style>
</head>
<body>
<div class="progress">
<div class="progress-bar"></div>
</div>
<div id="wrapper">
<section class="slide"><h1>What Is Threex</h1></section>
<section class="slide"><h3>What we gonna do ?</h3>
<ul>
<li>present what is threex</li>
<li>effort to easy three.js games</li>
<li>extension system - very light, vanilla.js light</li>
</ul></section>
<section class="slide"><h3>Goals</h3>
<ul>
<li>"to make dev of three.js games easy"</li>
</ul></section>
<section class="slide"><h3>Means</h3>
<ul>
<li>dev of game modules around html5 tech</li>
<li>minigame to show off what is possible</li>
<li>documentation and advocaty of the effort</li>
</ul></section>
<section class="slide"><h3>Techs</h3>
<ul>
<li>webgl</li>
<li>webaudioapi</li>
<li>webrtc</li>
<li>websocket</li>
</ul></section>
<section class="slide"><h3>Policy</h3>
<ul>
<li>fix problems people actually have</li>
<li>open standard is prefered</li>
<li>open source is preffered</li>
</ul></section>
<section class="slide"><h1>Existing Code</h1></section>
<section class="slide"><h3>in 3d</h3>
<ul>
<li>all three.js obviously</li>
<li>threex extensions</li>
<li>some good idea in tquery plugins. to import</li>
<li>good stuff to import from babylon.js
<ul><li>it has a game orientation</li></ul></li>
</ul></section>
<section class="slide"><h3>in audio</h3>
<ul>
<li>sound localisation is a key feature</li>
<li>webaudiox.js to ease access to webaudio api</li>
<li>html5rocks tutorial</li>
</ul></section>
<section class="slide"><h3>in physics</h3>
<ul>
<li>not much
<ul><li>due to no clear winner for 'good 3d physics library in js'</li>
<li>mainly because there are no clear winner for 'good 3d physics library in js'</li></ul></li>
<li>some work in threex.cannonjs</li>
<li>maybe something based on obb,aabb, sphere, raycasting
<ul><li>good math in /src/math three.js</li>
<li>it is included in Geometry</li></ul></li>
<li>what babylon.js is doing ?</li>
</ul></section>
<section class="slide"><h3>in inputs</h3>
<ul>
<li>for keyboard, threex.keyboardstate</li>
<li>for touchscreen joystick, simulate arrow and click, virtualjoystick.js</li>
<li>leap motion</li>
<li>device orientation</li>
</ul></section>
<section class="slide"><h3>in user authentication</h3>
<ul>
<li>passport.js with all big social networks</li>
</ul>
<p>-- </p>
<h3>in IA</h3>
<ul>
<li>machine.js</li>
<li>pathfinding.js</li>
</ul></section>
<section class="slide"><h3>about game itself</h3>
<ul>
<li>unclear how much we should do
<ul><li>out of scope of the library ?</li></ul></li>
<li>"maybe you can do that like that, or like this. it is up to you"</li>
<li>component/behavior ? or some other wellknow scheme ?</li>
<li>chat</li>
</ul></section>
</div>
<div class="controls">
<div class="arrow prev"></div>
<div class="arrow next"></div>
</div>
<script type="text/javascript">
/**
* Takes the last slide and places it at the front.
*/
function goBack() {
var wrapper = document.querySelector('#wrapper');
var lastSlide = wrapper.lastChild;
while (lastSlide != null && lastSlide.nodeType !== 1) {
lastSlide = lastSlide.previousSibling;
}
wrapper.removeChild(lastSlide);
wrapper.insertBefore(lastSlide, wrapper.firstChild);
setCurrentProgress();
updateURL();
}
/**
* Takes the first slide and places it at the end.
*/
function goForward() {
var wrapper = document.querySelector('#wrapper');
var firstSlide = wrapper.firstChild;
while (firstSlide != null && firstSlide.nodeType !== 1) {
firstSlide = firstSlide.nextSibling;
}
wrapper.removeChild(firstSlide);
wrapper.appendChild(firstSlide);
setCurrentProgress();
updateURL();
}
/**
* Updates the current URL to include a hashtag of the current page number.
*/
function updateURL() {
window.history.replaceState({} , null, '#' + currentPage());
}
/**
* Returns the current page number of the presentation.
*/
function currentPage() {
return document.querySelector('#wrapper .slide').dataset.page;
}
/**
* Returns a NodeList of each .slide element.
*/
function allSlides() {
return document.querySelectorAll('#wrapper .slide');
}
/**
* Give each slide a "page" data attribute.
*/
function setPageNumbers() {
var wrapper = document.querySelector('#wrapper');
var pages = wrapper.querySelectorAll('section');
var page;
for (var i = 0; i < pages.length; ++i) {
page = pages[i];
page.dataset.page = i;
}
}
/**
* Set the current progress indicator.
*/
function setCurrentProgress() {
var wrapper = document.querySelector('#wrapper');
var progressBar = document.querySelector('.progress-bar');
if (progressBar !== null) {
var pagesNumber = wrapper.querySelectorAll('section').length;
var currentNumber = parseInt(currentPage());
var currentPercent = pagesNumber === 1 ? 100 : 100 * currentNumber / (pagesNumber - 1);
progressBar.style.width = currentPercent.toString() + '%';
}
}
/**
* Go to the specified page of content.
*/
function goToPage(page) {
// Try to find the target slide.
var targetSlide = document.querySelector('#wrapper .slide[data-page="' + page + '"]');
// If it actually exists, go forward until we find it.
if (targetSlide) {
var numSlides = allSlides().length;
for (var i = 0; currentPage() != page && i < numSlides; i++) {
goForward();
}
}
}
window.onload = function () {
// Give each slide a "page" data attribute.
setPageNumbers();
// If the location hash specifies a page number, go to it.
var page = window.location.hash.slice(1);
if (page) goToPage(page);
document.onkeydown = function (e) {
var kc = e.keyCode;
// left, down, H, J, backspace - BACK
// up, right, K, L, space, enter - FORWARD
if (kc == 37 || kc == 40 || kc == 8 || kc == 72 || kc == 74) {
goBack();
} else if (kc == 38 || kc == 39 || kc == 13 || kc == 32 || kc == 75 || kc == 76) {
goForward();
}
}
if (document.querySelector('.next') && document.querySelector('.prev')) {
document.querySelector('.next').onclick = function (e) {
e.preventDefault();
goForward();
}
document.querySelector('.prev').onclick = function (e) {
e.preventDefault();
goBack();
}
}
}
</script>
</body>
</html>