背景:物体在鼠标移上去时有一个高亮的交互;在状态为异常时轮廓高亮并闪烁
在这里插入图片描述

方案:

​ 使用

  1. EffectComposer: 效果组合器
  2. RenderPass: 在指定的场景和相机的基础上渲染出一个新场景
  3. OutlinePass: -物体边界线条
  4. ShaderPass: 使用该通道你可以传入一个自定义的着色器,用来生成高级的、自定义的后期处理通道
  5. 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);
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐