收集了一些案例（包含设计稿），主要用于提升美感，模仿时也有个参考对象。每张图片下面都会带上链接。注意，设计稿的效果与最终实现会有出入，毕竟有些效果很难做，有些在unity里做还行，在web里做就相对困难。

案例

腾讯智慧建筑

  腾讯智慧建筑看上去就相当漂亮：

  做3D贴图时，时常需要利用PS来调整图片：

技巧

调整图像大小

  webGL1需要调整图片为POW大小（Power Of Two），即像素大小符合2的倍数（32*32,64*64,128*128,...,1024*1024,...）以获取更好的性能。
 做法：1.创建时就指定像素。2.菜单栏：图像->图像大小。

 这是3D可视化教程系列的文章，如果第一次阅读请先阅读《3D可视化教程导读》。

源码及3D项目文件

  源码及工程项目都放到github上。
  源码：threejs-example

H264视频在线转码播放

 事情是这样的，后端开发人员说，通过websocket转发客户端发送的h264视频到前端，前端播放视频。我一听就知道这个需求不简单。首先，我知道只有少数的几种视频格式能在浏览器里播放，如果不能播放就涉及到转码的问题。其次，我没试过在websocket里传二进制的文件，传过来的数据到底要怎么处理才能像HTTP GET到的文件一样进行处理。
 这里要特别说明一下，一般来说大家并不会遇到这种需求，因为一般是不会把大量计算放到前端来运行，而是交由后端运算完再发给前端，前端只是个界面展示，不应该用作大量计算导致卡顿。（服务器的性能会优于用户的电脑，同时要照顾机器性能差的用户。）除非你这个页面就是打算用来占用用户的性能来挖矿的…..而提出这个需求的后端开发人员，是个技术一般般的老员工，但话语权比我高，所以我也只能先做出来试试看，再不济就展示出来说性能的确不行，要改方案由后端来做，真不是我平白无故给你增加工作量，而确实是应该由后端来做。

示例效果

 这是3D可视化教程系列的文章，如果第一次阅读请先阅读《3D可视化教程导读》，这里展示的项目效果可访问b-city 展示网址：