<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<meta name="keywords" content="">

		<meta name="description" content="">

		<style type="text/css">

			.dt_banner {

				width: 100%;

				height: 710px;

				background-color: #0a2240;

				background-size: cover;

				position: relative;

				overflow: hidden;

			}

			.abc {

				position: absolute;

				top: 0px;

				left: 0;

				z-index: 1;

			}

		</style>

	</head>

	<!--banner-->

	<div class="dt_banner"></div>

	<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

	<script src="js/three.min.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">

		//SEPARATION控制密度,AMOUNTX控制x轴,AMOUNTY控制Y轴

		var SEPARATION = 60,

			AMOUNTX = 70,

			AMOUNTY = 20;

		var container;

		//          1.scene(场景): 场景中包含了所有的3D对象数据

		//          2.camera(相机): 相机有位置（position）,旋转（rotation）和视野属性（field of view）

		//          3.renderer(渲染器): 决定场景中的一个物体在照相机的视角看来是什么样子

		var camera, scene, renderer;

		var banner = $(".dt_banner")

		var particles, particle, count = 0;

		var mouseX = 0,

			mouseY = 0;

		var windowHalfX = window.innerWidth / 2;

		var windowHalfY = window.innerHeight / 2;

		init();

		animate();

		function init() {

			console.log(banner)

			container = document.createElement('div');

			//              container = container.setAttribute('class','abc');

			// 将渲染器的canvas domElement加入到body中

			banner.append(container);

			// 照相机参数

			camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 10000);

			// 将相机向后（即屏幕外）移

			camera.position.z = 1000;

			scene = new THREE.Scene();

			//将粒子加入到particles数组中

			particles = new Array();

			var PI2 = Math.PI * 2;

			var material = new THREE.ParticleCanvasMaterial({

				//修改小点颜色

				color: 0xffffff,

				//                  transparent: true,//是否透明

				//                  opacity:0.5,

				program: function(context) {

					context.beginPath();

					context.arc(0, 0, 1, 0, PI2, false);

					context.fill();

				}

			});

			var i = 0;

			for(var ix = 0; ix < AMOUNTX; ix++) {

				for(var iy = 0; iy < AMOUNTY; iy++) {

					particle = particles[i++] = new THREE.Particle(material);

					particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);

					particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 1.3);

					scene.add(particle);

				}

			}

			renderer = new THREE.CanvasRenderer();

			renderer.setSize(window.innerWidth, window.innerHeight);

			container.appendChild(renderer.domElement);

			container = container.setAttribute('class', 'abc');

			//  document.addEventListener( 'mousemove', onDocumentMouseMove, false );

			//  document.addEventListener( 'touchstart', onDocumentTouchStart, false );

			//  document.addEventListener( 'touchmove', onDocumentTouchMove, false );

			//

			window.addEventListener('resize', onWindowResize, false);

		}

		function onWindowResize() {

			windowHalfX = window.innerWidth / 2;

			windowHalfY = window.innerHeight / 2;

			camera.aspect = window.innerWidth / window.innerHeight;

			camera.updateProjectionMatrix();

			renderer.setSize(window.innerWidth, window.innerHeight);

		}

		//

		function onDocumentMouseMove(event) {

			mouseX = event.clientX - windowHalfX;

			mouseY = event.clientY - windowHalfY;

		}

		function onDocumentTouchStart(event) {

			if(event.touches.length === 1) {

				event.preventDefault();

				mouseX = event.touches[0].pageX - windowHalfX;

				mouseY = event.touches[0].pageY - windowHalfY;

			}

		}

		function onDocumentTouchMove(event) {

			if(event.touches.length === 1) {

				event.preventDefault();

				mouseX = event.touches[0].pageX - windowHalfX;

				mouseY = event.touches[0].pageY - windowHalfY;

			}

		}

		//

		function animate() {

			requestAnimationFrame(animate);

			render();

		}

		function render() {

			camera.position.x += (mouseX - camera.position.x) * .05;

			camera.position.y += (-mouseY - camera.position.y) * .05;

			camera.lookAt(scene.position);

			var i = 0;

			for(var ix = 0; ix < AMOUNTX; ix++) {

				for(var iy = 0; iy < AMOUNTY; iy++) {

					particle = particles[i++];

					//                      particle.position.x = (Math.asin((iy + count) * 0.3) * 500);

					particle.position.y = (Math.sin((ix + count) * 0.3) * 200) + (Math.cos((iy + count) * 0.3) * 150);

					particle.scale.x = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 2 + (Math.sin((iy + count) * 0.5) + 1) * 2;

					//                      particle.scale.z = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 2 + (Math.sin((iy + count) * 0.5) + 1) * 2;

				}

			}

			renderer.render(scene, camera);

			count += 0.03;

		}

	</script>

</html>

three.js - http://github.com/mrdoob/three.js

效果图：

Three.js类似于波浪的效果的更多相关文章

  1. JS实现 类似图片3D效果

    其实这样的效果 目前很多网站上都有 其实以前也写过一个 只是当时代码只是为了实现而已,代码很乱,所以现在有业余时间研究了下,其实也并没有什么特殊地方 很类似于左右控制按钮切换图片的思路.效果如下: 可 ...

  2. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  3. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. [JS,NodeJs]个人网站效果代码集合

    上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...

  5. turn.js实现翻书效果

    JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...

  6. 面向对象原生js幻灯片代淡出效果

    面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  7. Turn.js 实现翻书效果的学习与总结

    最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想 ...

  8. JS 文本输入框放大镜效果

    JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...

  9. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

随机推荐

  1. 梯度下降(Gradient Descent)小结 -2017.7.20

    在求解算法的模型函数时,常用到梯度下降(Gradient Descent)和最小二乘法,下面讨论梯度下降的线性模型(linear model). 1.问题引入 给定一组训练集合(training se ...

  2. Linux安全工具之fail2ban防爆力破解

    一:简单介绍 fail2ban是一款实用软件,可以监视你的系统日志,然后匹配日志的错误信息(正则式匹配)执行相应的屏蔽动作 在企业中,有些很多人会开放root登录,这样就有机会给黑客造成暴力破解的机会 ...

  3. MySQL获取距离

    BEGIN ) ), ) ) ) ) ),))),); END

  4. Struts ognl表达式语言几个符号

    #  获取非根元素值  . 动态都建map集合 $  配置文件取值 %  提供一个ognl表达式运行环境 <%@ page language="java" import=&q ...

  5. AutoResetEvent和ManualResetEvent（多线程操作）

    摘自风中灵药的博客:https://www.cnblogs.com/qingyun163/archive/2013/01/05/2846633.html#!comments AutoResetEven ...

  6. java源码-ReentrantLock源码分析-1

    ReentrantLock 继承于lock是比较常用的独占锁,接下来我们来分析一下ReentrantLock源码以及接口设计: Sync是ReentrantLock的内部静态抽象类继承Abstract ...

  7. etcd安全集群三节点扩容至四个节点

    规划:先安装三台组建集群,然后扩容一个安全节点进来 .环境: 三台centos7. 主机 192.168.0.91 192.168.0.92 192.168.0.93 都关闭防火墙 都关闭selinu ...

  8. WPF子线程更新UI（Dispatcher.BeginInvoke）

       在做WPF开发时,如果直接在子线程里更新UI会报错—–“调用线程无法访问此对象,因为另一个线程拥有该对象.”,这是因为WPF禁止在非UI线程里直接更新UI界面. 解决方案:   在子线程里调用D ...

  9. HCL试验5

    PC端配置:配置ip地址 交换机1配置:①创建VLAN system-view vlan 10 vlan 20 ②配置PC端接口 interface gi 1/0/1 port link-type a ...

  10. 1.2.2 OSI参考模型 上

    一.HCNA网络技术学习指南 为了实现网络的互通及各种各样的网络应用,网络设备需要运行各种各样的协议已实现各种各样具体的功能.面对各种各样且数量繁多的功能,我们可以从网络架构的角度,引入功能分层的模型 ...