学习threejs，使用EffectComposer后期处理惩罚组合器（接纳RenderPass、ShaderPass渲染通道），案例一

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

---

---

一、🍀媒介

本文详细先容如何基于threejs在三维场景中使用使用EffectComposer后期处理惩罚组合器（接纳RenderPass、ShaderPass渲染通道），亲测可用。盼望能资助到您。一起学习，加油！加油！
1.1 ☘️THREE.EffectComposer 后期处理惩罚

THREE.EffectComposer 用于在three.js中实现后期处理惩罚效果。该类管理了产生终极视觉效果的后期处理惩罚过程链。 后期处理惩罚过程根据它们添加/插入的次序来实行，最后一个过程会被自动渲染到屏幕上。
1.1.1 ☘️代码示例

1. import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
2. import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
3. // 初始化 composer
4. const composer = new EffectComposer(renderer);
5. // 创建 RenderPass 并添加到 composer
6. const renderPass = new RenderPass(scene, camera);
7. composer.addPass(renderPass);
8. // 添加其他后期处理通道（如模糊）
9. // composer.addPass(blurPass);
10. // 在动画循环中渲染
11. function animate() {
12.   composer.render();
13.   requestAnimationFrame(animate);
14. }

复制代码

1.1.2 ☘️构造函数

[color=‌#00FFFF]EffectComposer( renderer : WebGLRenderer, renderTarget : WebGLRenderTarget )
renderer – 用于渲染场景的渲染器。
renderTarget – （可选）一个预先设置的渲染目标，内部由 EffectComposer 使用。
1.1.3 ☘️属性

[color=‌#00FFFF].passes : Array
一个用于体现后期处理惩罚过程链（包罗次序）的数组。

1. 渲染通道：
2. BloomPass   该通道会使得明亮区域参入较暗的区域。模拟相机照到过多亮光的情形
3. DotScreenPass   将一层黑点贴到代表原始图片的屏幕上
4. FilmPass    通过扫描线和失真模拟电视屏幕
5. MaskPass    在当前图片上贴一层掩膜，后续通道只会影响被贴的区域
6. RenderPass  该通道在指定的场景和相机的基础上渲染出一个新的场景
7. SavePass    执行该通道时，它会将当前渲染步骤的结果复制一份，方便后面使用。这个通道实际应用中作用不大；
8. ShaderPass  使用该通道你可以传入一个自定义的着色器，用来生成高级的、自定义的后期处理通道
9. TexturePass 该通道可以将效果组合器的当前状态保存为一个纹理，然后可以在其他EffectCoposer对象中将该纹理作为输入参数

复制代码

[color=‌#00FFFF].readBuffer : WebGLRenderTarget
内部读缓冲区的引用。过程一样平常从该缓冲区读取先前的渲染效果。
[color=‌#00FFFF].renderer : WebGLRenderer
内部渲染器的引用。
[color=‌#00FFFF].renderToScreen : Boolean
终极过程是否被渲染到屏幕（默认帧缓冲区）。
[color=‌#00FFFF].writeBuffer : WebGLRenderTarget
内部写缓冲区的引用。过程常将它们的渲染效果写入该缓冲区。
1.1.4 ☘️方法

[color=‌#00FFFF].addPass ( pass : Pass ) : undefined
pass – 将被添加到过程链的过程
将传入的过程添加到过程链。
[color=‌#00FFFF].dispose () : undefined
开释此实例分配的 GPU 相关资源。每当您的应用步伐不再使用此实例时调用此方法。
[color=‌#00FFFF].insertPass ( pass : Pass, index : Integer ) : undefined
pass – 将被插入到过程链的过程。
index – 界说过程链中过程应插入的位置。
将传入的过程插入到过程链中所给定的索引处。
[color=‌#00FFFF].isLastEnabledPass ( passIndex : Integer ) : Boolean
passIndex – 被用于查抄的过程
如果给定索引的过程在过程链中是最后一个启用的过程，则返回true。 由EffectComposer所使用，来决定哪一个过程应当被渲染到屏幕上。
[color=‌#00FFFF].removePass ( pass : Pass ) : undefined
pass – 要从传递链中删除的传递。
从传递链中删除给定的传递。
[color=‌#00FFFF].render ( deltaTime : Float ) : undefined
deltaTime – 增量时间值。
实行所有启用的后期处理惩罚过程，来产生终极的帧，
[color=‌#00FFFF].reset ( renderTarget : WebGLRenderTarget ) : undefined
renderTarget – （可选）一个预先设置的渲染目标，内部由 EffectComposer 使用。
重置所有EffectComposer的内部状态。
[color=‌#00FFFF].setPixelRatio ( pixelRatio : Float ) : undefined
pixelRatio – 装备像素比
设置装备的像素比。该值通常被用于HiDPI装备，以阻止含糊的输出。 因此，该方法语义类似于WebGLRenderer.setPixelRatio()。
[color=‌#00FFFF].setSize ( width : Integer, height : Integer ) : undefined
width – EffectComposer的宽度。
height – EffectComposer的高度。
思量装备像素比，重新设置内部渲染缓冲和过程的巨细为(width, height)。 因此，该方法语义类似于WebGLRenderer.setSize()。
[color=‌#00FFFF].swapBuffers () : undefined
交换内部的读/写缓冲。
1.2 ☘️THREE.RenderPass

THREE.RenderPass用于将场景渲染到中心缓冲区，为后续的后期处理惩罚效果（如含糊、色调调整等）提供底子。
1.2.1 ☘️构造函数

[color=‌#00FFFF]RenderPass(scene, camera, overrideMaterial, clearColor, clearAlpha)

• scene THREE.Scene 要渲染的 Three.js 场景对象。
  
• camera THREE.Camera 场景对应的相机（如 PerspectiveCamera）。
  
• overrideMaterial THREE.Material (可选) 覆盖场景中所有物体的材质（默认 null）。
  
• clearColor THREE.Color (可选) 渲染前扫除画布的颜色（默认不自动扫除）。
  
• clearAlpha number (可选) 扫除画布的透明度（默认 0）。
  

1.2.2 ☘️属性

[color=‌#00FFFF].enabled：boolean
是否启用此通道（默认 true）。设为 false 可跳过渲染。
[color=‌#00FFFF].clear：boolean
渲染前是否扫除画布（默认 true）。若需叠加多个 RenderPass，可设为 false。
[color=‌#00FFFF].needsSwap：boolean
是否必要在渲染后交换缓冲区（通常保持默认 false）。
1.2.3 ☘️方法

[color=‌#00FFFF].setSize(width, height)
调整通道的渲染尺寸（通常由 EffectComposer 自动调用）。
width: 画布宽度（像素）。
height: 画布高度（像素）。
1.3 ☘️THREE.ShaderPass

THREE.ShaderPass是 Three.js 后期处理惩罚模块的核心组件之一，答应开发者通过自界说着色器（Shader）实现恣意殊效，为后期处理惩罚链提供高度机动性。
1.3.1 ☘️构造函数

[color=‌#00FFFF]ShaderPass(shader, textureID)

• shader Object 包罗着色器代码和 uniforms 的设置对象。
  
• textureID string (可选) 输入纹理的 uniform 名称（默认 tDiffuse）。
  

1.3.2 ☘️属性

[color=‌#00FFFF].enabled：boolean
是否启用此通道（默认 true）。设为 false 可临时禁用效果。
[color=‌#00FFFF].uniforms：object
着色器 uniforms 的引用，支持动态修改参数：

1. shaderPass.uniforms.uStrength.value = 0.8; // 修改自定义参数

复制代码

[color=‌#00FFFF].renderToScreen：boolean
是否直接渲染到屏幕（默认 false）。若为最后通道，需设为 true。
1.3.3 ☘️方法

[color=‌#00FFFF].setSize(width, height)
调整通道的渲染尺寸（通常由 EffectComposer 自动调用）。
width: 画布宽度（像素）。
height: 画布高度（像素）。
二、🍀使用EffectComposer后期处理惩罚组合器（接纳RenderPass、ShaderPass渲染通道）

1. ☘️实现思绪

• 1、初始化renderer渲染器。
  
• 2、初始化Scene三维场景scene。
  
• 3、初始化camera相机，界说相机位置 camera.position.set，设置相机方向camera.lookAt。
  
• 4、创建THREE.AmbientLight环境光源ambiLight，创建THREE.SpotLight聚光灯光源spotLight，设置spotLight位置、光强、投影，scene场景参加ambiLight和spotLight。
  
• 5、加载多少模子：添加地面立方体网格对象cube，设置cube的材质、位置、旋转和投影信息，scene添加cube。添加三个立方体网格对象cube1、cube2、cube3，设置三个立方体的颜色和位置信息，scene添加cube1、cube2、cube3。添加‘libertStatue.obj’模子mesh，设置模子巨细、位置等信息，scene添加object。创建RenderPass、多个ShaderPass渲染通道，创建THREE.EffectComposer后期处理惩罚组合器composer，composer添加创建的渲染通道。界说controls方法，方法内界说gui控制ShaderPass殊效通道参数以及参数更新方法。界说render方法，实现cube1、cube2、cube3和模子mesh的旋转动画，调用composer的渲染方法render。详细代码参考下面代码样例。
  
• 6、参加gui控制。参加stats监控器，监控帧数信息。
  

2. ☘️代码样例

1. <!DOCTYPE html>
3. <html>
5. <head>
6.     <title>学习threejs，使用EffectComposer后期处理组合器（采用RenderPass、ShaderPass渲染通道），案例一</title>
7.     <script type="text/javascript" src="../libs/three.js"></script>
8.     <script type="text/javascript" src="../libs/stats.js"></script>
9.     <script type="text/javascript" src="../libs/dat.gui.js"></script>
10.     <script type="text/javascript" src="../libs/OBJLoader.js"></script>
11.     <script type="text/javascript" src="../libs/MTLLoader.js"></script>
12.     <script type="text/javascript" src="../libs/OBJMTLLoader.js"></script>
13.     <script type="text/javascript" src="../libs/postprocessing/EffectComposer.js"></script>
14.     <script type="text/javascript" src="../libs/postprocessing/ShaderPass.js"></script>
15.     <script type="text/javascript" src="../libs/postprocessing/RenderPass.js"></script>
16.     <script type="text/javascript" src="../libs/postprocessing/MaskPass.js"></script>
17.     <script type="text/javascript" src="../libs/shaders/CopyShader.js"></script>
18.     <script type="text/javascript" src="../libs/shaders/BrightnessContrastShader.js"></script>
19.     <script type="text/javascript" src="../libs/shaders/ColorifyShader.js"></script>
20.     <script type="text/javascript" src="../libs/shaders/SepiaShader.js"></script>
21.     <script type="text/javascript" src="../libs/shaders/RGBShiftShader.js"></script>
22.     <script type="text/javascript" src="../libs/shaders/ColorCorrectionShader.js"></script>
23.     <script type="text/javascript" src="../libs/shaders/MirrorShader.js"></script>
24.     <script type="text/javascript" src="../libs/shaders/VignetteShader.js"></script>
25.     <script type="text/javascript" src="../libs/shaders/HueSaturationShader.js"></script>
26.     <script type="text/javascript" src="../libs/shaders/BlendShader.js"></script>
27.     <script type="text/javascript" src="../libs/shaders/KaleidoShader.js"></script>
28.     <script type="text/javascript" src="../libs/shaders/LuminosityShader.js"></script>
29.     <script type="text/javascript" src="../libs/shaders/TechnicolorShader.js"></script>
30.     <script type="text/javascript" src="../libs/shaders/UnpackDepthRGBAShader.js"></script>
31.     <style>
32.         body {
33.             /* set margin to 0 and overflow to hidden, to go fullscreen */
34.             margin: 0;
35.             overflow: hidden;
36.         }
37.     </style>
38. </head>
39. <body>
41. <div id="Stats-output">
42. </div>
43. <div id="WebGL-output">
44. </div>
46. <!-- Js 代码块-->
47. <script type="text/javascript">
49.     // 初始化
50.     function init() {
52.         var stats = initStats();
54.         // 创建三维场景scene
55.         var scene = new THREE.Scene();
57.         // 创建相机
58.         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
60.         // 创建渲染器webGLRenderer，设置webGLRenderer的背景色、大小和touy
61.         var webGLRenderer = new THREE.WebGLRenderer();
62.         webGLRenderer.setClearColor(new THREE.Color(0xaaaaff, 1.0));
63.         webGLRenderer.setSize(window.innerWidth, window.innerHeight);
64.         webGLRenderer.shadowMapEnabled = true;
66.                 //设置相机的位置和方向
67.         camera.position.x = 20;
68.         camera.position.y = 30;
69.         camera.position.z = 40;
70.         camera.lookAt(new THREE.Vector3(-15, -10, -25));
72.         // 添加聚光灯光源
73.         var spotLight = new THREE.SpotLight(0xffffff);
74.         spotLight.castShadow = true;
75.         spotLight.position.set(0, 60, 50);
76.         spotLight.intensity = 1;
77.         spotLight.shadowMapWidth = 2048;
78.         spotLight.shadowMapHeight = 2048;
79.         spotLight.shadowCameraFov = 120;
80.         spotLight.shadowCameraNear = 1;
81.         spotLight.shadowCameraFar = 1000;
83.         var ambiLight = new THREE.AmbientLight(0x444444);
84.         scene.add(ambiLight);
86.         scene.add(spotLight);
87.         var plane = new THREE.BoxGeometry(1600, 1600, 0.1, 40, 40);
89.         var cube = new THREE.Mesh(plane, new THREE.MeshPhongMaterial(
90.                 {
91.                     color: 0xffffff,
92.                     map: THREE.ImageUtils.loadTexture("../assets/textures/general/plaster-diffuse.jpg"),
93.                     normalMap: THREE.ImageUtils.loadTexture("../assets/textures/general/plaster-normal.jpg"),
94.                     normalScale: new THREE.Vector2(0.6, 0.6)
95.                 }));
96.         cube.material.map.wrapS = THREE.RepeatWrapping;
97.         cube.material.map.wrapT = THREE.RepeatWrapping;
98.         cube.material.normalMap.wrapS = THREE.RepeatWrapping;
99.         cube.material.normalMap.wrapT = THREE.RepeatWrapping;
100.         cube.rotation.x = Math.PI / 2;
101.         cube.material.map.repeat.set(80, 80);
103.         cube.receiveShadow = true;
104.         cube.position.z = -150;
105.         cube.position.x = -150;
106.         scene.add(cube);
108.         var cube1 = new THREE.Mesh(new THREE.BoxGeometry(30, 10, 2), new THREE.MeshPhongMaterial({color: 0xff0000}));
109.         cube1.position.x = -15;
110.         cube1.position.y = 5;
111.         cube1.position.z = 15;
112.         cube1.castShadow = true;
113.         scene.add(cube1);
115.         var cube2 = cube1.clone();
116.         cube2.material = cube1.material.clone();
117.         cube2.material.color = new THREE.Color(0x00ff00);
118.         cube2.position.z = 5;
119.         cube2.position.x = -20;
120.         scene.add(cube2);
122.         var cube3 = cube1.clone();
123.         cube3.material = cube1.material.clone();
124.         cube3.material.color = new THREE.Color(0x0000ff);
125.         cube3.position.z = -8;
126.         cube3.position.x = -25;
127.         scene.add(cube3);
129.         var mesh;
131.         // webGLRenderer 绑定html要素
132.         document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
134.         var loader = new THREE.OBJMTLLoader();
135.         loader.load('../assets/models/sol/libertStatue.obj', '../assets/models/sol/libertStatue.mtl',
136.                 function (event) {
138.                     var object = event;
140.                     // fix for incorrect uvs.
141.                     console.log(event);
142.                     var geom = object.children[0].geometry;
143.                     var uv3 = geom.faceVertexUvs[0][0];
144.                     var uv4 = geom.faceVertexUvs[0][10];
146.                     // fill in the missing ones
147.                     for (var j = 0; j < 7616 - 7206; j++) {
148.                         if (geom.faces[j + 7206] instanceof THREE.Face4) {
149.                             geom.faceVertexUvs[0].push(uv4);
150.                         } else {
151.                             geom.faceVertexUvs[0].push(uv4);
152.                         }
153.                     }
155.                     object.children.forEach(function (e) {
156.                         e.castShadow = true
157.                     });
159.                     object.scale.set(20, 20, 20);
160.                     mesh = object;
161.                     mesh.position.x = 15;
162.                     mesh.position.z = 5;
163.                     scene.add(object);
164.                 });
166.         var mirror = new THREE.ShaderPass(THREE.MirrorShader);
167.         mirror.enabled = false;
169.         var hue = new THREE.ShaderPass(THREE.HueSaturationShader);
170.         hue.enabled = false;
172.         var vignette = new THREE.ShaderPass(THREE.VignetteShader);
173.         vignette.enabled = false;
175.         var colorCorrection = new THREE.ShaderPass(THREE.ColorCorrectionShader);
176.         colorCorrection.enabled = false;
177.         var rgbShift = new THREE.ShaderPass(THREE.RGBShiftShader);
178.         rgbShift.enabled = false;
180.         var brightness = new THREE.ShaderPass(THREE.BrightnessContrastShader);
181.         brightness.uniforms.brightness.value = 0;
182.         brightness.uniforms.contrast.value = 0;
183.         brightness.enabled = false;
184.         brightness.uniforms.brightness.value = 0;
185.         brightness.uniforms.contrast.value = 0;
187.         var colorify = new THREE.ShaderPass(THREE.ColorifyShader);
188.         colorify.uniforms.color.value = new THREE.Color(0xffffff);
189.         colorify.enabled = false;
191.         var sepia = new THREE.ShaderPass(THREE.SepiaShader);
192.         sepia.uniforms.amount.value = 1;
193.         sepia.enabled = false;
195.         var kal = new THREE.ShaderPass(THREE.KaleidoShader);
196.         kal.enabled = false;
198.         var lum = new THREE.ShaderPass(THREE.LuminosityShader);
199.         lum.enabled = false;
201.         var techni = new THREE.ShaderPass(THREE.TechnicolorShader);
202.         techni.enabled = false;
204.         var unpack = new THREE.ShaderPass(THREE.UnpackDepthRGBAShader);
205.         unpack.enabled = false;
207.         var renderPass = new THREE.RenderPass(scene, camera);
208.         var effectCopy = new THREE.ShaderPass(THREE.CopyShader);
209.         effectCopy.renderToScreen = true;
211.         var composer = new THREE.EffectComposer(webGLRenderer);
212.         composer.addPass(renderPass);
213.         composer.addPass(brightness);
214.         composer.addPass(sepia);
215.         composer.addPass(mirror);
216.         composer.addPass(colorify);
217.         composer.addPass(colorCorrection);
218.         composer.addPass(rgbShift);
219.         composer.addPass(vignette);
220.         composer.addPass(hue);
221.         composer.addPass(kal);
222.         composer.addPass(lum);
223.         composer.addPass(techni);
224.         composer.addPass(unpack);
225.         composer.addPass(effectCopy);
227.         var controls = new function () {
228.             this.brightness = 0.01;
229.             this.contrast = 0.01;
230.             this.select = 'none';
231.             this.color = 0xffffff;
232.             this.amount = 1;
233.             this.powRGB_R = 2;
234.             this.mulRGB_R = 1;
235.             this.powRGB_G = 2;
236.             this.mulRGB_G = 1;
237.             this.powRGB_B = 2;
238.             this.mulRGB_B = 1;
239.             this.rgbAmount = 0.005;
240.             this.angle = 0.0;
241.             this.side = 1;
242.             this.offset = 1;
243.             this.darkness = 1;
244.             this.hue = 0.01;
245.             this.saturation = 0.01;
246.             this.kalAngle = 0;
247.             this.kalSides = 6;
249.             this.rotate = false;
251.             this.switchShader = function () {
252.                 switch (controls.select) {
253.                     case 'none' :
254.                     {
255.                         enableShader();
256.                         break;
257.                     }
259.                     case 'colorify' :
260.                     {
261.                         enableShader(colorify);
262.                         break;
263.                     }
265.                     case 'brightness' :
266.                     {
267.                         enableShader(brightness);
268.                         break;
269.                     }
271.                     case 'sepia' :
272.                     {
273.                         enableShader(sepia);
274.                         break;
275.                     }
277.                     case 'colorCorrection' :
278.                     {
279.                         enableShader(colorCorrection);
280.                         break;
281.                     }
283.                     case 'rgbShift' :
284.                     {
285.                         enableShader(rgbShift);
286.                         break;
287.                     }
289.                     case 'mirror' :
290.                     {
291.                         enableShader(mirror);
292.                         break;
293.                     }
295.                     case 'vignette' :
296.                     {
297.                         enableShader(vignette);
298.                         break;
299.                     }
301.                     case 'hueAndSaturation' :
302.                     {
303.                         enableShader(hue);
304.                         break;
305.                     }
307.                     case 'kaleidoscope' :
308.                     {
309.                         enableShader(kal);
310.                         break;
311.                     }
312.                     case 'luminosity' :
313.                     {
314.                         enableShader(lum);
315.                         break;
316.                     }
317.                     case 'technicolor' :
318.                     {
319.                         enableShader(techni);
320.                         break;
321.                     }
322.                     case 'unpackDepth' :
323.                     {
324.                         enableShader(unpack);
325.                         break;
326.                     }
327.                 }
328.             };
330.             this.changeBrightness = function () {
331.                 brightness.uniforms.brightness.value = controls.brightness;
332.                 brightness.uniforms.contrast.value = controls.contrast;
333.             };
335.             this.changeColor = function () {
336.                 colorify.uniforms.color.value = new THREE.Color(controls.color);
337.             };
339.             this.changeSepia = function () {
340.                 sepia.uniforms.amount.value = controls.amount;
341.             };
343.             this.changeCorrection = function () {
344.                 colorCorrection.uniforms.mulRGB.value = new THREE.Vector3(controls.mulRGB_R, controls.mulRGB_G, controls.mulRGB_B);
345.                 colorCorrection.uniforms.powRGB.value = new THREE.Vector3(controls.powRGB_R, controls.powRGB_G, controls.powRGB_B);
346.             };
348.             this.changeRGBShifter = function () {
349.                 rgbShift.uniforms.amount.value = controls.rgbAmount;
350.                 rgbShift.uniforms.angle.value = controls.angle;
351.             };
353.             this.changeMirror = function () {
354.                 mirror.uniforms.side.value = controls.side;
355.             };
357.             this.changeVignette = function () {
358.                 vignette.uniforms.darkness.value = controls.darkness;
359.                 vignette.uniforms.offset.value = controls.offset;
360.             };
362.             this.changeHue = function () {
363.                 hue.uniforms.hue.value = controls.hue;
364.                 hue.uniforms.saturation.value = controls.saturation;
365.             };
367.             this.changeKal = function () {
368.                 kal.uniforms.sides.value = controls.kalSides;
369.                 kal.uniforms.angle.value = controls.kalAngle;
370.             };
372.             function enableShader(shader) {
373.                 // we're not interested in the first or the last one
374.                 for (var i = 1; i < composer.passes.length - 1; i++) {
375.                     if (composer.passes[i] == shader) {
376.                         composer.passes[i].enabled = true;
377.                     } else {
378.                         composer.passes[i].enabled = false;
379.                     }
380.                 }
381.             }
382.         };
384.         var gui = new dat.GUI();
386.         gui.add(controls, "select", ['none', "colorify", 'brightness', 'sepia', 'colorCorrection', 'rgbShift', 'mirror', 'vignette', 'hueAndSaturation', 'kaleidoscope', 'luminosity', 'technicolor']).onChange(controls.switchShader);
387.         gui.add(controls, "rotate");
389.         var bnFolder = gui.addFolder("Brightness");
390.         bnFolder.add(controls, "brightness", -1, 1).onChange(controls.changeBrightness);
391.         bnFolder.add(controls, "contrast", -1, 1).onChange(controls.changeBrightness);
393.         var clFolder = gui.addFolder("Colorify");
394.         clFolder.addColor(controls, "color").onChange(controls.changeColor);
396.         var colFolder = gui.addFolder('Color Correction');
397.         colFolder.add(controls, "powRGB_R", 0, 5).onChange(controls.changeCorrection);
398.         colFolder.add(controls, "powRGB_G", 0, 5).onChange(controls.changeCorrection);
399.         colFolder.add(controls, "powRGB_B", 0, 5).onChange(controls.changeCorrection);
400.         colFolder.add(controls, "mulRGB_R", 0, 5).onChange(controls.changeCorrection);
401.         colFolder.add(controls, "mulRGB_G", 0, 5).onChange(controls.changeCorrection);
402.         colFolder.add(controls, "mulRGB_B", 0, 5).onChange(controls.changeCorrection);
404.         var sepiaFolder = gui.addFolder("Sepia");
405.         sepiaFolder.add(controls, "amount", 0, 2).step(0.1).onChange(controls.changeSepia);
407.         var shiftFolder = gui.addFolder("RGB Shift");
408.         shiftFolder.add(controls, "rgbAmount", 0, 0.1).step(0.001).onChange(controls.changeRGBShifter);
409.         shiftFolder.add(controls, "angle", 0, 3.14).step(0.001).onChange(controls.changeRGBShifter);
411.         var mirrorFolder = gui.addFolder("mirror");
412.         mirrorFolder.add(controls, "side", 0, 3).step(1).onChange(controls.changeMirror);
414.         var vignetteFolder = gui.addFolder("vignette");
415.         vignetteFolder.add(controls, "darkness", 0, 2).onChange(controls.changeVignette);
416.         vignetteFolder.add(controls, "offset", 0, 2).onChange(controls.changeVignette);
418.         var hueAndSat = gui.addFolder("hue and saturation");
419.         hueAndSat.add(controls, "hue", -1, 1).step(0.01).onChange(controls.changeHue);
420.         hueAndSat.add(controls, "saturation", -1, 1).step(0.01).onChange(controls.changeHue);
422.         var kalMenu = gui.addFolder("Kaleidoscope");
423.         kalMenu.add(controls, "kalAngle", -2 * Math.PI, 2 * Math.PI).onChange(controls.changeKal);
424.         kalMenu.add(controls, "kalSides", 2, 20).onChange(controls.changeKal);
426.         render();
428.         function render() {
429.             stats.update();
431. //
432.             if (controls.rotate) {
433.                 if (mesh) mesh.rotation.y += 0.01;
434.                 cube1.rotation.y += 0.01;
435.                 cube2.rotation.y += 0.01;
436.                 cube3.rotation.y += 0.01;
438.             }
440.             requestAnimationFrame(render);
441.             composer.render();
442.         }
444.         function initStats() {
446.             var stats = new Stats();
447.             stats.setMode(0);
449.             stats.domElement.style.position = 'absolute';
450.             stats.domElement.style.left = '0px';
451.             stats.domElement.style.top = '0px';
453.             document.getElementById("Stats-output").appendChild(stats.domElement);
455.             return stats;
456.         }
457.     };
459.     window.onload = init;
461. </script>
462. </body>
463. </html>

复制代码

效果如下