Raycaster – пример успешной реализации WEBGL графики, который можно использовать, как интерактивный фон на сайт.
Для того, чтобы его подключить, необходимо добавить на страницу следующие скрипты:
<script src='js/three.min.js'></script>
<script src='js/TweenMax.min.js'></script>
<script src='js/bootstrap.min.js'></script>
<script src='js/RectAreaLightUniformsLib.js'></script>
<script src="/js/index.js"></script>
Эти скрипты необходимо расположить внизу страницы. Не забывайте, что данные эффекты очень ресурсозатратны. И если они у Вас на ПК отображаются без тормозов, то это не значит, что на более слабых ПК они будут себя вести также.
Настройки менять в файле index.js... Цвета все те. что начинаются с 0x... (0xffffff, например). Также возле цветов стоит интенсивность свечения (0,1, 3, например).
Количество лучше ставить меньше, чтобы было более вероятно отсутствие тормозов. Устанавливайте в цикле в файле index.js (по умолчанию — 30):
60: for (var i = 0; i<30; i++) {