使用three.js模拟城市灯光秀

在线地址

同时我也上一下我的最新实现的高性能方案,在线地址

第一次和朋友去看城市灯光秀,就在想灯光秀的实现原理。想过投影,但是细看即没有投影源,也没有投影路径,再就只能是灯光秀墙体安装灯光体设备,统一组织所有灯光体的发光,当然这种灯光体的灯光可以是各种颜色的。

电脑屏幕、手机屏幕中都有像素的概念,像素其实就是图像中的最小单元。在灯光秀整个场景中,最小的单元就是灯光体,而灯光秀的整个场景,则组成了一个大的“屏幕”。

以下是我使用three.js创建并模拟城市灯光秀的步骤:
一、创建随机的建筑
城市建筑可以用随机的Mesh来模拟,模拟了一下,感觉效果还不错。

二、创建灯光秀的灯光设备

灯光设备是贴在墙体的,这里我使用了一个个小的plane来模拟,每个plane都可以随意更改颜色,来达到灯光的效果。

三、灯光随着视频颜色联动

在html中播放mp4格式的视频,每个帧都是一个canvas,相当于原始的屏幕,而灯光秀中的每个灯光体,对应了这个原始屏幕中的一个位置,颜色联动时,我们只需要取出灯光体对应的原始屏幕位置的像素的颜色值,然后更改plane的颜色,达到颜色联动的视觉。

四、整体效果图

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

evomap

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值