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);

three.js 物体轮廓高亮相关推荐

寻找复杂背景下的物体轮廓 (从禾路的博客园整理学习)
目录 1.问题背景 2.解决思路 3.代码实现 4.相关资料 1.问题背景由于拍摄时产生的阴影原因,所计算出来的物体轮廓并不完整.那么有没有方法检测出物体的完整轮廓呢? 图1-1 原始图像图1- ...
【Unity3D】HighlightingSystem3D物体边缘高亮效果使用教程
#[Unity3D]HighlightingSystem3D物体边缘高亮效果使用教程 1.导入对应的高亮插件HighlightingSystem 2.在场景内给摄像机添加以下组件 3.给需要高亮的物体 ...
highlight.js（代码高亮插件）
highlight.js(代码高亮插件) 官网用法查看核心 API Highlight.js 将一些函数导出为hljs对象的方法强调 highlight(code, {language, ign ...
js定时器、高亮修改单元格背景色
window.setInterval() 功能:按照指定的周期(以毫秒计)来调用函数或计算表达式. 语法:setInterval(code,millisec) 解释:code:在定时时间到时要执行的J ...
js+正文规则高亮搜索关键字（二）
[原创]JavaScript高亮搜索关键字(改进版) [2009-1-6 16:25:00] by mwfls 11 我顶 .maks { line-height: 150%; padding: 10 ...
Ghost本地安装highlight.js使代码高亮
对于程序猿写博客来说,这代码高亮是起码的要求.可是Ghost本身没有支持高亮代码. 可是能够通过扩展来实现,它就是highlight.js--附官方站点,看了下首页介绍,真的非常强大,如今说说怎么进行 ...
多个物体轮廓c语言提取算法,C++ opencv-3.4.1 提取不规则物体的轮廓
在学习opencv的时候,对一张照片,需要标注照片上物体的不规则轮廓. 如图: 使用opencv进行物体的轮廓处理,关键在于对照片的理解,前期的照片处理的越好最后调用api出来的结果就越接近理想值. ...
原生JS实现代码高亮功能
实现步骤分析如何实现该功能了解词法结构 Javascript的产生式少废话,上代码分析如何实现该功能平时我们在使用一些代码编辑器或者Markdown时很好奇它的代码高亮是如何实现的.其实原 ...
遍历图像找最小外接矩形 matlab,2018a版本MatLab利用regionprops函数获取图片中物体轮廓最小外接矩形...
2018a版本MatLab利用regionprops函数获取图片中物体最小外接矩形本次内容,用于介绍利用matlab中的regionprops函数来获取图像区域中的物体的最小外接矩形信息(位置(x, ...

three.js 物体轮廓高亮

three.js 物体轮廓高亮相关推荐

最新文章

热门文章