three.js 物体轮廓高亮
·
背景:物体在鼠标移上去时有一个高亮的交互;在状态为异常时轮廓高亮并闪烁
方案:
使用
- EffectComposer: 效果组合器
- RenderPass: 在指定的场景和相机的基础上渲染出一个新场景
- OutlinePass: -物体边界线条
- ShaderPass: 使用该通道你可以传入一个自定义的着色器,用来生成高级的、自定义的后期处理通道
- FXAAShader: 着色器主要功能是解决锯齿问题
import './EffectComposer'
import './OutlinePass'
import './RenderPass'
import './ShaderPass'
import './FXAAShader'
//轮廓高亮显示
composer = new THREE.EffectComposer(renderer);
renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);
outlinePass = new THREE.OutlinePass(new THREE.Vector2(width, height), scene, camera);
outlinePass.edgeStrength = 5; //包围线浓度
outlinePass.edgeGlow = 0; //边缘线范围
outlinePass.edgeThickness = 2; //边缘线浓度
outlinePass.pulsePeriod = 1; //包围线闪烁频率
outlinePass.visibleEdgeColor.set('green'); //包围线颜色
outlinePass.hiddenEdgeColor.set('green'); //被遮挡的边界线颜色
composer.addPass(outlinePass);
let effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
effectFXAA.uniforms['resolution'].value.set(1 / width, 1 / height);
effectFXAA.renderToScreen = true;
composer.addPass(effectFXAA);
更多推荐
已为社区贡献1条内容
所有评论(0)