澳门mgm线上娱乐

028-86261949

当前位置:澳门mgm线上娱乐 > 技术交流 > threeJS--ASCII:实现代码雨的科幻效果

threeJS--ASCII:实现代码雨的科幻效果

2019/11/15 09:35 分类: 技术交流 浏览:1

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

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

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

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

 

 

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

 

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

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

 

<script src="./js/asciiEffect.js"></script>

 

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

$("#WebGL_output").append(renderer.domElement);

我们需要将它改为

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

var effect = 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 )

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

是不是很简单很好玩呢?

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

地址如下:

我们下次再见喽

 

 

 

#标签:threeJS,ASCII效果,代码雨