<!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. 一、基础篇--1.2Java集合-HashMap和ConcurrentHashMap的区别【转】

    http://www.importnew.com/28263.html 今天发一篇”水文”,可能很多读者都会表示不理解,不过我想把它作为并发序列文章中不可缺少的一块来介绍.本来以为花不了多少时间的,不 ...

  2. TensorFlow 学习（3）——MNIST机器学习入门

    通过对MNIST的学习,对TensorFlow和机器学习快速上手. MNIST:手写数字识别数据集 MNIST数据集 60000行的训练数据集 和 10000行测试集 每张图片是一个28*28的像素图 ...

  3. [go]unsafe.Sizeof浅析

    sizeof 如果x为一个切片,sizeof返回的大小是切片的描述符,而不是切片所指向的内存的大小. 那么这里如果换成一个数组呢?而不是一个切片 arr := [...]int{1,2,3,4,5} ...

  4. 使用Navicat Premium 客户端绕过白名单限制mysql数据库

    针对有些数据库有白名单限制,但如果IP经常浮动的话,会要经常加白名单,但如果知道可以连接数据库的linux用户密码就能 通过SSH通道代理来连接数据库.保存密码后,这样就能直接连接数据库,减省很多麻烦 ...

  5. JVM内存模型及配置参数

    JVM 分为堆.栈.方法区.程序计数器.本地方法栈 栈内存存放局部变量表.操作栈.动态链接.方法出口等信息 1.  局部变量表存放了编译期可知的各种基本数据类型(boolean.byte.char.s ...

  6. Spring学习之==>入门知识

    一.Spring是什么? Spring 是一种轻量级的.非侵入式的 Java/JavaEE 应用框架.Spring 使用的是基本的 JavaBean 来完成以前只可能由EJB完成的事情.然而,Spri ...

  7. mac 安装photoshop + 破解

    项目开发中毫无疑问会用到图片,一般情况都是UI将图片切好的,只是,有时候项目中少了一张图片或者是改变图片的尺寸之类的问题,这里我们就不需要每次都找UI要图片了,作为程序员这些基础工具的使用,咱们还是要 ...

  8. 如何在robotframework基础上使用数据驱动测试

    一.写在前面 robotframework是很好用的关键字驱动测试框架,但是在实际工作中也有些地方使用不便,比如在我们设计参数校验测试case时,往往只是想修改校验参数类型而不得不做大量复制粘贴操作, ...

  9. Leetcode之动态规划（DP）专题-72. 编辑距离（Edit Distance）

    Leetcode之动态规划(DP)专题-72. 编辑距离(Edit Distance) 给定两个单词 word1 和 word2,计算出将 word1 转换成 word2 所使用的最少操作数 . 你可 ...

  10. USACO4.4 Frame Up【拓扑排序】

    题意居然还读了好久... 读完题目之后大概就知道拓扑排序了.用拓扑可以求出一些字母之间的关系,谁先,谁后.但是这个关系不是唯一确定的,所以就会产生多种方案(题目还要求按字典序输出所有的方案) 输出方案 ...