什么网站源码分享好玩 有没有什么网站分享源码

大家好,今天给各位分享什么网站源码分享好玩的一些知识,其中也会对有没有什么网站分享源码进行解释,文章篇幅可能偏长,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在就马上开始吧!

本文是“小网站”系列的第4篇。本系列介绍一些作者主观认为值得把玩的“小网站”,愿朋友们多少都能有所收获。这个系列会长期更新,对这个系列感兴趣的朋友可关注,不迷路。

—今日介绍—

大海环境“白噪音”(VirtOcean)

把玩点:

适合减压;适合午休、阳台晒太阳;睡不着时可催眠;适合专心办公;技术拟真特效的样板;

地址https://virtocean.com

主观评价:趣味性3.5星,技术性4星

—使用指北—

还有白噪音这么个东西?什么是白噪音?

白噪音是一种比较友好的噪音,它是一种频率相对来说很均匀的声音,人能接受,所以大多数人听上去感觉还很和谐。

大自然中的很多声音都可以称之为白噪音,如风吹树叶沙沙声、雨天雨水滴答声、大海潮起潮落声、沙滩行走声、轮船汽笛声、海浪拍打岩石的声音、鸟鸣鸟叫的声音等等….

今天介绍的VirtOcean就是属于白噪音“小网站”,囊括一切与大海相关的环境音。网站支持电脑与手机端,不过在电脑上表现的要比手机上更优秀,手机上有兼容性的小问题。

电脑上打开网站,映入眼帘的是一片逼真的大海,太逼真了,比3A游戏还要逼真,感觉跟现实中的海水一样。当然,如果电脑太慢的朋友会觉得有点卡,因为使用了与3D相关的技术。

使用主界面

界面顶部右上角的开关支持白天、黑夜两种模式。

黑夜白天模式开关

下面一排菜单中“MuteSFX”是静音、“FullDSP”是界面全屏,“HideUI”是隐藏操作界面,让你好好的享受大海的。如果点了隐藏操作界面不知道如何还原,试试左下角的SHOWUI。

功能菜单

网站打开默认是没有声音的,打开音箱或者戴上耳机,点击界面上图标就能听到声音了,都有哪些声音呢:

Calmingsea:相对平和一些的海水声音Peacefulocean:正常的海洋中海浪的声音Roughstorm:暴风雨般海水拍打的声音Rowingaboat:划小船的声音Boatmast:帆船的声音Seagulls:海鸥海鸟的声音Dolphins:海豚的声音Sailboatinterior:船舱内部的声音Distantfoghorn:远远的大轮船的声音Walkingonabeach:光脚走在沙滩小石籽的声音Underwaterdiving:潜水的声音Submarineambiance:海面下环境音Buoybells:海上浮标声音Motorboattrip:海上轻快摩托艇的声音Ontheland:海边陆地上鸟、苍蝇、动物的环境音

不同类型声音支持多个组合播放,作者通常选择Calmingsea加上Submarineambiance一起组合播放,戴上低音耳机,闭上眼睛,晒着窗外的太阳,躺在椅子上,非常享受且慵懒的睡个午觉。

选择个舒服的姿势,快来一起享受吧!

—干货知识—

本小节属于技术解析环节,纯技术性干货,适合技术人员,非行业人士可忽略。

网站虽然很简单,实现技术不简约:

非常逼真的水环境;潮起潮落;磨砂玻璃般的选择界面;逼真的声音;多声音播放;

先看声音,经分析,声音是由一些WAV文件组件,声音来源于https://freesound.org这个网站,很多声音是免费的,可以下载,前提是要有一个账号。

有了声音就要播放,播放的组件来源于一款jQuery的插件,jquery.jplayer.min.js,该插件支持mp3,mp4,ogg,webm,wav,rtmp,flv的播放,操作非常简单,不多赘述。

磨砂玻璃的效果,来源开源代码https://codepen.io/TurkAysenur/pen/ZEpxeYm,前端的同学可以自行研究实现原理。

重头戏是大海的模拟,网站的作者采用的是一款开放源代码的实现,名称叫2050,实现地址https://codepen.io/xorxor_hu/pen/mOWbVG

真正的技术就藏在上述2050项目的JS代码中,实现采用的是three.js框架,它在互联网圈可是鼎鼎有名呢,大到3D游戏,中到三维仿真(物联网、BIM大屏、数字孪生)场景,小到我们介绍的小网站,但凡网页上用到三维的东西,都离不开它。

讲到three.js就不得不提OpenGL和WebGL了。OpenGL是一个跨平台的3D/2D的绘图规范,它是“爷爷”,后来有了在网页上显示3D的需求,怎么办?WebGL协议就出来了,它允许你把JavaScript+OpenGL结合一起玩,不过用WebGL原生的API写程序太复杂,要的数学知识也挺多的,于是three.js出来了,它对WebGL的原始API进行了大量封装,让你极大的提高开发效率,降低学习成本。先前大家喜欢玩的微信跳一跳也是基于three.js开发的哟!

three.js涉及到相当多的3D相关知识点:摄像机、场景、渲染器、材质、灯光、贴图、烘焙、光照、法线、物体、动画、天空盒等…有兴趣的同学可以找些书来深入研究,会这个了,计算机中的3D的世界就被你拿下了…

本系列长期更新!

喜欢的朋友,感谢点赞、分享、收藏三连!

什么网站源码分享好玩和有没有什么网站分享源码的问题分享结束啦,以上的文章解决了您的问题吗?欢迎您下次再来哦!

Published by

风君子

独自遨游何稽首 揭天掀地慰生平