three.js的wave特效(ivew官网首页波浪特效实现)

查看效果请访问:https://521lbx.github.io/Web3D/index.html
公司的好几个vue项目都是用ivew作为UI框架,所以ivew官网时不时就得逛一圈。每一次进首页都会被首页的波浪特效经验到,一时手痒,就有个这篇随笔!
猜了猜应该是使用three.js写的,就上three.js官网上逛荡逛荡,果不其然,官网有个wave的特效,但要做成ivew官网的样子,还是需要做些功夫的。

首先是点点的颜色(官网例子是白色的),然后是特效的区域(官网是满屏),最后是设置特效只在波浪上层有效(官网的特效波浪是可以翻过来的,好尴尬!!!)
点点的颜色可以在初始化中设置,如下图:

特效区域直接设置容器的宽度、高度即可。

设置特效只在波浪上层有效,其实只要设置鼠标左右滑动时将mouseY设置在合适的位置,并在鼠标移动时保持不变。

代码详见:https://github.com/521lbx/Web3D

原文地址:https://www.cnblogs.com/growupup/p/9651467.html

时间: 2024-08-27 20:26:42

three.js的wave特效(ivew官网首页波浪特效实现)的相关文章

开发“小米商城官网首页”(静态页面)

一,项目题目:开发"小米商城官网首页"(静态页面) 二,项目需求 1.熟练运用所学知识还原小米商城官网首页静态页面 * 不需要做动态效果,只实现静态页面, 后期学完js再回来实现动态效果 三,项目布局 四,效果对比 目前的官网图片和小编做的图片对比 官网图片 小编做的效果图 五,代码附上 链接:https://pan.baidu.com/s/1EVyF8RIgRXFvEIHQf42Pow 密码:zqs4 index.html <!DOCTYPE html> <html

利用HTML和CSS设计一个静态的“小米商城官网首页”

一.小项目说明 这是个例行的小项目练习,主要利用html和css的基础知识,复刻一个缩减版的小米商城网页.包括[导航栏].[头部logo区,快捷键.搜索框].[网页主体].[网页尾部]几个部分.目前只实现静态的网页显示.最终效果图如下: 二.程序框架 按照开发规范,先在sublime text3中创建[小米商城首页]文件夹,在此文件夹下创建[css]文件夹(放css文件)和[img]文件夹(放图片)和主要的html文件,如下图: 三.小米商城首页.html 1 <!DOCTYPE html>

官网首页淡出效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

Kafka----Apache Kafka官网首页

Apache Kafka  是发布-订阅机制的消息系统,可以认为具有分布式日志提交功能. Fast-快速 一个单独的Kafka  broker每秒可以处理来自成千上万个客户端的数百兆字节的读写操作. Scalable-可扩展性 对于大规模系统来说,一个单独的kafka集群从设计上就实现了数据中心的功能,而且无需宕机就能提供弹性而又透明的扩展,在数据存储方式上,kafka采用了分区设计理念,它通过将数据分别存储在集群中服务器这种方式,使得集群存储能力远大于单个服务器,这样也使得消费者可以从集群中不

汽车之家官网首页排版与布局

源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Con

基于jQuery仿迅雷影音官网幻灯片特效

分享一款基于jQuery仿迅雷影音官网幻灯片特效迅.雷影音官网jQuery幻灯片特效是一款带左右箭头,索引按钮切换的jQuery幻灯片代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrapper"> <div id="content" class="content"> <div class="s_arr"> <a class=&quo

传智官网

css代: body,ul,li,p,img,h1,h2,h3,h4,h5,h6{margin:0;padding:0;} body{ font-family:"微软雅黑"; font-size:12px; color:#444; background:url(images/bg-body.gif) repeat-x; } .box{ width:973px; margin:0px auto; } .header{ height:196px; } .header .top .left1

MindManager2018离线安装包官网下载

软件官网:https://www.mindjet.com/ 目前来说,官网正常下载的话它会要求你填写一些信息,然后官方通过邮件的形式向你发送下载链接,而且坑爹的是这个下载链接并不是软件的下载链接,而是软件的一个下载器,通过本文,让大家学会一种更加简便的下载方式,当然,必须官网下载才能安心. 通过官网首页,我们找到底部的支持信息[Support],点击它来到支持信息页,在此页面上我们可以看到资源项[Resources],在这个项目下,我们可以看到[To reinstall software you

centos官网镜像下载方法

1.CentoS简介 CentOS(Community Enterprise Operating System,社区企业操作系统)是一个基于Red Hat Linux 提供的可自由使用源代码的企业级Linux发行版本,以高效.稳定著称.它使用与Red Hat相同的源代码编译而成,而且是开源免费的,因此有些要求高度稳定性的服务器以CentOS替代商业版的Red Hat Enterprise Linux使用,是很多中小服务器站点的首选.CentOS拥有Red Hat的所有功能,它们的不同之处在于Ce