使用three.js的着色器通道一之渲染地球模型

学习交流欢迎加群：789723098，博主会将一些demo整理共享

我们都知道，three.js库里面内置了很多着色器通道对象供我们渲染场景，本文将对EffectComposer、RenderPass、FilmPass这三个通道进行学习和实现：

1.RenderPass这个通道会在当前场景（scene）和摄像机（camera）的基础上渲染出一个新场景，新建：

let renderPass = new THREE.RenderPass(scene, camera);

2.FilmPass这个通道通过扫描线和失真模拟电视屏幕效果，实现的效果超有时代感，新建：

/*四个参数分别为粗糙程度，扫描线强度，扫描线数量，是否转换为灰度图*/
let effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);
//将渲染结果输出到屏幕
effectFilm.renderToScreen = true;

3.EffectComposer可以理解为着色器通道容器，着色器通道按照先后顺序添加进来并执行，新建：

 /*渲染效果组合器，每个通道都按照传入的顺序执行*/
 let composer = new THREE.EffectComposer(renderer);
 composer.addPass(renderPass);
 composer.addPass(effectFilm);

本文实现的demo基于three.js_r86(请自行下载)，代码所用js文件和图片都在下载的那个包里面，请读者自行引用。

实现效果：

 

代码：