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的效果

2. 使用該特效后效果( 需要3d眼鏡觀看哦 )

有了這個工具, 我們能直接在網頁上創建一個3d游戲, 想想都覺得很興奮吧!!!

2. ascii

能夠使用字符代替物質的組成部分, 創建出黑客的感覺

首先, 讓我們用 .+?-1 以及空格創建一個圓環和一個平面吧

想必看到這里還不過癮吧, 看下一個, 這個的字符是 .+15

是否想自己實現相同功能呢, 哈哈, 請看后續詳解

3. parallaxbarrier

立體屏障效果, 通俗講是裸眼3d效果, 需要用到裸眼3d顯示器

效果如下

由於當前屏幕非裸眼3d顯示器, 效果展示不出來, 我也沒有這種顯示器, 這里就不演示完整效果了. 按道理說, 你的顯示是這種的話, 可以看到效果哦

4. peppersghost

淡入淡出效果, 將一個場景分成4個渲染, 並且前一個渲染比后一個渲染晚 Math.PI/2

效果如下, 場景設置為其中一個片段

添加進場景的只有四個當中的一個, 這個js庫將這個場景旋轉, 倒立等, 最終渲染成這種效果, 效果名我也不知道稱為啥

5. 總結

后面會一一介紹這些插件的使用方法