You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
216 lines
8.7 KiB
216 lines
8.7 KiB
<html lang="en"><head>
|
|
<title>Clouds</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
<style type="text/css">
|
|
|
|
body {
|
|
background-color: #326696;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
font-family:Monospace;
|
|
font-size:13px;
|
|
text-align:center;
|
|
font-weight: bold;
|
|
text-align:center;
|
|
}
|
|
|
|
a {
|
|
color:#0078ff;
|
|
}
|
|
|
|
.cabin{
|
|
background: url('x-wing.png');
|
|
background-size: cover;
|
|
background-position: center bottom;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
cursor:crosshair;
|
|
}
|
|
|
|
</style>
|
|
<body>
|
|
|
|
<script type="text/javascript" src="js/three.min.js"></script>
|
|
<script type="text/javascript" src="js/Detector.js"></script>
|
|
|
|
<script id="vs" type="x-shader/x-vertex">
|
|
|
|
varying vec2 vUv;
|
|
|
|
void main() {
|
|
|
|
vUv = uv;
|
|
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<script id="fs" type="x-shader/x-fragment">
|
|
|
|
uniform sampler2D map;
|
|
|
|
uniform vec3 fogColor;
|
|
uniform float fogNear;
|
|
uniform float fogFar;
|
|
|
|
varying vec2 vUv;
|
|
|
|
void main() {
|
|
|
|
float depth = gl_FragCoord.z / gl_FragCoord.w;
|
|
float fogFactor = smoothstep( fogNear, fogFar, depth );
|
|
|
|
gl_FragColor = texture2D( map, vUv );
|
|
gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 );
|
|
gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
|
var container;
|
|
var camera, scene, renderer;
|
|
var mesh, geometry, material;
|
|
|
|
var mouseX = 0, mouseY = 0;
|
|
var start_time = Date.now();
|
|
|
|
var windowHalfX = window.innerWidth / 2;
|
|
var windowHalfY = window.innerHeight / 2;
|
|
|
|
init();
|
|
|
|
function init() {
|
|
|
|
container = document.createElement( 'div' );
|
|
document.body.appendChild( container );
|
|
|
|
// Bg gradient
|
|
|
|
var canvas = document.createElement( 'canvas' );
|
|
canvas.width = 32;
|
|
canvas.height = window.innerHeight;
|
|
|
|
var context = canvas.getContext( '2d' );
|
|
|
|
var gradient = context.createLinearGradient( 0, 0, 0, canvas.height );
|
|
gradient.addColorStop(0, "#1e4877");
|
|
gradient.addColorStop(0.5, "#4584b4");
|
|
|
|
context.fillStyle = gradient;
|
|
context.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
container.style.background = 'url(' + canvas.toDataURL('image/png') + ')';
|
|
container.style.backgroundSize = '32px 100%';
|
|
|
|
//
|
|
|
|
camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 3000 );
|
|
camera.position.z = 6000;
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
geometry = new THREE.Geometry();
|
|
|
|
var texture = THREE.ImageUtils.loadTexture( 'cloud10.png', null, animate );
|
|
texture.magFilter = THREE.LinearMipMapLinearFilter;
|
|
texture.minFilter = THREE.LinearMipMapLinearFilter;
|
|
|
|
var fog = new THREE.Fog( 0x4584b4, - 100, 3000 );
|
|
|
|
material = new THREE.ShaderMaterial( {
|
|
|
|
uniforms: {
|
|
|
|
"map": { type: "t", value: texture },
|
|
"fogColor" : { type: "c", value: fog.color },
|
|
"fogNear" : { type: "f", value: fog.near },
|
|
"fogFar" : { type: "f", value: fog.far },
|
|
|
|
},
|
|
vertexShader: document.getElementById( 'vs' ).textContent,
|
|
fragmentShader: document.getElementById( 'fs' ).textContent,
|
|
depthWrite: false,
|
|
depthTest: false,
|
|
transparent: true
|
|
|
|
} );
|
|
|
|
var plane = new THREE.Mesh( new THREE.PlaneGeometry( 64, 64 ) );
|
|
|
|
for ( var i = 0; i < 8000; i++ ) {
|
|
|
|
plane.position.x = Math.random() * 1000 - 500;
|
|
plane.position.y = - Math.random() * Math.random() * 200 - 15;
|
|
plane.position.z = i;
|
|
plane.rotation.z = Math.random() * Math.PI;
|
|
plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;
|
|
|
|
THREE.GeometryUtils.merge( geometry, plane );
|
|
|
|
}
|
|
|
|
mesh = new THREE.Mesh( geometry, material );
|
|
scene.add( mesh );
|
|
|
|
mesh = new THREE.Mesh( geometry, material );
|
|
mesh.position.z = - 8000;
|
|
scene.add( mesh );
|
|
|
|
renderer = new THREE.WebGLRenderer( { antialias: false } );
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
container.appendChild( renderer.domElement );
|
|
|
|
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
window.addEventListener( 'resize', onWindowResize, false );
|
|
|
|
}
|
|
|
|
function onDocumentMouseMove( event ) {
|
|
|
|
mouseX = ( event.clientX - windowHalfX ) * 0.25;
|
|
mouseY = ( event.clientY - windowHalfY ) * 0.15 + 80;
|
|
|
|
}
|
|
|
|
function onWindowResize( event ) {
|
|
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
}
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
position = ( ( Date.now() - start_time ) * 0.03 ) % 8000;
|
|
|
|
camera.position.x += ( mouseX - camera.position.x ) * 0.01;
|
|
camera.position.y += ( - mouseY - camera.position.y ) * 0.01;
|
|
camera.position.z = - position + 8000;
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<div style="background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAPjCAYAAADV7gxzAAAKN0lEQVR4Xu3d51KVSRDG8ekbWVExoIIJERXBWLVGzDkHFLOugSDZhFkEc46I6+rq3t/Z6h7v4f9W8cwXPnLqNz3PdL/vEe2PPy+VErjsjxUtpVQqpWSWiJ+GC4xZ0VIqlUrJzBLyMwQgfv+9FgIpJUspIT9dAOMvhsCKlhLG71s/ZmUrnAOjXsCPIZsDXgPgiiBCBcpWtrJJGMcQXFa2sq1USqVkyRLy0wXQJCxb1cb2AyFANSN+G7oA0wjkBiQuI14APYa+BeCyslXtJagbjCLIRQguG7u6nc2BECDngkIIoDkQAuRkVLa6nb0NXQA8hcl4gTWX2ckoBMh+YCwtEEWIJqELgMtiC8Bl49ZcZpOQF1jbwfYDLoCNZT4QjiuEAJmELgCewmRj13SUwCDMNYAK8B+gsZPtB7IA94zExjd2skkYAuAxyALkXDBubSebA7xAYyc7GY1f1wXnQAhAj2m9H8AFvAjZHPAaAJeNb+zyZ/XYkzorX9fFJmEUIbisfH03extmAa4IiiGAPiHJNYB9icajuJvtB1wAPIXJxq/vZvuB8vU97BuTvAVkDmzoYTuiECDnggkbetgcKIYAORmVb+hhc2DChl72GxS8wMZeOAe8BsjnhBNCgDsG5kHEJqELgMtiC8BlEzf2sTnAC2zqYycjF0BzYGIIgHNBIQTAU5hswqY+th+YuOkKOxd4EaJbMHHzFbYfyALgZJQFwH4gBMjJaNLmK+xzwjiGXAkkm7T5KtsPeBGCAMkmbbnK9gNZAHxj4gJsDrgAORmFALjiGLI5sOUa2w/gWzB56zU2B7IAl4WWBcC5wAXQHAgBriHyy+ga+8Zk8tbrcA5svcb2A5O3XWfnAi9CNgdCgDsGEUToXFCx7TqbhHEMuasgWQhwJZDMjyEI4AI32MkoC4BzQcX2G2xHFALkXOACbBJuu8H2AyEALivAB+hnO6IswGWhTdnRz+ZACJDPCbMAOBlVbO9ncyAEyH6gYkc/2w9M2XETzoEQAPuBKTtvspORFyGbAyHAHQOLIuSugmRTd95kc6AAArfYucCPIZoDU3fdYvuBQgiwObDzFtsPeA2AY4EH0S04CXfdZvuBvAXcZWDTdt9mc6AgAuBcMNWLkCuBlGuAa4iSuQA4GrrAHbYfmLr7NtsPTNtzh50LCiLAHYMoQjYHvAbAxQtU7rnL5kAcQ7AIrHLvXbYfcAF0MsoCYD8QAuQbExdAJ6Npe+6y/UDl3nvsXBBbAC4riADXFlvVvntsDkQNgG1xEQTusTlQte8+2w9U7rvHvjFxAexvgPhf680C4BuTqv332dswBMh+ABeIIuSugmRV+x+wpyC2AFw2ff8DNgmzAFcENv3AA7YfcAE0Bwog8IDtB6YfGKBzYLQLeBGyOXBwgO0HcIEZBwfYJIxjyF0FyWYcfMjehi4AjoZFEDg4wM4FMw49hHNg1Av4MWRz4NAg2w/gAjMPDbJJGMcQLAKbeXiQvQ1dAH1CUgCBQfY2DAHu1XGyGYdwgSE4CQ8PwqegaYj9BoUXIZuEIcAdA5t5eIjtB2Y1DbF3QQEEHrH9wMymITYHZjWNeoEjj+AcaHrE9gOzaAEvQrApTjbryGO2H4gtAAls9pHHbBLyAkcfs7ehFyH6lGy2BI4+gXPg6GO2H5hNC3gRsknY/ITtB2ILyPcF1c1P2CQsgMBT9jbMApYS9N1eq26mBZqfsElYfewpfAqan7LfpnMB9AnJbBfgDkGy6mPP2H7AjyGbA7iAFyF4Hdqc48/YHMhFyK1iCKA5MOf4c7Yf8BrABdBvVlcff8b2A3NOPGdvQw8iNgl5gefsZFRz4gWbAx5E4GWYjBc48ZzNgSwAHkQPIvQbFDUnX8BJeOIFexvWnHzJvj2fUwgBcDi0KEIwCi1qAFy8wNxTL9nJKLaAfFI699Qr9u8PuAA6F4SA/8tH6h891px6yd6GLgDGQDJe4PQrth+ILUBz4PRrth/ABWpPv2ZzYK4XIVgElgXAj+ACWAz7BVB75jXbD8w9/Zq9DWvPvIFzoBAC5FzgxxB9YxI1AK44hmAMJZt39g2bA/gWzDv7lp0LXACdC0KAnAuygCWvROKnZQHwINaefcP2A/POvWXngtqzb9lvUOACXoRgU5xs3rl37DcosgD3JRKbf+4dm4RRhGAR2Py/3rH9gBch+HggFUSAOwQu8B7OAa8Bsh/ABfwYwjngNcCt30UIfoAF59+zSRhFCEahLTj/gZ2MXADNgRAgJ6P559+zc4ELcIcwJZt//gPbDyy48IGdjGIL0By48JF9UpoFuJbIFrgA+aQ0ihAsAqu78JF9QpK3gFtWd/Ej2w+4AHgIktVd/MT2A1kAfE7oAmwOXPzI9gNZgFtRhNyvT8nqLn1i+wFcYOGlz2wOhAAYhRYC5FzgAmgSZgGwJam79JmdCxa2fIZzgBcYZucCL0KwKU62sGWY7QeyADgZ1bcMszkQxxAsAqtvHWbnAi9C8PFAsvrWL2w/EALcIcgC6FyQBcDJKAtwyxa2+ikA/zef+rYvbD+Ab0F92wjbD4QAGIXW0DbCzgVZgIvC3wLghezHEM2BXAOowAjbDzS0f4VzoG2E7QdwAS9CNge8BsBlDe0j7FywqP0rmwNRhOCyRZf/ZucCFwAvw1QUAXAu8BoAazBZw+WvbD+AC/AfoOMb2w+EADkXLO74xiZhFgDnghAgu+JFHR5EXBFYAQS+sXPB4s5/4FPQUQAB6s/E+u+1RS5APif0GkCflPoxZJMwBLhleQu4ZUu6PAcStwsFEPjOJqELoDmwpOs7+6S0EALcIUzJFnd9Z/uBJd3f2TcmXoToFizp/sFORiFAzgVLu3+wOVAQAXA08SLk5qKUbGnPD7YfKIDAv3AOeA2Qc8HSHljAg4hNQhcAl8UWgEsfwJb1/mTngqgBsh8ohACahCFAPild2vuT7QdcAMyhZLxA3y+2H4gtQHNg1Ass7/vF5sAy3wJwWSEE0Mlo+ZX/2H7AawC9DV0AfWNSDAH0GPoWgMuiBsClDyABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgARwgf8BbJIvirpPSn8AAAAASUVORK5CYII=");">
|
|
<canvas width="1920" height="995" style="width: 1920px; height: 995px;"></canvas>
|
|
<div class="cabin"></div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|