<!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. Python中循环及判断语句

    循环判断条件是编程语言中一个很重要的部分,python也不例外,循环判断条件一般结合continue,return,break关键字来判断,这些关键字用法与java中基本一致 一.if判断语句 判断条 ...

  2. ipv4 ipv6 求字符串和整数一一映射的算法 AmazonOrderId

    字符串和整数一一映射的算法 公司每人的英文名不同,现在给每个英文名一个不同的数字编号,怎么设计? 走ipv4/6  2/32 2/128就够了,把“网段”概念对应到“表或库”,ip有a_e5类,这概念 ...

  3. 自定义application的全局捕获异常实现

    package com.loaderman.global; import android.app.Application; import android.os.Environment; import ...

  4. mongodb将mysql数据导入

    1.首先将数据从mysql数据库导出为xls文件 SELECT * FROM user INTO OUTFILE "F:\1.xls" 2.notepad++打开,用utf8编码保 ...

  5. 内存数据库：memcached与redis技术的对比试验

    本文以高性能nginx服务器为应用背景,想利用缓存技术来减轻系统负荷,加快响应时间,从而增加web服务器的吞吐量. redis是一种分布式内存数据库,memcached是一种内存缓存技术,它们都采用k ...

  6. user_tab_columns和user_col_comments区别

    SELECT USER_TAB_COLUMNS.COLUMN_NAME, USER_COL_COMMENTS.COMMENTS, CASE WHEN INSTR(USER_TAB_COLUMNS.DA ...

  7. ABAP Field+offset字符串截取

    *删除字符串末尾的字符 DATA:str TYPE string VALUE 'abc,defg,', sub_str TYPE string, num TYPE i. WRITE:/ str. nu ...

  8. ios8唤不起APP的问题

    https://stackoverflow.com/questions/27526966/ios-8-window-location-href-doesnt-work-with-url-scheme ...

  9. Intervals and Timeouts

    Intervals var num = 0; var max = 10; function incrementNumber(){ num++; // if the max has not been r ...

  10. httpClient 进行get请求

    String url = baseUrl; logger.info("checkIfTheFolderIsExist"); CloseableHttpClient httpClie ...