Threejs 字体单独发光

（本文章纯原创，转载请标注）

先上效果图

这里用的是three的后效EffectComposer，材质用的是UnrealBloomPass。

正常使用后效的代码如下：

var renderPass = new RenderPass( scene, camera );

var bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85 );

var composer = new EffectComposer( renderer);

composer.addPass( renderPass );

composer.addPass( bloomPass );

然后每帧调用composer.render();

这时候会整个场景都发光,效果图如下：

如果想要做到部分发光怎么办呢？

我搜了网上其他人的代码，比如我想让鞋带单独发光

代码如下:

model_.traverse(function(obj)

{

if(obj.isMesh)

obj.layers.set(1);

});

xiedai.layers.set(0);

其实就是把鞋带的层级设为0，其他都设为1

render()中在composer.render();前后添加:

renderer.clear();

camera.layers.set(0);

composer.render();

render.clearDepth();

camera.layers.set(1);

renderer.render(scene, camera);

效果图如下

我们发现鞋带没了。。。。

真的没了吗？

我换了个角度看

鞋带其实是在的，而且正常发光，只不过three后效的layer被原场景挡住了

而且还有个很坑的问题，就是three的后效只有layer为0的时候才会生效，其他层都不会显示。

那该怎么办呢？

于是我想了个办法，让后效按照我的顺序渲染，所以就把UnrealBloomPass.js的render改了一下

具体做法如下：

先注掉外部render()中的这三行代码

// renderer.clearDepth();

// camera.layers.set(1);

//renderer.render(scene, camera);

首先解决只有layer为0才有后效的问题，只要改一行代码即可

找到fsQuad的定义，也就是this.fsQuad = new FullScreenQuad( null );这行代码

在下面加上this.fsQuad._mesh.layers.enableAll();

其实就是后效没有在所有层级上生效导致的

我们再解决后效渲染问题

首先改一下UnrealBloomPass的构造函数，添加两个参数 scene和camera

再添加到this属性中，这个后面要用到

class UnrealBloomPass extends Pass {

constructor( resolution, strength, radius, threshold, scene, camera ) {

super();

this.renderScene = scene;

this.renderCamera = camera;

this.strength = ( strength !== undefined ) ? strength : 1;

定义UnrealBloomPass的时候要做相应的修改，把scene和camera传入

var bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85, scene, camera );

然后到UnrealBloomPass.js中的render()中

有两个if ( this.renderToScreen )这样的判断

我们就修改这两个地方

第一个判断中注释掉这行

//this.fsQuad.render( renderer );

在下面添加代码

renderer.render( this.renderScene, this.renderCamera );

第二个判断

if和else中都注释掉

//this.fsQuad.render( renderer );

然后在判断外部添加

this.renderCamera.layers.set(1);

renderer.render( this.renderScene, this.renderCamera );

this.fsQuad.render( renderer );

这样就改好了效果图如下

这样就实现了局部发光，但是随即我有发现了个问题

就是透明材质会和背景混合

比如我的字体的背景就是透明的跟黑色的背景混合了，如下图：

字体虽然发光了，但是黑色背景挡住了模型，我能想到的办法就是专门用一个层级去跟透明材质混合，所以我又进行了如下处理：

把字体背景挡住的材质放到一个新的层级

houpian.layers.set(2);

回到UnrealBloomPass的render()，在第一个上述renderToScreen的判断中添加代码：

this.renderCamera.layers.set(2);

就可以得到开头的效果图了

不过以上所有的做法都没有封装性，希望three官方能考虑到多个层级需要单独后效的问题

完事

cslg.panda

2021.6.22

Threejs 字体单独发光相关推荐

字体单独设置样式_Glyphs 官方教程 | 字体命名
字体名称是很重要的,它决定了字体菜单中的分组和顺序,而这直接影响你的字体将如何呈现给用户.在一款字体中,字体名称被存储在六个不同的地方,这一点已经相当困难:或者实际上还会有更多的地方,这就更复杂 ...
使用Qt绘制艺术字（字体硬发光效果）
最近的项目中有用到艺术字,网上也找不到合适的用例(也有其他绘制艺术字的示例,但都不支持回车键和自适应对齐方式),在这样的情况下只能自己动手丰衣足食. 原理也很简单,使用QPainterPath先把文字 ...
html如何实现字体逐个输入,css3 怎么实现字体逐个发光
html> CSS3发光字 *{ padding:0;margin:0;font-size:14px; } body{ background: #f3f5f5; } .d{ width:100% ...
threejs 特效自定义发光围栏，发光墙体，闪烁动画
纯色闪烁版本,自定义颜色透明度,高度,位置等. 企鹅
unity 发光字体_Unity 游戏开发技巧集锦之创建自发光材质
Unity 游戏开发技巧集锦之创建自发光材质 Unity游戏开发技巧集锦教程大学霸内部资料创建自发光材质自发光材质(self-illuminated material)是指自己会发光的材质.生活中 ...
CSS 实现字体发光效果 text-shadow
一.CSS字体发光效果: CSS3 并没有直接设置发光效果的属性,但是利用text-shadow属性实现此效果 1.text-shadow:该属性为文本添加阴影效果. text-shadow: h-s ...
css_字体混合正片叠底与发光
css的字体正片叠底和发光效果字体的正片叠底效果思路实现字体的发光效果思路实现字体的正片叠底效果思路运用div的阴影和混合模式,适用于偏暗的背景,字体的div与背景的div叠加 ...
结合源码看《我所理解的cocos2dx-3.0》—— 字体
文章目录字体 FontFreeType Create Load 字符加载 FT_Load_Char 绘制特效架构 distance field 字体使用的第三方库:FreeType(封装了Tr ...
cad缺失字体补全工具_CAD图纸字体不全怎么办？只要修改字体映射表就可以轻松解决了...
原创:就说我在开发区趣说CAD,让枯燥生动起来. 导读:字体映射表是CAD的配置文件之一,随程序启动加载,通过修改其内容,可以对缺少的字体进行替代,解决字体缺失的困扰.今天将从字体缺失现象入手,分析 ...
Android多屏幕适配之字体大小、行间距和字间距
code小生,一个专注Android领域的技术平台作者:星际旅行android 地址:https://www.jianshu.com/p/730d0b2c1c5d 声明:本文已获星际旅行androi ...

Threejs 字体单独发光

Threejs 字体单独发光相关推荐

最新文章

热门文章