【更新3 - 图片处理篇】基于picture-elements的3D动态户型图

moe1983

目录：
  1、基本介绍（详见开篇贴）
  2、户型图（酷乐家）
  3、图片处理（PS）
  4、HA基础设置（基于picture-elements）
  5、动态效果设置
  6、雷达设置



  最近忙着搞雷达集成，很久没有更新了，现在开始第3部分——图片处理
  在第2部分中，已经生成了一堆开关门、开关等的背景图片，接下来就要开始HA设置前的最后一步：把这些渲染图片，按照规范的命名，生成相应的区域/房间图。
  由于很多都是重复操作，这里就以一个区域/房间作为例子，其他房间都是类似的操作。


  开始图片处理之前，有几个原则：
  1. 所有背景图片必须严格按照一致角度旋转、一致的比例截图，中心点必须完全对齐，避免后续在HA中引用图片的时候产生位置偏移。
  2. 在第2步中，注意背景颜色、渲染特效细节要一致，目的是所有关灯的图片明暗保持一致。
  3. 建议每个区域/房间的原始图片文件都保留一份。例如，我用的是photoshop，保留每个房间的.psd文件，目录结构建议详见第2部分的帖子。
  
  开始图片处理，具体有以下几个步骤：
  一、墙体（可选）
  考虑到后续如果要用雷达定位，建议对顶部的墙体进行单独截图处理，这样后续可以通过设置透明度，避免目标被墙体完全挡住。如果不需要这个效果，可以忽略这一步。
  
  以我的户型图为例，方法有很多，我就用最简单的操作：
  1. 把渲染底图（随便一张）导入PS，旋转、按4:3比例对准中心（默认）截图。
  2. 新建一个复制图层，把所有房间的内部全部删除，仅保留墙体和外墙（如有），背景用魔棒工具擦除。
  这样，就生成一个只有墙体、背景透明的图片。导出PNG到特定目录（例如：/config/www/3dplan/bg/wall.png）

  二、房间/区域
  这一步是关键，具体要看你想展示的逻辑，我是需要考虑开关灯和开关门，所以要考虑2个变量：门、灯，我的逻辑是先考虑门，再考虑灯。
  （一）开关门效果图
  1. 把第2步渲染的关闭所有灯，打开或关闭门的图片导入PS
  2. 把每个房间/区域的开门、关门单独截图生成新的一个图层。这里注意不要改变图片大小，只需要把不涉及的部分设为透明，这样后续在HA就可以直接覆盖引用图片，避免每个房间都要定位的麻烦。

  3. 每个房间重复上述操作，单独一个图层，每个图层单独导出PNG，放在某用于存放所有关灯情况下的文件夹，注意命名需要跟后续的步骤规范统一，我用的规范是后缀用open或者close表示门的状态（如：/config/www/3dplan/lc_door/guest_bedroom_open.png）
  完成这步后，就会有一堆关灯-门开/关的对应.png图片，例如：


  （二）开灯效果图

游客，如果您要查看本帖隐藏内容请回复

  三、环境光线（可选）
  要加入环境光线（太阳或者夜晚），逻辑就是把上面的两步综合起来。对环境光线照射到的房间/区域，在关闭所有灯的情况下，把开关门的因素考虑进去。
  例如，环境光线会影响到阳台的落地窗和主卧，那么就要把落地窗开/关、主卧开/关都按第二步的逻辑截取图片。

  如果还要区分清晨、上午、中午、下午、黄昏等场景的阳关角度，那么请重复这一步的所有操作，每个对应的图片，按规范命名（如：房间_开关门）保存在单独的文件夹中，例如：

  到这里，所有图片处理的操作说完了，虽然操作比较繁琐，但很多都是重复操作，最关键的是灯光对房间和开/关门的影响，需要在截图的时候充分考虑，最终一句话总结：把光线能到的地方都考虑到，同时考虑开关门的效果。
  最后，放一张实时效果图作为这一部分的结束，下一部分讲一下在HA中如何利用这些图片搭建属于自己的3D户型基本（门、灯）动态图，码字不容易、传图路更难，大家多多支持哈。
  

moe1983

这个编辑也太麻烦了，动不动就bad gateway。。。图片上传时不时都失败，是我姿势不对吗？

lujiashun1

看看效果                                 

隔壁的王叔叔

加分。。。。。。。。。。。。。。。