mirror of
https://github.com/WhitestormJS/whs.js.git
synced 2026-01-18 16:03:24 +00:00
208 lines
9.9 KiB
HTML
208 lines
9.9 KiB
HTML
<!doctype html>
|
|
<html lang="en-US">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>WhitestormJS development</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" />
|
|
<script src="../libs/three.js"></script>
|
|
<script src="../libs/physi.js"></script>
|
|
|
|
<script src="plugins/whs.preload.js"></script>
|
|
<style>
|
|
/* Preloading animation */
|
|
|
|
#animation {
|
|
-webkit-animation: play 2s steps(100) infinite;
|
|
-moz-animation: play 2s steps(100) infinite;
|
|
-o-animation: play 2s steps(100) infinite;
|
|
animation: play 2s steps(100) infinite;
|
|
margin-left: calc(50% - 50px);
|
|
}
|
|
|
|
@-webkit-keyframes play {
|
|
100% { transform: translateX(-10000px); }
|
|
}
|
|
@-moz-keyframes play {
|
|
100% { transform: translateX(-10000px); }
|
|
}
|
|
@-o-keyframes play {
|
|
100% { transform: translateX(-10000px); }
|
|
}
|
|
@keyframes play {
|
|
100% { transform: translateX(-10000px); }
|
|
}
|
|
|
|
.sprite-right {
|
|
content: "";
|
|
position: fixed;
|
|
width: 10000px;
|
|
height: 100px;
|
|
display: block;
|
|
top: calc(50% - 50px);
|
|
left: calc(50% + 50px);
|
|
z-index: 3;
|
|
background: black;
|
|
}
|
|
|
|
.sprite-left {
|
|
content: "";
|
|
position: fixed;
|
|
width: 10000px;
|
|
height: 100px;
|
|
display: block;
|
|
top: calc(50% - 50px);
|
|
right: calc(50% + 50px);
|
|
z-index: 3;
|
|
background: black;
|
|
}
|
|
|
|
.whs {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.whs > canvas {
|
|
width: inherit !important;
|
|
height: inherit !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="preloader" style="width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
z-index: 999;
|
|
background: black;">
|
|
|
|
<div class="sprite-left"></div>
|
|
<div class="sprite-right"></div>
|
|
|
|
<center style="vertical-align: middle; top: calc(50% - 50px); position:relative;">
|
|
<div id="animation" style="background: url('data:image/png;base64,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'); background-size: auto 100%; width:10000px; height:100px;"></div>
|
|
</center>
|
|
</div>
|
|
<script src="../build/whitestorm.js"></script>
|
|
<script defer>
|
|
|
|
// NOTE: Basic scene with sphere and ground.
|
|
var preloader = Preloader();
|
|
|
|
var GAME = new WHS.World({
|
|
|
|
stats: "fps", // fps, ms, mb
|
|
autoresize: true,
|
|
|
|
gravity: {
|
|
x: 0,
|
|
y: -100,
|
|
z: 0
|
|
},
|
|
|
|
camera: {
|
|
far: 10000,
|
|
y: 10,
|
|
z: 30
|
|
}
|
|
|
|
});
|
|
|
|
var torusknot = GAME.Torusknot({
|
|
|
|
geometry: {
|
|
radius:5,
|
|
tube: 2
|
|
},
|
|
|
|
mass: 10,
|
|
|
|
material: {
|
|
vertexColors: THREE.VertexColors,
|
|
shading: THREE.SmoothShading,
|
|
map: WHS.API.texture('assets/textures/bricks.jpg'),
|
|
kind: "phong"
|
|
},
|
|
|
|
pos: {
|
|
x: 0,
|
|
y: 100,
|
|
z: 0
|
|
}
|
|
|
|
});
|
|
|
|
var ground = GAME.Plane({
|
|
|
|
geometry: {
|
|
width: 250,
|
|
height: 250,
|
|
},
|
|
|
|
material: {
|
|
color: 0x0000ff,
|
|
shading: THREE.SmoothShading,
|
|
kind: "basic"
|
|
},
|
|
|
|
pos:{
|
|
x: 0,
|
|
y: 0,
|
|
z: 0
|
|
},
|
|
|
|
rot: {
|
|
x: -Math.PI/2
|
|
}
|
|
|
|
});
|
|
|
|
GAME.light = GAME.DirectionalLight({
|
|
|
|
color: 0xffffff, //0x00ff00,
|
|
intensity: 2,
|
|
|
|
pos: {
|
|
x: 0,
|
|
y: 10,
|
|
z: 30
|
|
},
|
|
|
|
target: {
|
|
x: 0,
|
|
y: 0,
|
|
z: 0
|
|
}
|
|
|
|
});
|
|
|
|
GAME.start();
|
|
|
|
GAME.OrbitControls(GAME.torusknot);
|
|
|
|
preloader.check();
|
|
|
|
</script>
|
|
</html>
|