<!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. *CodeIgniter框架集成支付宝即时到账SDK

    客户的网站需要支付功能,我们选择了业界用的最多的支付宝即时到账支付.申请了两次将近两周的时间终于下来了,于是我开始着手测试SDK整合支付流程. SDK中的代码并不复杂,就是构造请求发送,接收并验证签名 ...

  2. HttpClient两种调用方式

    一.参数字符串 /** * HttpClient请求接口 * @return 成功:音频字节 失败:null */ public static byte[] requestBaiduAudio(Str ...

  3. vmvare ubuntu虚拟机固定ip设置

    1.vmvare网络设置 2.window网络设置 3.ubuntu网络设置 先ifconfig 查看ip 已经设置为192.168.122.128 sudo vim /etc/network/int ...

  4. 6.HBase时髦谨慎财会会计

    1.基本概念和原理 2.核心知识点 3.安装部署 4.Hbase开发

  5. vue问题六：表单验证

    表单验证规则 查看文档:https://blog.csdn.net/weixin_42018790/article/details/80762149 1). el-form增加 :rules=&quo ...

  6. vue 默认展开详情页

    { path: '/Tree', component: Tree, children: [ { path: '/', component: Come } ] }

  7. SVN+MAVEN项目打包

    题记:项目打包bash脚本 环境准备 maven版本:3.5.2 mvn -v #查看maven的版本信息 svn版本:1.4.0 svn --version #查看svn版本信息 1.update_ ...

  8. 绝对好用Flash多文件大文件上传控件

    本实例采用的是Uploadify上传插件,.NET程序,源程序是从网上找的,但是有Bug,已经修改好,并标有部分注释.绝对好用,支持单文件.多文件上传,支持大文件上传,已经过多方面测试,保证好用. 以 ...

  9. golang(07)结构体介绍

    golang支持面向对象的设计,一般支持面向对象的语言都会有class的设计,但是golang没有class关键字,只有struct结构体.通过结构体达到类的效果,这叫做大成若缺,其用不弊. stru ...

  10. Invalid Django TIME_ZONE

    在linux操作系统运行,设置的时区在系统文件/usr/share/zoneinfo/中找不到会出现以下错误 raceback (most recent call last): File , in & ...