VUE2+THREE.JS辉光设定和解决辉光导致背景变暗的问题

本文介绍: 给我的设计好的fbx 模型,已经设定好了模型发光材质,所以直接添加辉光效果,就可以自动发光。animate 方法中增加。

THREE.JS辉光设定和解决 辉光导致背景变暗的问题

THREE.JS 辉光设定
THREE.JS 辉光导致背景变暗的问题

THREE.JS 辉光设定

给我的设计好的fbx 模型,已经设定好了模型发光材质,所以直接添加辉光效果,就可以自动发光
blender模型生成器里的发光只是生成器里的发光效果,导入到three里并不生效,需要用代码生成辉光效果

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

2.添加辉光方法

//添加辉光效果
initBollmPass() {
	let renderScene = new RenderPass(scene, camera);
	let bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 0.3, 0.5, 1); //辉光阀值,辉光半径,辉光强度
	bloomPass.renderToScene = TreeWalker;
	bloomPass.samples = 7; //采样次数
	composer = new EffectComposer(renderer);
	composer.setSize(window.innerWidth, window.innerHeight);
	composer.addPass(renderScene);
	composer.addPass(bloomPass);
	// 设置场景背景颜色
	scene.background = new THREE.Color("#182238");
},

3.动画执行
要想辉光一直有效,需要一直执行 composer.render()方法:
animate 方法中增加 composer.render();
在这里插入图片描述

THREE.JS 辉光导致背景变暗的问题

1.设定背景图片

scene.background = new THREE.TextureLoader().load("three/work-shop-bg.png");

2.初始化辉光

//初始化辉光
initEffectComposer() {
	// 场景渲染器
	effectComposer = new EffectComposer(renderer);
	const renderPass = new RenderPass(scene, camera);
	effectComposer.addPass(renderPass);
	//创建辉光效果
	unrealBloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 0.3, 0.5, 1);
	unrealBloomPass.renderToScreen = false;
	// 辉光合成器
	glowComposer = new EffectComposer(renderer);
	glowComposer.renderToScreen = false;
	glowComposer.addPass(new RenderPass(scene, camera));
	glowComposer.addPass(unrealBloomPass);
	// 着色器
	let shaderPass = new ShaderPass(
		new THREE.ShaderMaterial({
			uniforms: {
				baseTexture: { value: null },
				bloomTexture: { value: glowComposer.renderTarget2.texture },
				tDiffuse: {
					value: null,
				},
			},
			vertexShader:
				"tttvarying vec2 vUv;n" +
				"n" +
				"tttvoid main() {n" +
				"n" +
				"ttttvUv = uv;n" +
				"n" +
				"ttttgl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );n" +
				"n" +
				"ttt}",
			fragmentShader:
				"tttuniform sampler2D baseTexture;n" +
				"tttuniform sampler2D bloomTexture;n" +
				"n" +
				"tttvarying vec2 vUv;n" +
				"n" +
				"tttvoid main() {n" +
				"n" +
				"ttttgl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );n" +
				"n" +
				"ttt}",
			defines: {},
		}),
		"baseTexture"
	);

	shaderPass.renderToScreen = true;
	shaderPass.needsSwap = true;
	effectComposer.addPass(shaderPass);
},