Three.js类似于波浪的效果
<!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类似于波浪的效果的更多相关文章
- JS实现 类似图片3D效果
其实这样的效果 目前很多网站上都有 其实以前也写过一个 只是当时代码只是为了实现而已,代码很乱,所以现在有业余时间研究了下,其实也并没有什么特殊地方 很类似于左右控制按钮切换图片的思路.效果如下: 可 ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [JS,NodeJs]个人网站效果代码集合
上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...
- turn.js实现翻书效果
JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...
- 面向对象原生js幻灯片代淡出效果
面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- Turn.js 实现翻书效果的学习与总结
最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想 ...
- JS 文本输入框放大镜效果
JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...
- 原生js实现的放大镜效果
这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...
随机推荐
- Maven私服搭建及使用-Windows版
了解有限,目前只针对基础功能介绍,持续更新 一.下载对应的版本(本例版本:nexus-3.7.1-02) https://www.sonatype.com/download-oss-sonatype ...
- linux常用20条命令
1.cd命令 这是一个非常基本,也是大家经常需要使用的命令,它用于切换当前目录,它的参数是要切换到的目录的路径,可以是绝对路径,也可以是相对路径.如: cd /root/Docements # 切换到 ...
- 2019-8-13未命名文件 sdfsdfsdfsdfsdfsdf
2019-8-13未命名文件 sdfsdfsdfsdfsdfsdf 新建模板小书匠 欢迎使用 小书匠(xiaoshujiang)编辑器,您可以通过 小书匠主按钮>模板 里的模板管理来改变新建文章 ...
- javascript中ClassName属性的详解与实例
在javascritp中,我们可以通过style属性可以控制元素的样式,从而实现行为层通过DOM的style属性去干预显示层显示的目标,但是这种方法是不好的,而且为了实现通过DOM脚本设置的样式,你不 ...
- 【VBA】学习中出现的错误
1.自定义函数 自定义函数尽量不要使用,容易导致excel卡,让你怀疑人生!!!
- SVN 撤回(回滚)提交的代码
转: SVN 撤回(回滚)提交的代码 2016年12月20日 17:20:58 怀色 阅读数 68614 标签: svnsvn回滚版本回滚 更多 个人分类: svn 版权声明:本文为博主原创文章, ...
- mongod 对指定数据库创建用户
https://blog.51cto.com/wzlinux/2153062?source=dra 1.先在admin库中创建管理员用户与密码 [root@mbasic ~]# mongo Mongo ...
- HideTcpip.c
隐藏tcp端口,来自看雪 /////////////////////////////////////////////////////////////////////////////////////// ...
- lxml的XPath解析
BeautifulSoup 可以将lxml作为默认的解析器使用,同样lxml可以单独使用.下面比较这两者之间优缺点: BeautifulSoup和lxml原理不一样,BeautifulSoup是基于D ...
- ERROR】Unable to open underlying table which is differently defined or of non-MyISAM type or ...
Error: Unable to open underlying table which is differently defined or of non-MyISAM type or doesn’t ...