本文是“小网站”系列的第 4 篇。本系列介绍一些作者主观认为值得把玩的“小网站”，愿朋友们多少都能有所收获。这个系列会长期更新，对这个系列感兴趣的朋友可关注，不迷路。
--- 今日介绍 ---
大海环境“白噪音” （VirtOcean）
把玩点：
-
适合减压;
-
适合午休、阳台晒太阳;
-
睡不着时可催眠;
-
适合专心办公;
-
技术拟真特效的样板；
网址 https://virtocean.com
主观评价：趣味性 3.5 星，技术性 4 星
--- 使用指北 ---
还有白噪音这么个东西？什么是白噪音？
白噪音是一种比较友好的噪音，它是一种频率相对来说很均匀的声音，人能接受，所以大多数人听上去感觉还很和谐。
大自然中的很多声音都可以称之为白噪音，如风吹树叶沙沙声、雨天雨水滴答声、大海潮起潮落声、沙滩行走声、轮船汽笛声、海浪拍打岩石的声音、鸟鸣鸟叫的声音等等....
今天介绍的VirtOcean就是属于白噪音“小网站”，囊括一切与大海相关的环境音。网站支持电脑与手机端，不过在电脑上表现的要比手机上更优秀，手机上有兼容性的小问题。
电脑上打开网站，映入眼帘的是一片逼真的大海，太逼真了，比3A游戏还要逼真，感觉跟现实中的海水一样。当然，如果电脑太慢的朋友会觉得有点卡，因为使用了与3D相关的技术。
界面顶部右上角的开关支持白天、黑夜两种模式。
下面一排菜单中“Mute SFX”是静音、“Full DSP”是界面全屏，“Hide UI”是隐藏操作界面，让你好好的享受大海的。如果点了隐藏操作界面不知道如何还原，试试左下角的SHOW UI。
网站打开默认是没有声音的，打开音箱或者戴上耳机，点击界面上图标就能听到声音了，都有哪些声音呢：
-
Calming sea : 相对平和一些的海水声音
-
Peaceful ocean : 正常的海洋中海浪的声音
-
Rough storm : 暴风雨般海水拍打的声音
-
Rowing a boat : 划小船的声音
-
Boat mast : 帆船的声音
-
Seagulls : 海鸥海鸟的声音
-
Dolphins : 海豚的声音
-
Sailboat interior : 船舱内部的声音
-
Distant foghorn : 远远的大轮船的声音
-
Walking on a beach : 光脚走在沙滩小石籽的声音
-
Underwater diving : 潜水的声音
-
Submarine ambiance : 海面下环境音
-
Buoy bells : 海上浮标声音
-
Motor boat trip : 海上轻快摩托艇的声音
-
On the land : 海边陆地上鸟、苍蝇、动物的环境音
不同类型声音支持多个组合播放，作者通常选择Calming sea 加上 Submarine ambiance 一起组合播放，戴上低音耳机，闭上眼睛，晒着窗外的太阳，躺在椅子上，非常享受且慵懒的睡个午觉。
选择个舒服的姿势，快来一起享受吧！
--- 干货知识 ---
本小节属于技术解析环节，纯技术性干货，适合技术人员，非行业人士可忽略。
网站虽然很简单，实现技术不简约：
-
非常逼真的水环境；
-
潮起潮落；
-
磨砂玻璃般的选择界面；
-
逼真的声音；
-
多声音播放；
先看声音，经分析，声音是由一些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的世界就被你拿下了...
本系列长期更新！
喜欢的朋友，感谢点赞、分享、收藏三连！
标签：大海,声音,网站,入眠,js,---,把玩,噪音,3D From： https://www.cnblogs.com/skywayman/p/17095077.html