|
@@ -1,191 +1,191 @@
|
|
|
extends layout
|
|
|
|
|
|
block content
|
|
|
- div.section-center
|
|
|
- div.container
|
|
|
- div.cover.heading JsonBird
|
|
|
- div.cover.description 业界领先的远程 JSON 代理服务<br>#{address}
|
|
|
- div.cover.action
|
|
|
- a.btn.btn-ghost-light(href="/v1/?url=http://www.bing.com/HPImageArchive.aspx?format=js&idx=16&n=1") Quick Start
|
|
|
+ div.section-center
|
|
|
+ div.container
|
|
|
+ div.cover.heading JsonBird
|
|
|
+ div.cover.description 业界领先的远程 JSON 代理服务<br>#{address}
|
|
|
+ div.cover.action
|
|
|
+ a.btn.btn-ghost-light(href="/v1/?url=http://www.bing.com/HPImageArchive.aspx?format=js&idx=16&n=1") Quick Start
|
|
|
|
|
|
- script(src="/static/libs/three/three.min.js")
|
|
|
- script(src="/static/libs/three/Projector.js")
|
|
|
- script(src="/static/libs/three/CanvasRender.js")
|
|
|
- //- script(src="/libs/three/stats.min.js")
|
|
|
- script.
|
|
|
- var SEPARATION = 200, AMOUNTX = 30, AMOUNTY = 30;
|
|
|
+ script(src="/static/libs/three/three.min.js")
|
|
|
+ script(src="/static/libs/three/Projector.js")
|
|
|
+ script(src="/static/libs/three/CanvasRender.js")
|
|
|
+ //- script(src="/libs/three/stats.min.js")
|
|
|
+ script.
|
|
|
+ var SEPARATION = 200, AMOUNTX = 30, AMOUNTY = 30;
|
|
|
|
|
|
- var container, stats;
|
|
|
- var camera, scene, renderer;
|
|
|
+ var container, stats;
|
|
|
+ var camera, scene, renderer;
|
|
|
|
|
|
- var particles, particle, count = 0;
|
|
|
+ var particles, particle, count = 0;
|
|
|
|
|
|
- var mouseX = 0, mouseY = -500;
|
|
|
+ var mouseX = 0, mouseY = -500;
|
|
|
|
|
|
- var windowHalfX = window.innerWidth / 2;
|
|
|
- var windowHalfY = window.innerHeight / 2;
|
|
|
- window.onload = function(){
|
|
|
- init();
|
|
|
- animate();
|
|
|
- //- baidu Analytics
|
|
|
- if(!/^http:\/\/localhost/.test(location.href)){
|
|
|
- var _hmt = _hmt || [];
|
|
|
- var hm = document.createElement("script");
|
|
|
- hm.src = "//hm.baidu.com/hm.js?99d1e1ee6b085485bc6ec3e23b821b49";
|
|
|
- var s = document.getElementsByTagName("script")[0];
|
|
|
- s.parentNode.insertBefore(hm, s);
|
|
|
- }
|
|
|
- };
|
|
|
+ var windowHalfX = window.innerWidth / 2;
|
|
|
+ var windowHalfY = window.innerHeight / 2;
|
|
|
+ window.onload = function(){
|
|
|
+ init();
|
|
|
+ animate();
|
|
|
+ //- baidu Analytics
|
|
|
+ if(!/^http:\/\/localhost/.test(location.href)){
|
|
|
+ var _hmt = _hmt || [];
|
|
|
+ var hm = document.createElement("script");
|
|
|
+ hm.src = "//hm.baidu.com/hm.js?99d1e1ee6b085485bc6ec3e23b821b49";
|
|
|
+ var s = document.getElementsByTagName("script")[0];
|
|
|
+ s.parentNode.insertBefore(hm, s);
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- function init() {
|
|
|
+ function init() {
|
|
|
|
|
|
- container = document.createElement( 'div' );
|
|
|
- document.body.appendChild( container );
|
|
|
+ container = document.createElement( 'div' );
|
|
|
+ document.body.appendChild( container );
|
|
|
|
|
|
- camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
|
|
|
- camera.position.z = 1000;
|
|
|
+ camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
|
|
|
+ camera.position.z = 1000;
|
|
|
|
|
|
- scene = new THREE.Scene();
|
|
|
+ scene = new THREE.Scene();
|
|
|
|
|
|
- particles = new Array();
|
|
|
+ particles = new Array();
|
|
|
|
|
|
- var PI2 = Math.PI * 2;
|
|
|
- var material = new THREE.SpriteCanvasMaterial( {
|
|
|
+ var PI2 = Math.PI * 2;
|
|
|
+ var material = new THREE.SpriteCanvasMaterial( {
|
|
|
|
|
|
- color: 0x558646,
|
|
|
- program: function ( context ) {
|
|
|
+ color: 0x558646,
|
|
|
+ program: function ( context ) {
|
|
|
|
|
|
- context.beginPath();
|
|
|
- context.arc( 0, 0, 0.5, 0, PI2, true );
|
|
|
- context.fill();
|
|
|
+ context.beginPath();
|
|
|
+ context.arc( 0, 0, 0.5, 0, PI2, true );
|
|
|
+ context.fill();
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- } );
|
|
|
+ } );
|
|
|
|
|
|
- var i = 0;
|
|
|
+ var i = 0;
|
|
|
|
|
|
- for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
|
|
|
+ for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
|
|
|
|
|
|
- for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
|
|
|
- particle = particles[ i ++ ] = new THREE.Sprite( material );
|
|
|
- particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
|
|
|
- particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
|
|
|
-
|
|
|
- scene.add( particle );
|
|
|
- //- setTimeout(lazy(particle),300);
|
|
|
- }
|
|
|
+ for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
|
|
|
+ particle = particles[ i ++ ] = new THREE.Sprite( material );
|
|
|
+ particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
|
|
|
+ particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
|
|
|
+
|
|
|
+ scene.add( particle );
|
|
|
+ //- setTimeout(lazy(particle),300);
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- renderer = new THREE.CanvasRenderer();
|
|
|
- renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
- renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
- container.appendChild( renderer.domElement );
|
|
|
+ renderer = new THREE.CanvasRenderer();
|
|
|
+ renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+ container.appendChild( renderer.domElement );
|
|
|
|
|
|
- //- stats = new Stats();
|
|
|
- //- container.appendChild( stats.dom );
|
|
|
+ //- stats = new Stats();
|
|
|
+ //- container.appendChild( stats.dom );
|
|
|
|
|
|
- document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
|
- document.addEventListener( 'touchstart', onDocumentTouchStart, false );
|
|
|
- document.addEventListener( 'touchmove', onDocumentTouchMove, false );
|
|
|
+ document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
|
+ document.addEventListener( 'touchstart', onDocumentTouchStart, false );
|
|
|
+ document.addEventListener( 'touchmove', onDocumentTouchMove, false );
|
|
|
|
|
|
- //
|
|
|
+ //
|
|
|
|
|
|
- window.addEventListener( 'resize', onWindowResize, false );
|
|
|
+ window.addEventListener( 'resize', onWindowResize, false );
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- //- function lazy(particle){
|
|
|
- //- return function(){
|
|
|
- //- render();
|
|
|
- //- }
|
|
|
- //- }
|
|
|
+ //- function lazy(particle){
|
|
|
+ //- return function(){
|
|
|
+ //- render();
|
|
|
+ //- }
|
|
|
+ //- }
|
|
|
|
|
|
- function onWindowResize() {
|
|
|
+ function onWindowResize() {
|
|
|
|
|
|
- windowHalfX = window.innerWidth / 2;
|
|
|
- windowHalfY = window.innerHeight / 2;
|
|
|
+ windowHalfX = window.innerWidth / 2;
|
|
|
+ windowHalfY = window.innerHeight / 2;
|
|
|
|
|
|
- camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
- camera.updateProjectionMatrix();
|
|
|
+ camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
+ camera.updateProjectionMatrix();
|
|
|
|
|
|
- renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- //
|
|
|
+ //
|
|
|
|
|
|
- function onDocumentMouseMove( event ) {
|
|
|
+ function onDocumentMouseMove( event ) {
|
|
|
|
|
|
- mouseX = event.clientX - windowHalfX;
|
|
|
- //- mouseY = event.clientY - windowHalfY;
|
|
|
+ mouseX = event.clientX - windowHalfX;
|
|
|
+ //- mouseY = event.clientY - windowHalfY;
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- function onDocumentTouchStart( event ) {
|
|
|
+ function onDocumentTouchStart( event ) {
|
|
|
|
|
|
- if ( event.touches.length === 1 ) {
|
|
|
+ if ( event.touches.length === 1 ) {
|
|
|
|
|
|
- event.preventDefault();
|
|
|
+ event.preventDefault();
|
|
|
|
|
|
- mouseX = event.touches[ 0 ].pageX - windowHalfX;
|
|
|
- //- mouseY = event.touches[ 0 ].pageY - windowHalfY;
|
|
|
+ mouseX = event.touches[ 0 ].pageX - windowHalfX;
|
|
|
+ //- mouseY = event.touches[ 0 ].pageY - windowHalfY;
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- function onDocumentTouchMove( event ) {
|
|
|
+ function onDocumentTouchMove( event ) {
|
|
|
|
|
|
- if ( event.touches.length === 1 ) {
|
|
|
+ if ( event.touches.length === 1 ) {
|
|
|
|
|
|
- event.preventDefault();
|
|
|
+ event.preventDefault();
|
|
|
|
|
|
- mouseX = event.touches[ 0 ].pageX - windowHalfX;
|
|
|
- //- mouseY = event.touches[ 0 ].pageY - windowHalfY;
|
|
|
+ mouseX = event.touches[ 0 ].pageX - windowHalfX;
|
|
|
+ //- mouseY = event.touches[ 0 ].pageY - windowHalfY;
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- //
|
|
|
+ //
|
|
|
|
|
|
- function animate() {
|
|
|
+ function animate() {
|
|
|
|
|
|
- requestAnimationFrame( animate );
|
|
|
+ requestAnimationFrame( animate );
|
|
|
|
|
|
- render();
|
|
|
- //- stats.update();
|
|
|
+ render();
|
|
|
+ //- stats.update();
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
- function render() {
|
|
|
+ function render() {
|
|
|
|
|
|
- camera.position.x += ( mouseX - camera.position.x ) * .05;
|
|
|
- camera.position.y += ( - mouseY - camera.position.y ) * .05;
|
|
|
- camera.lookAt( scene.position );
|
|
|
+ camera.position.x += ( mouseX - camera.position.x ) * .05;
|
|
|
+ camera.position.y += ( - mouseY - camera.position.y ) * .05;
|
|
|
+ camera.lookAt( scene.position );
|
|
|
|
|
|
- var i = 0;
|
|
|
+ var i = 0;
|
|
|
|
|
|
- for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
|
|
|
+ for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
|
|
|
|
|
|
- for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
|
|
|
+ for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
|
|
|
|
|
|
- particle = particles[ i++ ];
|
|
|
- particle.position.y = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) +
|
|
|
- ( Math.sin( ( iy + count ) * 0.5 ) * 50 );
|
|
|
- particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 4 +
|
|
|
- ( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 4;
|
|
|
+ particle = particles[ i++ ];
|
|
|
+ particle.position.y = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) +
|
|
|
+ ( Math.sin( ( iy + count ) * 0.5 ) * 50 );
|
|
|
+ particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 4 +
|
|
|
+ ( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 4;
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- renderer.render( scene, camera );
|
|
|
+ renderer.render( scene, camera );
|
|
|
|
|
|
- count += 0.1;
|
|
|
+ count += 0.1;
|
|
|
|
|
|
- }
|
|
|
+ }
|