<!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. 如何安装Vscode软件及设置成中文界面?

    最新小编开始研究前端,想写点东东玩,要想开始首先就要安装工具,写前端有好几个工具,安装推荐开源的vscode,第一次安装是英文版的,如何修改成中文版,也是很简单的,跟随小编一起来安装设置工具吧. 方法 ...

  2. 百度地图js判断点是否在圆形区域内

    /** * Created by LEGION on 2018/10/11. *//** * @fileoverview GeoUtils类提供若干几何算法,用来帮助用户判断点与矩形. * 圆形.多边 ...

  3. 强大的unique

    强大的unique 两道红题为例眼熟一下unique P1138 第k小整数 题解 这里用到了STL的去重函数哦 unique 首先你有一个待处理的数组 a[n] 一定要先排序鸭  sort( a+1 ...

  4. 前端开发中的Error以及异常捕获

    本文首发于公众号:符合预期的CoyPan 写在前面 在前端项目中,由于JavaScript本身是一个弱类型语言,加上浏览器环境的复杂性,网络问题等等,很容易发生错误.做好网页错误监控,不断优化代码,提 ...

  5. 转载 筛子算法之golang实现求素数解析

    package main import "fmt" // Send the sequence 2, 3, 4, ... to channel 'ch'. func generate ...

  6. LC 644. Maximum Average Subarray II 【lock,hard】

    Given an array consisting of n integers, find the contiguous subarray whose length is greater than o ...

  7. shell案例(6):1、创建用户 2、创建目录 3、创建文件 4、退出

    脚本基本要求 1.创建用户2.创建目录3.创建文件4.退出 #!/bin/bash #author:zhiping.wang Check_error() { ] then echo "$1 ...

  8. oracle 查看数据库和表命令

    1.su – oracle 不是必需,适合于没有DBA密码时使用,可以不用密码来进入sqlplus界面. 2.sqlplus /nolog 或sqlplus system/manager 或./sql ...

  9. rocketmq的windows版客户端的启动步骤

    一.下载RocketMQ首先,我们去下载RocketMQ,RocketMQ 是一个开源的东西,可以去github上面下载,地址是:https://github.com/alibaba/RocketMQ ...

  10. Markdown 介绍

    Markdown 是目前互联网上最流行的写作语言,它使用一些简单的符号(* / ` > [] () #)来标记文本格式,其简洁的语法.优美的格式以及强大的软件支持深受广大网友的喜爱.维基百科上对 ...