ThreeJS系列2_effect插件集简介( 3d, vr等 )

ThreeJS系列2_effect插件集简介( 3d, vr等 )

ThreeJS 官方案例中有一些 js库 可以替代 render 将场景中的物质变换为其他效果的物质

目录

• ThreeJS系列2_effect插件集简介( 3d, vr等 )
  • 1. anaglyph
  • 2. ascii
  • 3. parallaxbarrier
  • 4. peppersghost
  • 5. 总结

---

1. anaglyph

立体影片效果

就像在电影院中看 3d 电影一样, 可以使用 3d 眼镜观看, 是不是很炫酷呢

不使用眼镜时, 会有点模糊, 使用3d眼镜才有效果哦

1. 不使用anaglyph的效果

1. 使用该特效后效果( 需要3d眼镜观看哦 )

有了这个工具, 我们能直接在网页上创建一个3d游戏, 想想都觉得很兴奋吧!!!

2. ascii

能够使用字符代替物质的组成部分, 创建出黑客的感觉

首先, 让我们用 .+?-1 以及空格创建一个圆环和一个平面吧

想必看到这里还不过瘾吧, 看下一个, 这个的字符是 .+15

是否想自己实现相同功能呢, 哈哈, 请看后续详解

3. parallaxbarrier

立体屏障效果, 通俗讲是裸眼3d效果, 需要用到裸眼3d显示器

效果如下

由于当前屏幕非裸眼3d显示器, 效果展示不出来, 我也没有这种显示器, 这里就不演示完整效果了. 按道理说, 你的显示是这种的话, 可以看到效果哦

4. peppersghost

淡入淡出效果, 将一个场景分成4个渲染, 并且前一个渲染比后一个渲染晚 Math.PI/2

效果如下, 场景设置为其中一个片段

添加进场景的只有四个当中的一个, 这个js库将这个场景旋转, 倒立等, 最终渲染成这种效果, 效果名我也不知道称为啥

5. 总结

后面会一一介绍这些插件的使用方法