[摘要]这次向大家展示一个汽车变色案例，这个主要涉及到无缝热点贴图，说到无缝热点贴图，您当然可以参考我们站内泳池变色或机房开门案例的方法，这里向大家展示另外一个方法实现，获取对应热点图片坐标，详细介绍如下。

相信大家都知道上面实现的代码，原理就是获取热点car所需的大小和坐标，贴到全景上，问题是如何获取这些数据：

现在有一个相对简单方法:

• ●   使用cube六面体场景
• ●  变换的热点应该整体位于一面的cube中，不能跨区域
• ●  在cube一面中剪切出热点区域
• ●  从而计算出热点大小和坐标:
  • ○   some explanations first:
    • ■   热点内部扭曲标准是1000x1000
    • ■   默认1000x1000 大小与六面体切片刚好贴合
  • ○  因而按1000x1000这个参数原理，可通过下面公式计算出，width、height、ox、oy参数的值:
    • ■   hotspot.width = area-width * 1000 / original-cubeface-width
    • ■   hotspot.height = area-height * 1000 / original-cubeface-height
    • ■   hotspot.ox = area-x * 1000 / original-cubeface-width - 500
    • ■   hotspot.oy = area-y * 1000 / original-cubeface-height - 500
    • ■    "hotspot.edge" 统一使用"lefttop"，因为ox\oy是基于左上角为0坐标获取
  • ○   通过设置ath/atv的值可以将图片热点定位与前右左后上下其中一张六面体切片中:
    • ■   front: ath="0" atv="0"
    • ■   right: ath="90" atv="0"
    • ■   left: ath="-90" atv="0"
    • ■   back: ath="180" atv="0"
    • ■   up: ath="0" atv="-90"
    • ■   down: ath="0" atv="+90"

以下是计算步骤:

我们找出热点所在的六面体图片，如果是普通2:1全景图，请先使用转换工具转换:

从photoshop获取所需要对应热点位置的坐标和大小:

从photoshop剪切出热点图片，并在photoshop中修改汽车颜色后保存：

热点位于六面体切片的坐标(ox、oy): x=622 y=941

热点大小（宽area-width、高area-height）: w=583 h=332

六面体切片大小(original-cubeface-width、 original-cubeface-height）： 1900x1900

根据上面公式计算出width、height、ox、oy参数：

hotspot.width = 583 * 1000 / 1900 = 306.842105
hotspot.height = 332 * 1000 / 1900 = 174.736842
hotspot.ox = 622 * 1000 / 1900 - 500 = -172.631578
hotspot.oy = 941 * 1000 / 1900 - 500 = -4.736842

获取数据后，填入hotspot对应属性：

现在我们最后一步是实现鼠标移到车上面进行变色动作，需要获取车的多边形区域:

• ●   使用热点编辑器获取汽车轮廓坐标（多边形添加方法，可以看这里）
• ●   多边形热点enabled设置为 (enabled="false")
• ●   多边形热点透明设置为 (alpha="0.0")
• ●  热点图片 - zorder="1", 多边热点 - zorder="2"，多边形热点位于上方
• ●   在多边形热点onover/onout加入相关动作

案例下载地址

点击开通会员权限查看

【重要】泳池无缝热点拼接切换案例