three.js创建地球

本教程采用three.js创建一个地球带包含材质贴图，凹凸/高光贴图，以及大气层、辉光、云层、轨道卫星、星空等效果。涉及到的知识点有：

three.js基本场景
纹理贴图
轨道控制器
ShaderMaterial
ShapeGeometry
粒子系统
后期通道ShaderPass
node.js
TypeScript
babel+webpack

为了复习所学的知识，所以尽我可能多的用到不同的知识点。先通过常规开发方式完成整个工程的开发，最后再用TS重构一下，然后打包发布。

1、基本场景搭建

2、添加地球

3、添加轨道控制器

4、添加云层

5、添加大气层

6、添加星空背景

7、添加辉光效果

8、添加轨道卫星

9、TS重构

10、打包发布

-------更新中------

three.js创建地球带大气层、辉光、云层、凹凸、高光相关推荐

GPU Gems1 - 21 实时辉光（Real-Time Glow）
这章浅墨的文章讲的很细了,这里基本照扒一遍加深印象,原文链接:https://zhuanlan.zhihu.com/p/36499291 [章节概览] 这章讲到2D光照效果中的辉光(Glow)和光晕( ...
Deep Glow for mac，AE辉光特效插件
Deep Glow插件是一款强大的辉光特效插件,它可以帮助用户创建高质量的辉光效果.Deep Glow提供了多种调节选项,包括颜色.透明度.亮度.模糊程度等,可以让用户更加精细地控制辉光效果.同时,D ...
使用threejs实现地球辉光和大气层效果
使用threejs实现地球辉光和大气层效果使用插件方式在github上有glow的插件可以使用,效果不错. 地址:https://github.com/jeromeetienne/threex.g ...
three.js 实现辉光（原生JS）
在three.js后期处理中,实现通道辉光效果,效果图如下: 一.模型创建在三维场景中,创建了两个对象mesh(正方体)bmesh(球体) //创建模型//正方体var geometry = new ...
使用threejs实现辉光大气层效果
最近想使用threejs实现辉光的特效,在查阅了一些资料之后,不仅实现了辉光的特效,还顺带实现了大气层特效,在写着色器的过程中有了一些理解~ 首要目标:为了实现辉光的着色器,我们把辉光分为几个步骤来实 ...
shadermaterial 实现大气层效果和辉光效果
1.创建两个球体,一个一小,一个略大的作为他的辉光 2.作为辉光的球体从内到外片元透明度逐渐减小(线性减小或是指数减小都可以) 3.将覆盖原物体的部分丢弃辉光效果 var vertexShader ...
Three.js实现分区Bloom辉光效果
一.效果展示辉光效果二.如何实现 1.基于EffectComposer后期渲染器. 2.借助UnrealBloomPass渲染通道,实现辉光效果. 3.了解three.js中 layers 分层的 ...
threejs 辉光的使用在vue
引入插件 import {EffectComposer} from "three/examples/jsm/postprocessing/EffectComposer.js";im ...
ps发光插件_PS插件自定义区域发光真实辉光插件 Oniric Glow Generator for Photoshop【资源分享1444】...
AE特效PR剪辑C4D影视后期全世界只有不到1%的人关注了你是个很特别的人 AE影视后期定期推送「AE+PR+C4D 影视特效合成婚庆剪辑调色电视广告包装微电影制作 SpeedGrade达芬 ...

three.js创建地球带大气层、辉光、云层、凹凸、高光

文章目录

three.js创建地球

1、基本场景搭建

2、添加地球

3、添加轨道控制器

4、添加云层

5、添加大气层

6、添加星空背景

7、添加辉光效果

8、添加轨道卫星

9、TS重构

10、打包发布

three.js创建地球带大气层、辉光、云层、凹凸、高光相关推荐

最新文章

热门文章