mirror of
https://github.com/WhitestormJS/whs.js.git
synced 2026-01-25 16:08:01 +00:00
193 lines
7.7 KiB
HTML
193 lines
7.7 KiB
HTML
<!doctype html>
|
|
<html lang="en-US">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="description" content="WhitestormJS is a 3D Javascript engine based on Three.js (http://threejs.org/). It uses physics and effects libraries to define WhitestormJS API that contains useful scripts for terrain generation, skybox, animation, physics simulation and post-effects. WhitestormJS simplifies Three.js object crafting algorithm to javascript methods with parameters." />
|
|
<meta name="keywords" content="three.js,cannon.js,webgl,wagner,WHS.API,3d,web,javascript" />
|
|
<meta name="author" content="Alexander Buzin">
|
|
<meta property="og:title" content="WhitestormJS 3D Engine" />
|
|
<meta property="og:site_name" content="WhitestormJS 3D Engine" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:locale" content="en_US">
|
|
<meta property="og:url" content="http://www.jsdelivr.com/projects/whitestormjs" />
|
|
<meta property="og:description" content="WhitestormJS is a 3D Javascript engine based on Three.js (http://threejs.org/). It uses physics and effects libraries to define WhitestormJS API that contains useful scripts for terrain generation, skybox, animation, physics simulation and post-effects. WhitestormJS simplifies Three.js object crafting algorithm to javascript methods with parameters." />
|
|
<meta name="twitter:card" content="summary" />
|
|
<meta name="twitter:site" content="@whitestormjs" />
|
|
<meta name="twitter:title" content="whitestormjs" />
|
|
<meta name="twitter:description" content="WhitestormJS 3D Engine" />
|
|
<link rel="shortcut icon" type="image/x-icon" href="http://whitestormjs.xyz/favicon.ico" />
|
|
<link rel="apple-touch-icon-precomposed" href="http://whitestormjs.xyz/favicon.ico" sizes="57x57" />
|
|
<meta name="msapplication-square150x150logo" content="../development/art/logo/Icon-72@2.png" />
|
|
<style>
|
|
@import url(https://fonts.googleapis.com/css?family=Nunito|Abel);
|
|
@import url(https://fonts.googleapis.com/css?family=Inconsolata);
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #fff;
|
|
}
|
|
|
|
#showcase {
|
|
position: absolute;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
z-index: 1;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.item {
|
|
transition: all 0.3s ease-in-out;
|
|
|
|
width: 25%;
|
|
padding-bottom: 11%;
|
|
background-size: 120%;
|
|
background-position: center center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.item:hover {
|
|
transition: all 0.3s ease-in-out;
|
|
|
|
background-position: 30%;
|
|
}
|
|
|
|
.item.placeholder {
|
|
background-color: #65737e;
|
|
width: calc(25% - 2px);
|
|
border: 1px solid #4f5b66;
|
|
}
|
|
|
|
.item .splash {
|
|
transition: all 0.3s ease-in;
|
|
|
|
position: absolute;
|
|
transform: translateX(20px);
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(255,255,255,0.8);
|
|
opacity: 0;
|
|
}
|
|
|
|
.item:hover .splash {
|
|
transition: all 0.3s ease-in;
|
|
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.item .splash h4 {
|
|
padding: 10px;
|
|
margin: 0;
|
|
font-family: 'Nunito';
|
|
color: black;
|
|
}
|
|
|
|
.item .splash h4 span {
|
|
color: #00f1ff;
|
|
text-shadow: 0px 0px 1px black;
|
|
}
|
|
|
|
.item .splash h4 span.type {
|
|
color: #08ffb1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<section>
|
|
<div id="showcase">
|
|
<div class="item" style="background-image: url('./basic/helloworld/screenshot.png');">
|
|
<a href="./basic/helloworld/"><div class="splash">
|
|
<h4>Hello world <span>- example</span><span class="type"> - basic</span></h4>
|
|
</div></a>
|
|
</div>
|
|
<div class="item" style="background-image: url('./basic/model/screenshot.png');">
|
|
<a href="./basic/model/"><div class="splash">
|
|
<h4>Model <span>- example</span><span class="type"> - basic</span></h4>
|
|
</div></a>
|
|
</div>
|
|
<div class="item" style="background-image: url('./basic/extending/screenshot.png');">
|
|
<a href="./basic/extending/"><div class="splash">
|
|
<h4>Extending API <span>- example</span><span class="type"> - basic</span></h4>
|
|
</div></a>
|
|
</div>
|
|
<div class="item" style="background-image: url('./basic/debugging/screenshot.png');">
|
|
<a href="./basic/debugging/"><div class="splash">
|
|
<h4>Debugging <span>- example</span><span class="type"> - basic</span></h4>
|
|
</div></a>
|
|
</div>
|
|
<div class="item" style="background-image: url('./basic/softbody/screenshot.png');">
|
|
<a href="./basic/softbody/"><div class="splash">
|
|
<h4>Softbody <span>- example</span><span class="type"> - basic</span></h4>
|
|
</div></a>
|
|
</div>
|
|
<div class="item" style="background-image: url('./basic/threejs/screenshot.png');">
|
|
<a href="./basic/threejs/"><div class="splash">
|
|
<h4>Three.js <span>- example</span><span class="type"> - basic</span></h4>
|
|
</div></a>
|
|
</div>
|
|
|
|
<div class="item" style="background-image: url('./design/easter/screenshot.png');">
|
|
<a href="./design/easter/"><div class="splash">
|
|
<h4>Easter <span>- example</span><span class="type"> - design</span></h4>
|
|
</div></a>
|
|
</div>
|
|
<div class="item" style="background-image: url('./design/saturn/screenshot.png');">
|
|
<a href="./design/saturn/"><div class="splash">
|
|
<h4>Saturn planet <span>- example</span><span class="type"> - design</span></h4>
|
|
</div></a>
|
|
</div>
|
|
<div class="item" style="background-image: url('./design/points/screenshot.png');">
|
|
<a href="./design/points/"><div class="splash">
|
|
<h4>Cube from particles <span>- example</span><span class="type"> - design</span></h4>
|
|
</div></a>
|
|
</div>
|
|
<div class="item" style="background-image: url('./fps/shooter/screenshot.png');">
|
|
<a href="./fps/shooter/"><div class="splash">
|
|
<h4>Shooter <span>- example</span><span class="type"> - fps</span></h4>
|
|
</div></a>
|
|
</div>
|
|
<div class="item" style="background-image: url('./fps/fog/screenshot.png');">
|
|
<a href="./fps/fog/"><div class="splash">
|
|
<h4>Fog <span>- example</span><span class="type"> - fps</span></h4>
|
|
</div></a>
|
|
</div>
|
|
|
|
<div class="item" style="background-image: url('./physics/domino/screenshot.png');">
|
|
<a href="./physics/domino/"><div class="splash">
|
|
<h4>Dominoes <span>- example</span><span class="type"> - physics</span></h4>
|
|
</div></a>
|
|
</div>
|
|
<div class="item" style="background-image: url('./performance/sticks/screenshot.png');">
|
|
<a href="./performance/sticks/"><div class="splash">
|
|
<h4>Sticks <span>- example</span><span class="type"> - performance</span></h4>
|
|
</div></a>
|
|
</div>
|
|
|
|
<div class="item" style="background-image: url('./post-processing/basic-glitch/screenshot.png');">
|
|
<a href="./post-processing/basic-glitch/"><div class="splash">
|
|
<h4>Post Processing - Basic <span>- example</span><span class="type"> - Glitch</span></h4>
|
|
</div></a>
|
|
</div>
|
|
<div class="item placeholder">
|
|
<a href="#"><div class="splash">
|
|
<h4>Placeholder <span>- example</span><span class="type"> - basic</span></h4>
|
|
</div></a>
|
|
</div>
|
|
<div class="item placeholder">
|
|
<a href="#"><div class="splash">
|
|
<h4>Placeholder <span>- example</span><span class="type"> - basic</span></h4>
|
|
</div></a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</body>
|
|
</html>
|