我用WebGL打造了一款动态壁纸
我用WebGL打造了一款动态壁纸
简述
最近在给自己电脑换壁纸的时候发现了一张很有特点的图(就是下面这张),于是我突发奇想,要是能把这张图变成一张动态的壁纸。那该多好。于是我打算用threejs开发一个3D的动态壁纸网页。
相关技术
Vite+Vue、Threejs、TwinSpace(我自己基于Threejs封装的一个工具库)
制作步骤,流程
先参照壁纸绘制一张图,记住一定要分图层
然后将图层依次导出(记住是PNG)
接着我们创建Vue项目
npm create vite@latest SmartClock -- --template vue
创建一个绘制的图层,在网页上创建几个方块,
然后将刚刚导出的图,依次贴在方块上,然后绘制完成
这样呢,我们的一个基本样式就绘制完成了。接着呢
我们得能让他动起来,这边我们在代码中添加相关的获取时间更新的方法
//计算时间更新
const clockUpdate = () => {
// 创建一个 Date 对象实例,它将自动设置为当前时间
const now = new Date();
// 获取当前的小时(0 到 23)
const hours = now.getHours();
hour.rotation.z = -Math.PI * 2 * (hours / 12);
// 获取当前的分钟(0 到 59)
const minutes = now.getMinutes();
min.rotation.z = -Math.PI * 2 * (minutes / 60);
// 获取当前的秒钟(0 到 59)
const seconds = now.getSeconds();
sec.rotation.z = -Math.PI * 2 * (seconds / 60);
};
然后定时更新。
这样呢,时钟就可以自动更新了。
接着呢,我们还需要创建相应的动画。
let num = 0;
let way = 1;
// let scale = 0;
//更新转圈圈动画
const updateAnimate = (delta) => {
num += 1 * way;
if (Math.abs(num) == 100) {
way = -way;
}
circle1.rotation.z -= Math.sin(num / 1000) * 0.5;
circle2.rotation.z += Math.sin(num / 1000) * Math.cos(num / 100) * 2;
circle3.rotation.z += Math.sin(num / 2000) * 2;
circle4.rotation.z -= Math.sin(num / 1000);
circle5.rotation.z += Math.sin(num / 500) * 0.1;
};
然后添加一下屏幕的鼠标位置监听就可以了,
这样一款网页动态可视化时钟就做完了。
网页效果地址
紧接着我们把web项目部署到网页上就可以了。
在线效果地址:https://sobigrice.gitee.io/smartClock
如何把网页设置成壁纸呢
众所周知MacOS/Window是没办法直接将网页设置成壁纸的。这里我们就需要用到第三方软件来设置
Mac: Plash
window: lively wallpaper / wallPaperEngine
成品
后续计划
目前这个项目我已经开源了,开源地址:https://gitee.com/soBigRice/smart-clock
后续我打算利用electron和ReactNative打造成一款多平台的壁纸时钟。。。
大家有什么想法和意见欢迎留言一起相互交流。
敬请期待
我用WebGL打造了一款动态壁纸的更多相关文章
- 用webgl打造自己的3D迷宫游戏
用webgl打造自己的3D迷宫游戏 2016/09/19 · JavaScript · WebGL 原文出处: AlloyTeam 背景:前段时间自己居然迷路了,有感而发就想到写一个可以让人迷路 ...
- Mac电脑上一款非常时尚高清的动态壁纸Living Wallpaper HD
很多朋友Mac电脑上都喜欢用动态壁纸,Living Wallpaper HD是本人尝试的一款非常不错的高清动态壁纸.有时钟.天气等各种组建,非常时尚美观. Living Wallpaper HD下载地 ...
- 如何实现一个 windows 桌面动态壁纸
更新: 2018/08/31 WS_MOUSE_LL 钩子,实现底层壁纸交互效果. 一.介绍 国内玩家第一次看到动态壁纸,都是出于一款来自 Wallpaper Engine 的 Steam 程序. ...
- 关于MAC设置免费的动态壁纸
首先大部分的动态壁纸都是收费的或者是已经固定的,其实这一款也是固定的 但是这个固定的是可以进行修改的 第一先在App Store下载 LiveDesktop Pro 这一款是免费的 然后下载后进行打 ...
- python学习笔记 | macOS Big Sur动态壁纸食用指南
目录 前言 爬虫篇 壁纸使用篇 后记 前言 北京时间23日凌晨1点,苹果WWDC2020大会开幕.在发布会上,苹果正式发布了新版macOS,并将其命名为"Big Sur". 相比于 ...
- 如何将视频作为Windows桌面动态壁纸,两步就可以搞定!
Windows本身自带的设置是不支持直接将视频用作壁纸,所以要想实现这个功能需要第三方工具的帮助 一.软件简介 这是一款可以将视频文件作为动态壁纸展示在电脑桌面的软件,它体积小巧,占用资源也不多,相比 ...
- 为你的Windows7设置动态壁纸
From:http://www.cnblogs.com/killerlegend/p/3644014.html By KillerLegend DreamScene是Vista上的一个功能,可以让你设 ...
- DzzOffice添加动态壁纸例子-Bing每日壁纸
Bing每日壁纸介绍:bing网站每天会更新一张不同的精选图片. 此压缩包内的程序,可以自动同步更新cn.bing.com网站每天更新的图片,作为dzzoffice的壁纸使用.实现自动每天更换不同的云 ...
- android浪漫樱花凋零动态壁纸应用源码
android浪漫樱花凋零动态壁纸应用源码,是从那个安卓教程网拿过来的,本项目是一套基于安卓的樱花动态壁纸项目源码,安装以后桌面没有图标,但是可以在修改壁纸-动态壁纸中找到.我的分辨率是480×854 ...
- Ruby Rose动态壁纸制作记录
为Wallpaper Engine做的动态壁纸,使用Unity制作,在这里记录一下制作过程和一些遇到的坑,以后有了github账号再搬到那边去. 最后大概要做出这样的效果,截图来自RWBY " ...
随机推荐
- 如何在Godot中使用ParallaxBackground实现稳定的2d游戏背景[一问随笔]
问题: 我尝试给2d游戏添加静态的背景,当角色运动速度很快时相机的渲染就跟不上角色了,背景会发生这样巨大的位移. 我将Camera2d节点和背景节点绑在一起,但根本无法解决这个问题. 我还尝试制作天空 ...
- [Pytorch框架] 1.3、张量
文章目录 PyTorch是什么? Tensors(张量) NumPy 转换 CUDA 张量 PyTorch是什么? 基于Python的科学计算包,服务于以下两种场景: 作为NumPy的替代品,可以使用 ...
- P2482 [SDOI2010] 猪国杀
方法论 这是一道复杂的模拟题.由于游戏规则的条目很多,我们需要仔细考虑程序的组织.否则,在编写程序的过程中极容易陷入停滞的状态(不知道下一步应该怎么做),或在发现程序出问题时,难以快速定位到错误点,对 ...
- 【Docker】网络管理
一.容器默认网络通信 Usage: dockerd [OPTIONS] Options: --icc Enable inter-container communication (default tru ...
- C++ ATL + WTL 选择文件
1 #include "stdafx.h" 2 #include "CStringHelper.h" 3 #include "AFileEngine. ...
- #PowerBi 1分钟学会,在excel中,调用powerbi数据模型(Analyze in Excel插件)
在工作中,我们常常使用excel来进行临时的数据处理服务,如果我们在powerbi中,已经有了完整的数据模型. 那么我们都可以通过直接调用powerbi数据模型,来进行快速的数据分析,完成任务. 今天 ...
- 2022-05-21:给定一个数组arr,长度为n, 表示n个服务员,每个人服务一个人的时间。 给定一个正数m,表示有m个人等位。 如果你是刚来的人,请问你需要等多久? 假设:m远远大于n,比如n<=
2022-05-21:给定一个数组arr,长度为n, 表示n个服务员,每个人服务一个人的时间. 给定一个正数m,表示有m个人等位. 如果你是刚来的人,请问你需要等多久? 假设:m远远大于n,比如n&l ...
- 2021-08-08:自由之路。电子游戏“辐射4”中,任务“通向自由”要求玩家到达名为“Freedom Trail Ring”的金属表盘,并使用表盘拼写特定关键词才能开门。给定一个字符串 ring,表
2021-08-08:自由之路.电子游戏"辐射4"中,任务"通向自由"要求玩家到达名为"Freedom Trail Ring"的金属表盘,并 ...
- odoo开发教程十五:仪表板
仪表盘可以通过外部ID引用其他视图文件的内容,整合到一个界面进行显示. 一:建立仪表盘视图文件 views/session_board.xml: 通过外部id引入要展示的视图文件--定义仪表板form ...
- python学习之-------OS 文件夹和文件操作
# OS模块 :查看一个文件夹下所有文件,这个文件夹有文件夹,不能用walk# -- coding: UTF-8 --import osimport sys#C:\Users\Administrato ...