创建海洋特效组件 THREEJS 海洋效果 Shader实现

## THREEJS 海洋效果 通过 Shader实现 组件效果体验 ： [Ocean Demo 海洋效果](http://bytev.com.cn/index.php?app=shop&ac=editor&id=446) ### [具体代码详见byteV组件 ，支持下载到本地](http://bytev.com.cn/index.php?app=shop&ac=goods&id=446) 该组件为国外开源组件，可以支持 PC，手机，大屏端的效果展示需求。 可以支持使用Three.js进行二次开发 ### 其中主要的类的介绍： 以下名词解释，都在demo.js中会用到，具体内容可以参考我的byteV用户下的其他文章。 | 序号| 名词| 解释| | --- | --- | --- | | 1 | 相机Camera | 观察Three世界的重要部分，决定了观看视角的位置，角度，状态等 | | 2 | 天空盒SkyBox | Three场景中 | | 3 | 等高线/地形（Terrain） | 大海中加载地形所需，在GIS中表示加载等高线 | | 4 | 材质(material) | 控制模型的材料与质感，非常重要 | ```js <!-- 外部库--> <!-- three基础库 --> <script src="../assets/libs/three.min.js"></script> <script src="../demo/assets/libs/RequestAnimationFrame.js"></script> <script src="../demo/assets/libs/jquery.min.js"></script> <!-- 鼠标控制类 --> <script src="../demo/assets/libs/three/OrbitControls.js"></script> <!-- 大海效果 shader 水的材质 --> <script src="../water-material.js"></script> <!-- Demo 相关文件--> <!-- window窗体改变，相应的处理操作--> <script src="../demo/assets/js/window.js"></script> <!-- 相机，场景，天空球，等高线的设置相关 --> <script src="assets/js/demo.js"></script> <!--效果的参数设置，如果不需要改动太大，可以设置此类实现简单效果 --> <script src="assets/js/main.js"></script> ``` ### 参数设置 #### 公开的参数设置( 修改main.js代码 ) ```javascript var parameters = { alea: RAND_MT, generator: PN_GENERATOR, width: 2000, // 场景的宽度 height: 2000, // 场景的高度 widthSegments: 250, // 宽度分段 heightSegments: 250, // 高度分段 depth: 1500, param: 4, filterparam: 1, filter: [ CIRCLE_FILTER ], postgen: [ MOUNTAINS_COLORS ], effect: [ DESTRUCTURE_EFFECT ] }; ``` #### 非公开的参数设置（需修改demo.js代码） ```javascript loadSkyBox: function loadSkyBox() // 加载天空盒子方法，此方法中可以修改天空盒子的图片 initialize: function initialize // 初始化方法，此方法中可以修改视角，阳光的位置颜色，水的材质细节等 loadTerrain: function loadTerrain(inParameters) // 加载山体，加载等高线等信息。等高线其他的详述，可参考byteV的等高线文章。通过等高线也可以使 GIS地图与海洋效果结合 ```

---