源码时代前端干货分享|手把手教你制作ASCII码字化效果

我会带着你远行 2023-06-13 08:57 78阅读 0赞

## 小伙伴们是否已经让自己的球体和立方体动起来了吗? 这一节呢, 我将会带领大家制作一个很有意思的渲染效果。 ##

不知道大家有没有听过或者是看过《黑客帝国》这部电影，主要讲的是看似正常的显示世界实际上是由一个名为”矩阵”的计算机人工智能系统控制的，主角三人走上了抗争矩阵征途的故事。这部影片系列一共有三部，被大家公认的评为十大经典科幻电影之一，最早的一部是于1999年3月31日在美国上映，算是比较早的一部谱写人于及其关系的电影。大家有兴趣的话可以利用空闲时间去看一下。

在这部影片中, 有一个非常经典的画面效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70][]

对不起, 不是这张, 而是这张

![20191115095748455.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 1][]

叫做代码雨，大家可以通过百度看一下代码雨的动态效果。而在电影中，所有的现实中的东西都是由一串串代码组成的， 比如这样。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 2][]

今天， 我就要带领大家制作这样的效果。这个效果叫做ASCII码字化效果（文本画），非常简单。

首先需要我们需要在页面头部引入AsciiEffect文件，这个文件我已经上传到我的github上了, 大家可以通过这个地址去下载

[https://github.com/Daisy-YW/threeJS/blob/master/js/asciiEffect.js][https_github.com_Daisy-YW_threeJS_blob_master_js_asciiEffect.js]

接下来我们需要修改一下JS主体部分的最后几行, 下面这句话的意思是在\#WebGL\_output这个DOM节点中添加我们渲染器中的dom元素

$("\#WebGL\_output")**.**append(renderer**.***domElement*);

我们需要将它改为

*//**利用ASCII改编渲染器中原本的效果*

vareffect**=****new**THREE**.**AsciiEffect( renderer);

*// ASCII**渲染效果的尺寸是浏览器的尺寸*

effect**.**setSize( window**.***innerWidth*,window**.***innerHeight*);

*// **在\#WebGL\_output中渲染改编为ASCII效果的DOM节点*

$("\#WebGL\_output")**.**append(effect**.***domElement*);

由于我们的案例中, 球体和立方体都是加了动态效果的, 所以我们还需要在render循环中改变一下我们的代码。由于我们renderer已经被ASCII进行了改编， 所以在最后的render函数中我们需要将

renderer.render( scene,camera )

改为:  effect.render( scene,camera )

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 3][]

从新打开你们的页面，就是下面这种效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 4][]

是不是很简单很好玩呢？

本次学习就到这里，如果大家有什么问题都可以积极留言，或者是下载我的代码进行研究哦！

地址如下：

[https://github.com/Daisy-YW/threeJS/blob/master/05-threeJS-AsciiEffect%E6%95%88%E6%9E%9C.html][https_github.com_Daisy-YW_threeJS_blob_master_05-threeJS-AsciiEffect_E6_95_88_E6_9E_9C.html]

我们下次再见喽![20191115095856103.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019111509573264.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk=,size_16,color_FFFFFF,t_70
[20191115095748455.png]: https://img-blog.csdnimg.cn/20191115095748455.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191115095800644.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191115095813881.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk=,size_16,color_FFFFFF,t_70
[https_github.com_Daisy-YW_threeJS_blob_master_js_asciiEffect.js]: https://github.com/Daisy-YW/threeJS/blob/master/js/asciiEffect.js
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191115095827637.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191115095843726.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk=,size_16,color_FFFFFF,t_70
[https_github.com_Daisy-YW_threeJS_blob_master_05-threeJS-AsciiEffect_E6_95_88_E6_9E_9C.html]: https://github.com/Daisy-YW/threeJS/blob/master/05-threeJS-AsciiEffect%E6%95%88%E6%9E%9C.html
[20191115095856103.png]: https://img-blog.csdnimg.cn/20191115095856103.png