可视化/数字孪生专业社区
资源中心
问答
文章
实用工具
ByteVCharts
开源中台
申请建模
申请帮助
登录
注册
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
业务咨询
开发咨询
微信咨询
杜老师
黄老师
熊老师
支付信息
×
购买文章
创建海洋特效组件 THREEJS 海洋效果 Shader实现
订单金额
¥
0
实付金额
¥
0
我已阅读并同意ByteV组件购买协议
取消
提交订单
支付宝支付
微信支付
提交订单
1
点赞
3
评论
收藏
分享
举报
创建海洋特效组件 THREEJS 海洋效果 Shader实现
Terry
关注
已关注
0
1
3
3471
发表于 2020-06-02 20:40:37
## 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 ``` ### 参数设置 #### 公开的参数设置( 修改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地图与海洋效果结合 ```
点击查看更多
全部评论
登录
|
注册
1355241
123123
2020-08-04 10:18:21
加载更多
关于作者
Terry
TA的个人主页
关注
已关注
文章
52
粉丝
26
获赞
15
评论
8
访问
68996
ThreeJS 轮廓线特效 OutLinePath
创建海洋特效组件 THREEJS 海洋效果 Shader实现
ThreeJS后期处理通道
Three.js物理材质MeshStandardMaterial和MeshPhysicalMaterial
ThreeJs光效流转特效
推荐文章
ThreeJS 轮廓线特效 OutLinePath
(3)、React中使用ECharts——柱状图
31个惊艳的数据可视化作品,让你感受“数据之美”!
防抖节流
《Google软件测试之道》读书笔记
文章目录
文章分享
×
扫一扫分享
复制链接