可视化/数字孪生专业社区
资源中心
问答
文章
实用工具
ByteVCharts
开源中台
申请建模
申请帮助
登录
注册
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
业务咨询
开发咨询
微信咨询
杜老师
黄老师
熊老师
支付信息
×
购买文章
使用threejs实现地球辉光和大气层效果
订单金额
¥
0
实付金额
¥
0
我已阅读并同意ByteV组件购买协议
取消
提交订单
支付宝支付
微信支付
提交订单
0
点赞
0
评论
收藏
分享
举报
使用threejs实现地球辉光和大气层效果
Terry
关注
已关注
0
0
0
2688
发表于 2020-08-20 17:35:10
转载自: https://blog.csdn.net/lin5165352/article/details/83055606 使用threejs实现地球辉光和大气层效果 使用插件方式 在github上有glow的插件可以使用,效果不错。 地址:https://github.com/jeromeetienne/threex.geometricglow 使用ShaderMaterial的方式 实现原理就是使用three.js的ShaderMaterial材质。 我们把辉光分为几个步骤来实现: 创建两个球体,一个作为原始物体,一个略大一些作为它的辉光 作为辉光的球体从内到外片元透明度逐渐减小(线性减小或是指数减小都可以) 将覆盖原始物体的部分丢弃掉 主要代码如下: ``` var vertexShader = [ 'varying vec3 vVertexWorldPosition;', 'varying vec3 vVertexNormal;', 'varying vec4 vFragColor;', 'void main(){', ' vVertexNormal = normalize(normalMatrix * normal);',//将法线转换到视图坐标系中 ' vVertexWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;',//将顶点转换到世界坐标系中 ' // set gl_Position', ' gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);', '}' ].join('\\\\n'); //大气层效果 THREE.AeroSphere = { uniforms: { coeficient: { type: "f", value: 1.0 }, power: { type: "f", value: 2 }, glowColor: { type: "c", value: new THREE.Color(0xffff00) } }, vertexShader: vertexShader, fragmentShader: [ 'uniform vec3 glowColor;', 'uniform float coeficient;', 'uniform float power;', 'varying vec3 vVertexNormal;', 'varying vec3 vVertexWorldPosition;', 'varying vec4 vFragColor;', 'void main(){', ' vec3 worldCameraToVertex= vVertexWorldPosition - cameraPosition;', //世界坐标系中从相机位置到顶点位置的距离 ' vec3 viewCameraToVertex = (viewMatrix * vec4(worldCameraToVertex, 0.0)).xyz;',//视图坐标系中从相机位置到顶点位置的距离 ' viewCameraToVertex = normalize(viewCameraToVertex);',//规一化 ' float intensity = pow(coeficient + dot(vVertexNormal, viewCameraToVertex), power);', ' gl_FragColor = vec4(glowColor, intensity);', '}'//vVertexNormal视图坐标系中点的法向量 //viewCameraToVertex视图坐标系中点到摄像机的距离向量 //dot点乘得到它们的夹角的cos值 //从中心向外面角度越来越小(从钝角到锐角)从cos函数也可以知道这个值由负变正,不透明度最终从低到高 ].join('\\\\n') //辉光效果Grow THREE.GlowSphere = { uniforms: { coeficient: { type: "f", value: 0.0 }, power: { type: "f", value: 2 }, glowColor: { type: "c", value: new THREE.Color(0xff22ff) } }, vertexShader: vertexShader, fragmentShader: [ 'uniform vec3 glowColor;', 'uniform float coeficient;', 'uniform float power;', 'varying vec3 vVertexNormal;', 'varying vec3 vVertexWorldPosition;', 'varying vec4 vFragColor;', 'void main(){', ' vec3 worldVertexToCamera= cameraPosition - vVertexWorldPosition;', //世界坐标系中顶点位置到相机位置到的距离 ' vec3 viewCameraToVertex = (viewMatrix * vec4(worldVertexToCamera, 0.0)).xyz;',//视图坐标系中从相机位置到顶点位置的距离 ' viewCameraToVertex = normalize(viewCameraToVertex);',//规一化 ' float intensity = coeficient + dot(vVertexNormal, viewCameraToVertex);', ' if(intensity > 0.65){ intensity = 0.0;}', ' gl_FragColor = vec4(glowColor, intensity);', '}'//vVertexNormal视图坐标系中点的法向量 //viewCameraToVertex视图坐标系中点到摄像机的距离向量 //dot点乘得到它们的夹角的cos值 //从中心向外面角度越来越大(从锐角到钝角)从cos函数也可以知道这个值由负变正,不透明度最终从高到低 ].join('\\\\n') } //球体 辉光 大气层 function shad() { var material1 = new THREE.ShaderMaterial({ uniforms: THREE.AeroSphere.uniforms, vertexShader: THREE.AeroSphere.vertexShader, fragmentShader: THREE.AeroSphere.fragmentShader, blending: THREE.NormalBlending, transparent: true, depthWrite:false }); var material2 = new THREE.ShaderMaterial({ uniforms: THREE.GlowSphere.uniforms, vertexShader: THREE.GlowSphere.vertexShader, fragmentShader: THREE.GlowSphere.fragmentShader, blending: THREE.NormalBlending, transparent: true }); var sphere = new THREE.SphereBufferGeometry(16, 32, 32); var mesh = new THREE.Mesh(sphere, material1); scene.add(mesh); var sphere2 = new THREE.SphereBufferGeometry(10, 32, 32); var mesh2 = new THREE.Mesh(sphere2, material2); //mesh2.position.x = 15; scene.add(mesh2); } ``` 效果如下图所示: 辉光和大气层 辉光和大气层 辉光效果经过简单的修改可以实现下面效果。分层显示透明度。 在这里插入图片描述 ``` 'uniform vec3 glowColor;', 'uniform float coeficient;', 'varying vec3 vVertexNormal;', 'varying vec3 vVertexWorldPosition;', 'void main(){', ' vec3 worldVertexToCamera= cameraPosition - vVertexWorldPosition;', ' vec3 viewCameraToVertex = (viewMatrix * vec4(worldVertexToCamera, 0.0)).xyz;', ' viewCameraToVertex = normalize(viewCameraToVertex);', ' float intensity = coeficient + dot(vVertexNormal, viewCameraToVertex);', ' if(intensity > 0.65 && intensity < 0.8){ intensity = 0.8;}', ' if(intensity > 0.8){ intensity = 1.0;}', ' gl_FragColor = vec4(glowColor, intensity);', '}' ``` 也可以实现辉光和大气层效果在一个shader上。中间透明度1,然后想内外渐变. 在这里插入图片描述 代码参考:https://blog.csdn.net/srk19960903/article/details/78734238
点击查看更多
全部评论
登录
|
注册
关于作者
Terry
TA的个人主页
关注
已关注
文章
52
粉丝
32
获赞
15
评论
8
访问
95122
ThreeJS 轮廓线特效 OutLinePath
创建海洋特效组件 THREEJS 海洋效果 Shader实现
ThreeJS后期处理通道
Three.js物理材质MeshStandardMaterial和MeshPhysicalMaterial
ThreeJs光效流转特效
推荐文章
ThreeJS 轮廓线特效 OutLinePath
(3)、React中使用ECharts——柱状图
31个惊艳的数据可视化作品,让你感受“数据之美”!
防抖节流
创建海洋特效组件 THREEJS 海洋效果 Shader实现
文章目录
文章分享
×
扫一扫分享
复制链接