three.js实现的波浪效果

看到2016云栖大会页面上three.js实现的波浪效果很赞,所以拔下来分享一下,以备后用。

demo演示:http://www.css88.com/demo/threejs-waves/

下载地址:http://css88.b0.upaiyun.com/css88/2016/04/threejs-waves.zip

CSS背景:

      1. body {
  2.     background-color: #193c6d;
  3.     filter: progid: DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#003073', endColorstr='#029797');
  4.     background-image: url(//img.alicdn.com/tps/TB1d.u8MXXXXXXuXFXXXXXXXXXX-1900-790.jpg);
  5.     background-size: 100%;
  6.     background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0, #003073), color-stop(100%, #029797));
  7.     background-image: -webkit-linear-gradient(135deg, #003073, #029797);
  8.     background-image: -moz-linear-gradient(45deg, #003073, #029797);
  9.     background-image: -ms-linear-gradient(45deg, #003073 0, #029797 100%);
  10.     background-image: -o-linear-gradient(45deg, #003073, #029797);
  11.     background-image: linear-gradient(135deg, #003073, #029797);
  12.     text-align: center;
  13.     margin: 0px;
  14.     overflow: hidden;
  15. }

页面上引入

      1. <script src="js/three.min.js"></script>

JS代码:

      1. var SEPARATION = 100,
  2.         AMOUNTX = 100,
  3.         AMOUNTY = 70;
  4.  
  5.     var container;
  6.     var camera, scene, renderer;
  7.  
  8.     var particles, particle, count = 0;
  9.  
  10.     var mouseX = 85,
  11.         mouseY = -342;
  12.  
  13.     var windowHalfX = window.innerWidth / 2;
  14.     var windowHalfY = window.innerHeight / 2;
  15.  
  16.     init();
  17.     animate();
  18.  
  19.     function init() {
  20.  
  21.         container = document.createElement('div');
  22.         document.body.appendChild(container);
  23.  
  24.         camera = new THREE.PerspectiveCamera(120, window.innerWidth / window.innerHeight, 1, 10000);
  25.         camera.position.z = 1000;
  26.  
  27.         scene = new THREE.Scene();
  28.  
  29.         particles = new Array();
  30.  
  31.         var PI2 = Math.PI * 2;
  32.         var material = new THREE.ParticleCanvasMaterial({
  33.  
  34.             color: 0xe1e1e1,
  35.             program: function(context) {
  36.  
  37.                 context.beginPath();
  38.                 context.arc(0, 0, .6, 0, PI2, true);
  39.                 context.fill();
  40.  
  41.             }
  42.  
  43.         });
  44.  
  45.         var i = 0;
  46.  
  47.         for (var ix = 0; ix < AMOUNTX; ix++) {
  48.  
  49.             for (var iy = 0; iy < AMOUNTY; iy++) {
  50.  
  51.                 particle = particles[i++] = new THREE.Particle(material);
  52.                 particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
  53.                 particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
  54.                 scene.add(particle);
  55.  
  56.             }
  57.  
  58.         }
  59.  
  60.         renderer = new THREE.CanvasRenderer();
  61.         renderer.setSize(window.innerWidth, window.innerHeight);
  62.         container.appendChild(renderer.domElement);
  63.  
  64.         document.addEventListener('mousemove', onDocumentMouseMove, false);
  65.         document.addEventListener('touchstart', onDocumentTouchStart, false);
  66.         document.addEventListener('touchmove', onDocumentTouchMove, false);
  67.  
  68.         //
  69.  
  70.         window.addEventListener('resize', onWindowResize, false);
  71.  
  72.     }
  73.  
  74.     function onWindowResize() {
  75.  
  76.         windowHalfX = window.innerWidth / 2;
  77.         windowHalfY = window.innerHeight / 2;
  78.  
  79.         camera.aspect = window.innerWidth / window.innerHeight;
  80.         camera.updateProjectionMatrix();
  81.  
  82.         renderer.setSize(window.innerWidth, window.innerHeight);
  83.  
  84.     }
  85.  
  86.     //
  87.  
  88.     function onDocumentMouseMove(event) {
  89.  
  90.         mouseX = event.clientX - windowHalfX;
  91.         mouseY = event.clientY - windowHalfY;
  92.  
  93.     }
  94.  
  95.     function onDocumentTouchStart(event) {
  96.  
  97.         if (event.touches.length === 1) {
  98.  
  99.             event.preventDefault();
  100.  
  101.             mouseX = event.touches[0].pageX - windowHalfX;
  102.             mouseY = event.touches[0].pageY - windowHalfY;
  103.  
  104.         }
  105.  
  106.     }
  107.  
  108.     function onDocumentTouchMove(event) {
  109.  
  110.         if (event.touches.length === 1) {
  111.  
  112.             event.preventDefault();
  113.  
  114.             mouseX = event.touches[0].pageX - windowHalfX;
  115.             mouseY = event.touches[0].pageY - windowHalfY;
  116.  
  117.         }
  118.  
  119.     }
  120.  
  121.     //
  122.  
  123.     function animate() {
  124.  
  125.         requestAnimationFrame(animate);
  126.  
  127.         render();
  128.  
  129.  
  130.     }
  131.  
  132.     function render() {
  133.  
  134.         camera.position.x += (mouseX - camera.position.x) * .05;
  135.         camera.position.y += (-mouseY - camera.position.y) * .05;
  136.         camera.lookAt(scene.position);
  137.  
  138.         var i = 0;
  139.  
  140.         for (var ix = 0; ix < AMOUNTX; ix++) {
  141.  
  142.             for (var iy = 0; iy < AMOUNTY; iy++) {
  143.  
  144.                 particle = particles[i++];
  145.                 particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50);
  146.                 particle.scale.x = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 2 + (Math.sin((iy + count) * 0.5) + 1) * 2;
  147.  
  148.             }
  149.  
  150.         }
  151.  
  152.         renderer.render(scene, camera);
  153.  
  154.         count += 0.1;
  155.  
  156.     }
文章出处: WEB前端开发
文章地址: http://www.css88.com/archives/5996
本文地址: http://www.webrube.com/javascript-%E5%8A%A8%E7%94%BB-web_rube/7418
本文由 噜吧 整理,转载请保留以上信息; 如有侵犯您的版权, 请联系 webrube.com@gmail.com 。

本文收录于 2016-04-22 03:17   ,   原文WEB前端开发 发布于 2016-04-09

发表评论