Three.js实现可透视的水面效果
1. 引言
Three.js是著名的JavaScript 3D图形库，用于浏览器中开发 3D 交互场景的 JS 引擎，可以快速的搭建三维场景
Three.js官网为：创建一个场景 – three.js docs (threejs.org)
GitHub站点为：mrdoob/three.js: JavaScript 3D Library. (github.com)
本文描述使用Three.js实现可透视的水面效果
2. 可透视水面效果
这里主要是指以下这两个官方示例：
- three.js examples (threejs.org)
- three.js examples (threejs.org)
如果网络原因加载不出来可以使用下面的示例：
- three.js examples (three3d.cn)
- three.js examples (three3d.cn)
第一个是海洋Ocean，有倒影、水纹波动但是水面不透明，不能从水下往上看：
第二个是水面Water，有倒影、水纹波动，水面不透明，可以从水下往上看，但是从水下往上看没有水面效果：
此处，笔者修改一下Three.js源码中的Water.js：three.js/Water.js at dev · mrdoob/three.js · GitHub
添加了 opacity和transparent参数并设置side参数，实现以下效果：
3. 参考资料
[1] three.js/Water.js at dev · mrdoob/three.js · GitHub
[2] three.js/Water2.js at dev · mrdoob/three.js · GitHub
作者：当时明月在曾照彩云归