threejs 辉光的使用 在vue

引入插件

import {
		EffectComposer
	} from "three/examples/jsm/postprocessing/EffectComposer.js";

import {
		UnrealBloomPass
	} from 'three/examples/jsm/postprocessing/UnrealBloomPass'
import {
		RenderPass
	} from "three/examples/jsm/postprocessing/RenderPass.js";

辉光配置

addBloomPass() {
				// https://threejs.org/examples/?q=un#webgl_postprocessing_unreal_bloom
				let params = {
					// 强度
					bloomStrength: 1.2,
					// 阈值
					bloomThreshold: 0,
					// 半径
					bloomRadius: 2
				}

				// const gui = new GUI()
				// window.gui = gui


				var width = this.$refs.myThreeRef.clientWidth;
				var height = this.$refs.myThreeRef.clientHeight;
				const renderScene = new RenderPass(scene, camera)
				// this.SCREEN_WIDTH = this.$refs.myThreeRef.clientWidth;
				// this.SCREEN_HEIGHT = this.$refs.myThreeRef.clientHeight;

				console.log(width)

				//创建辉光bloom通道， 强度1.5，半径0，阈值0
				var bloomPass = new UnrealBloomPass(new THREE.Vector2(width, height), params.bloomStrength, params
					.bloomRadius, params.bloomThreshold)
				bloomPass.renderToScreen = true;

				console.log(bloomPass, 'bloomPass')

				composerglow = new EffectComposer(renderer)
				composerglow.setSize(width, height);
				composerglow.addPass(renderScene)
				composerglow.addPass(bloomPass)
			},

layers 分层

	groupObj.children[0].children.map((item) => {
					
					
					
					if (faguang.indexOf(item.material.name) != -1) {
						item.layers.set(1);
						selectedObjects.push(item);
						// return true;
					} else {
						item.material.visible=false;
						item.layers.set(0);

						selectedObjects2.push(item);
					}
				});

				this.addBloomPass()

render

	animate() {
				// 进行渲染
				let layers = new THREE.Layers();
				const delta = this.clock.getDelta() // 获取自上次调用的时间差
				if (renderer) {


					renderer.autoClear = false;
					controls.update();
					renderer.clear();
					ambient.layers.set(1);
					camera.layers.set(1)
					if (composer) {
						composer.render();
					}
					if (composerglow) {
						composerglow.render(delta)
					}
					renderer.clearDepth(); // 清除深度缓存
					ambient.layers.set(0);
					camera.layers.set(0)
					renderer.render(scene, camera);



					requestAnimationFrame(this.animate);


				}
			},

WebGLRenderer 配置

renderer = new THREE.WebGLRenderer({
						autoClear: false, //辉光需要关闭
						antialias: true, // true/false表示是否开启反锯齿
						alpha: true, // true/false 表示是否可以设置背景色透明
						precision: "highp", // highp/mediump/lowp 表示着色精度选择
						premultipliedAlpha: true, // true/false 表示是否可以设置像素深度（用来度量图像的分辨率）
						preserveDrawingBuffer: true, // true/false 表示是否保存绘图缓冲
						logarithmicDepthBuffer: true, //是否使用对数深度缓存。如果要在单个场景中处理巨大的比例差异，就有必要使用。 默认是false。
						maxLights: 10, // 最大灯光数
						gammaInput: true, //默认为 false. 如果设置了该参数，表示所有纹理和颜色应当使用预乘的gamma值来输入。
						gammaOutput: true, //默认为 false. 如果设置了该参数，表示所有纹理和颜色应当使用预乘的gamma值来输出。
						// renderer.shadowMap.enabled = true;//实现阴影贴图（或阴影映射）的组件的引用。

						stencil: true, // false/true 表示是否使用模板字体或图案
					});