在線地址

同時我也上一下我的最新實(shí)現(xiàn)的高性能方案，在線地址

第一次和朋友去看城市燈光秀，就在想燈光秀的實(shí)現(xiàn)原理。想過投影，但是細(xì)看即沒有投影源，也沒有投影路徑，再就只能是燈光秀墻體安裝燈光體設(shè)備，統(tǒng)一組織所有燈光體的發(fā)光，當(dāng)然這種燈光體的燈光可以是各種顏色的。

電腦屏幕、手機(jī)屏幕中都有像素的概念，像素其實(shí)就是圖像中的最小單元。在燈光秀整個場景中，最小的單元就是燈光體，而燈光秀的整個場景，則組成了一個大的“屏幕”。

以下是我使用three.js創(chuàng)建并模擬城市燈光秀的步驟：
一、創(chuàng)建隨機(jī)的建筑
城市建筑可以用隨機(jī)的Mesh來模擬，模擬了一下，感覺效果還不錯。

二、創(chuàng)建燈光秀的燈光設(shè)備

燈光設(shè)備是貼在墻體的，這里我使用了一個個小的plane來模擬，每個plane都可以隨意更改顏色，來達(dá)到燈光的效果。

三、燈光隨著視頻顏色聯(lián)動

在html中播放mp4格式的視頻，每個幀都是一個canvas，相當(dāng)于原始的屏幕，而燈光秀中的每個燈光體，對應(yīng)了這個原始屏幕中的一個位置，顏色聯(lián)動時，我們只需要取出燈光體對應(yīng)的原始屏幕位置的像素的顏色值，然后更改plane的顏色，達(dá)到顏色聯(lián)動的視覺。

四、整體效果圖

總結(jié)

以上是生活随笔為你收集整理的使用three.js模拟城市灯光秀的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。