上海优化排名网站,wordpress留言提交慢,设计师常用素材网站,政务微信小程序查看 demo 下载源码你可能对那些购买时需要选择座位的订票系统比较熟悉。通常在比赛#xff0c;电影#xff0c;搏击或者演唱会售票的时候需要这样做。如果能有一种座位的预览效果该有多酷啊#xff0c;比如能够从你选择的位置的角度去预览舞台或者屏幕。这个问题引出了今天…查看 demo 下载源码你可能对那些购买时需要选择座位的订票系统比较熟悉。通常在比赛电影搏击或者演唱会售票的时候需要这样做。如果能有一种座位的预览效果该有多酷啊比如能够从你选择的位置的角度去预览舞台或者屏幕。这个问题引出了今天我们将要分享给大家的一个新尝试。注意我们使用到的某些技术还是非常实验性质的不是所有浏览器都支持。这个demo需要浏览器支持 transform-style: preserve-3d。我们的想法是显示一个可以从 座次表 选择座位的影厅。当选择一个座位我们将移动到房间的相应位置让用户可以看到所选位置的真实视野。在页面的中央有一个可以解锁旋转 视角 的按钮(默认是不能随鼠标旋转视角的)考虑到真实情况下用户会旋转的自己的头所以这点也是很重要的。这个demo中用到的预告片来自 The Blender Foundation 的动画片 Sintel 。开始我们显示一个带预告片信息和选择座位选项的预告屏幕然后我们点击 select the seats我们将把视野移到影厅的后面并显示座次表一旦点击了一个座位视野将移动到座位相应的位置屏幕中央的图标可以让我们解锁视野比如可以让观察者环顾四周。这类似于脑袋的自由扭动对于模拟真实视野是很重要的。我们可以在任意点播放预告片并感受到从那个特定位置屏幕是如何呈现的。不幸的是某些版本的IE不支持 transform-style: preserve-3d 所以这个demo是不能在这些版本运行的。在Github上找到这个项目 。原文 http://tympanus.net/codrops/2016/01/12/cinema-seat-preview-experiment/ 。本条技术文章来源于互联网如果无意侵犯您的权益请点击此处反馈版权投诉本文系统来源php中文网
