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

文章目录

  • three.js创建地球
    • 1、基本场景搭建
    • 2、添加地球
    • 3、添加轨道控制器
    • 4、添加云层
    • 5、添加大气层
    • 6、添加星空背景
    • 7、添加辉光效果
    • 8、添加轨道卫星
    • 9、TS重构
    • 10、打包发布

three.js创建地球

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

  1. three.js基本场景
  2. 纹理贴图
  3. 轨道控制器
  4. ShaderMaterial
  5. ShapeGeometry
  6. 粒子系统
  7. 后期通道ShaderPass
  8. node.js
  9. TypeScript
  10. babel+webpack

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

1、基本场景搭建

2、添加地球

3、添加轨道控制器

4、添加云层

5、添加大气层

6、添加星空背景

7、添加辉光效果

8、添加轨道卫星

9、TS重构

10、打包发布

-------更新中------
three.js创建地球带大气层、辉光、云层、凹凸、高光_第1张图片

你可能感兴趣的:(JavaScript,three.js,node.js,webgl,typescript)