<!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. phpstorm 比较修改过的代码 version control

  2. 学习 vue 需要了解的内容

    总结 vue 的目录 1. vue 基础 指令 事件 动态的属性 组件 动画 2. vue 组件通信 1. 父传子 props 2. 子传父 ref 3. 插槽 4. 组件的生命周期 3. vue 的 ...

  3. airflow当触发具有多层subDAG的任务的时候，出现[Duplicate entry ‘xxxx’ for key dag_id]的错误的问题处理

    当触发一个具有多层subDAG的任务时,会发现执行触发的task任务运行失败,但是需要触发的目标DAG已经在运行了,dag log 错误内容: [2019-11-21 17:47:56,825] {b ...

  4. [占位符 &nbsp; ]

    在做项目的时候,数据库中的数据会存在空值;这样,我们需要在前台给它加以判断, 如果我们不加以判断也是可行的,我们需要添加一个空白占位符  空白占位符 是个不错的选择,这样我们的页面显示数据的时候就不会 ...

  5. Unix介绍

    1965年,AT&T贝尔电话实验室.通用电气公司.麻省理工学院MAC课题组一起联合开发一个称为Multics的新操作系统.该项目目的是让大型主机可以同时提供300台以上的终端机连接使用.其被设 ...

  6. 路由设置中"DHCP服务器"启用或不启用是干嘛的?

    “DHCP服务器”启用的话,每一台连接这个路由器的电脑都会自动获取一个IP地址,并且不会跟其他电脑的想冲突:“DHCP服务器”不启用就必须手动给每一台连接这个路由器的电脑设置本地连接里面的“inter ...

  7. [SPSS]如何利用spss进行单侧检验

    根据网上经验来看,结论如下: 单双侧t检验,t值不变,p值除以2即为单侧p值.

  8. flutter searchDelegate搜索页

    使用searchDelegate可以很轻松实现以下页面 import 'package:flutter/material.dart'; typedef SearchItemCall = void Fu ...

  9. Spark3.0 preview预览版尝试GPU调用（本地模式不支持GPU）

    Spark3.0 preview预览版可以下载使用,地址:https://archive.apache.org/dist/spark/spark-3.0.0-preview/,pom.xml也可以进行 ...

  10. linux常用命令(19)find xargs

    在使用 find命令的-exec选项处理匹配到的文件时, find命令将所有匹配到的文件一起传递给exec执行.但有些系统对能够传递给exec的命令长度有限制,这样在find命令运行几分钟之后,就会出 ...