卡预览方法、装置及电子设备与流程

1.本技术属于卡片绘制技术领域，尤其涉及一种卡预览方法、装置及电子设备。


背景技术：

2.通常卡片制作应用中，用户可以自定义卡片的形状、大小以及正面封面等元素，制作出个性化的卡片。但目前的技术中，用户自定义上述元素后，用户只能预览到所形成的卡片模型的正视图方向的平面图像，预览视图单一，导致最终制作出的卡片往往无法达到预期的视觉效果。


技术实现要素：

3.本技术实施例提供一种在卡预览方法、装置及电子设备，能够预览卡片模型的立体效果。
4.一方面，本技术实施例提供一种卡预览方法，方法包括：获取元素数据；在预设三维场景中创建第一卡片的三维模型；根据元素数据，对第一卡片的三维模型进行渲染，生成第一卡片的目标三维模型；显示目标三维模型的预览画面。
5.在一些实施例中，元素数据包括第一卡片的卡体外形数据；在预设三维场景中创建第一卡片的三维模型，包括：在预设三维场景中的视场空间内，根据卡体外形数据，生成第一卡片的卡体平面图形，其中，视场空间为预设三维场景中预设观察点对应的坐标、视场角度以及视场比例确定的视锥体空间，卡体平面图形的中心与观察点对应的坐标关联；对卡体平面图形进行厚度拉伸，生成第一卡片的三维模型。
6.在一些实施例中，元素数据包括以下一类或多类：标志元素数据、元件元素数据、封面元素数据、文字元素数据、材质数据和光效数据。
7.在一些实施例中，元素数据包括第一元素数据和第二元素数据，第一元素数据为封面元素数据；在所述根据所述元素数据，对所述第一卡片的三维模型进行渲染，生成对应的目标三维模型中，包括：将所述第一元素数据作为底图纹理，并将所述第二元素数据叠加在所述第一元素数据上层，形成第一渲染纹理数据；将所述第一渲染纹理数据，渲染为所述第一卡片的三维模型对应平面的元素纹理，得到目标三维模型。
8.在一些实施例中，在形成第一渲染纹理数据之后，方法包括：根据预设环境光数据和第一渲染纹理数据，生成叠加预设环境光后的第一渲染纹
理数据；将第一渲染纹理数据，渲染为第一卡片的三维模型对应平面的元素纹理，得到目标三维模型，包括：将叠加预设环境光后的第一渲染纹理数据，渲染为第一卡片的三维模型对应平面的元素纹理，得到目标三维模型。
9.在一些实施例中，第一元素数据和第二元素数据均为元素图片，第二元素数据对应元素图片上的第一元素区域呈现对应的元素图形，且元素图片上除第一元素区域之外的区域为透明状；将第一元素数据作为底图纹理，并将第二元素数据叠加在第一元素数据上层，形成第一渲染纹理数据，包括：将第二元素数据的中心与第一元素数据的中心对齐后叠加在第一元素数据上层，形成第一渲染纹理数据；以及将第一渲染纹理数据的中心与三维模型的对应平面的中心对齐。
10.在一些实施例中，第二元素数据为元素图片，元素图片中包括元素图形，将第一元素数据作为底图纹理，并将第二元素数据叠加在第一元素数据上层，形成第一渲染纹理数据，包括：将第一元素数据作为底图纹理，将第二元素数据按照预设的坐标位置叠加在第一元素数据上层，形成第一渲染纹理数据；以及以第一元素数据的中心为第一渲染纹理数据的中心，将第一渲染纹理数据的中心与三维模型对应平面的中心对齐。
11.在一些实施例中，元素数据包括第一元素图片，第一元素图片中包括第一元素图形；目标三维模型为对应第一角度的模型；显示目标三维模型的预览画面之后，方法包括：根据目标三维模型，确定第一元素图形在目标三维模型对应平面第一角度的初始坐标和初始形态；确定第一元素图形在目标三维模型对应平面第二角度的第二坐标和第二形态；在预设更新时间，根据第一元素图形更新渲染三维模型，得到对应第二角度的更新目标三维模型，更新目标三维模型中对应第一元素图形的元素纹理位于平面的第二坐标处且被渲染为第二形态；将目标三维模型的预览画面，动态更新显示为更新目标三维模型的预览画面。
12.在一些实施例中，显示目标三维模型的预览画面，包括：接收用户的第一输入，响应于第一输入，动态更新显示目标三维模型对应角度的预览画面。
13.在一些实施例中，目标三维模型为对应第一角度的模型；响应于第一输入，动态更新显示目标三维模型对应角度的预览画面，包括：响应于第一输入，确定第一卡片的三维模型的更新渲染的更新数据，更新数据包括三维模型对应的第二角度或第二视场空间或元素数据对应的第二坐标和第二形态；按照更新数据，利用元素数据对三维模型进行更新渲染，得到更新目标三维模型；显示更新目标三维模型的预览画面。
14.在一些实施例中，元素数据包括n张连续帧静态元素图片，元素图片中包括对应的
元素图形，根据元素数据，对第一卡片的三维模型进行渲染，生成第一卡片的目标三维模型，包括：分别将n张连续帧静态元素图片的中心与n个角度对应的三维模型的平面中心对齐，n为大于1的整数；根据n张连续帧静态元素图片各自对应的元素图形，分别渲染第一卡片的三维模型的元素纹理，得到n个目标三维模型，n个目标三维模型分别对应n个角度；显示目标三维模型的预览画面，包括：获取第二输入，确定第三角度，第三角度为n个角度之一；响应于第二输入，显示对应第三角度的目标三维模型的预览画面。
15.在一些实施例中，在得到n个目标三维模型之后，方法包括：根据n个目标三维模型的预览画面中的第m个预览画面和第m+1个预览画面进行插值计算，得到u个插值画面；将u个插值画面插入第m个预览画面和第m+1个预览画面之间，得到n+u个目标预览画面。
16.在一些实施例中，在示目标三维模型的预览画面之后，方法包括：记录显示目标三维模型的预览画面的过程中的界面变化，生成第一记录视频。
17.在一些实施例中，在示目标三维模型的预览画面之后，方法包括：截取显示目标三维模型的预览画面的过程中的界面内容，生成第一记录图片。
18.在一些实施例中，元素数据包括第一元素图片和第二元素图片，第一元素图片中包括第一元素图形，第二元素图片中包括第二元素图形；根据元素数据，对第一卡片的三维模型进行渲染，生成第一卡片的目标三维模型，包括：根据第一元素图形，创建第一元素图形的图形三维模型；将第二元素图形渲染为第一卡片的三维模型的元素纹理，得到卡片三维模型；将图形三维模型叠加到第一卡片的三维模型的对应平面上，生成目标三维模型。
19.另一方面，本技术实施例提供了一种卡预览装置，装置包括：获取模块，用于获取元素数据；创建模块，用于在预设三维场景中创建第一卡片的三维模型；生成模块，用于根据元素数据，对第一卡片的三维模型进行渲染，生成第一卡片的目标三维模型；显示模块，用于显示目标三维模型。
20.再一方面，本技术实施例提供了一种电子设备，设备包括：处理器以及存储有计算机程序指令的存储器；处理器执行计算机程序指令时实现如第一方面中的卡预览方法中的步骤。
21.再一方面，本技术实施例提供了一种计算机存储介质，计算机存储介质上存储有计算机程序指令，计算机程序指令被处理器执行时实现如第一方面的卡预览方法中的步骤。
22.本技术实施例的卡预览方法、装置及电子设备，能够获取第一卡片的元素数据，并
在预设三维场景中创建第一卡片的三维模型，然后根据元素数据对第一卡片的三维模型进行渲染，生成第一卡片的目标三维模型；显示目标三维模型的预览画面，这样用户可以在绘制卡片时，预览到卡片的三维视觉效果，利于制作出满足用户需求的卡片，提高绘制效率。
附图说明
23.为了更清楚地说明本技术实施例的技术方案，下面将对本技术实施例中所需要使用的附图作简单的介绍，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
24.图1是本技术一个实施例提供的卡预览方法的流程示意图；图2是本技术一个示例中，元素图片与第一卡片叠加的尺寸关系示意图；图3是本技术另一个实施例中，元素图片与异型卡叠加的尺寸关系示意图；图4为本技术一个具体示例中，视椎体的结构示意图；图5为本技术另一个具体示例中，动态更新显示目标三维模型预览画面的示意图；图6是本技术另一个实施例提供的卡预览装置的结构示意图；图7是本技术又一个实施例提供的电子设备的结构示意图。
具体实施方式
25.下面将详细描述本技术的各个方面的特征和示例性实施例，为了使本技术的目的、技术方案及优点更加清楚明白，以下结合附图及具体实施例，对本技术进行进一步详细描述。应理解，此处所描述的具体实施例仅意在解释本技术，而不是限定本技术。对于本领域技术人员来说，本技术可以在不需要这些具体细节中的一些细节的情况下实施。下面对实施例的描述仅仅是为了通过示出本技术的示例来提供对本技术更好的理解。
26.需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括
……”
限定的要素，并不排除在包括要素的过程、方法、物品或者设备中还存在另外的相同要素。
27.现有技术中通过卡片制作系统制作智能卡等卡片时，通常由用户上传卡片正面的封面图片至该卡片制作系统中，生成卡片正面的二维图像供用户预览，用户确认后生成对应的卡片生产数据，供后续生产系统生产出相应的卡片。
28.由于现有的卡片制作系统无法预览到卡片的其他角度的画面，导致用户因为不能直观了解卡片其他部分的绘制效果，从而即使绘制效果差也无法及时了解或改正，从而生产出的卡片外观往往无法达到用户预期的效果。
29.为了解决现有技术问题，本技术实施例提供了一种卡预览方法、装置、设备及计算机存储介质。下面首先对本技术实施例所提供的卡预览方法进行介绍。
30.图1示出了本技术一个实施例提供的卡预览方法的流程示意图。如图1所示，该方法包括步骤s101~s104：
s101.获取元素数据。
31.元素数据为用于后续渲染第一卡片上的元素纹理的数据。
32.示例性的，元素数据可以是元素图片，元素图片上包含对应的元素图形。
33.示例性的，元素图片可以是用户上传的图片，也可以是在预设的元素数据库中匹配得到的图片，本技术实施例不做限定。
34.示例性的，第一卡片可以为ic卡（integrated circuit card，集成电路卡）、id卡（identification card，身份识别卡）、或者cpu卡等智能卡。
35.第一卡片上可以包含标志（logo）、芯片、卡组织、正面封面、背面封面、文字等卡面元素，还可以包括呈现反光效果的光效元素。所以本技术实施例中，获取的元素数据可以包括以下一类或多类：标志元素数据、颜色元素数据、元件元素数据、卡组织元素数据、封面元素数据（包括正封面元素数据和背封面元素数据）、文字元素数据、材质数据和光效数据。
36.其中元件元素数据用于渲染智能卡上的元器件纹理，如ic卡的芯片元件，或者具有显示器件的智能卡上的显示器件纹理。
37.元素数据还可以包括用于确定第一卡片形状和尺寸的卡体外形数据。
38.s102.在预设三维场景中创建第一卡片的三维模型。
39.在预设的三维场景中创建的第一卡片的三维模型为未渲染之前的模型，可以是预设尺寸的三维模型，也可以是根据第一卡片自定义的尺寸创建的三维模型。
40.s103.根据元素数据，对第一卡片的三维模型进行渲染，生成第一卡片的目标三维模型。
41.通过元素数据对第一卡片的三维模型进行渲染时，可以是将元素数据对应的元素图片中的内容渲染为第一卡片三维模型的纹理，生成渲染后的第一卡片的目标三维模型。
42.示例性的，元素图片为一张时，可以将该图片中的内容渲染为第一卡片三维模型的纹理；示例性的，元素图片包括多张时，按照元素图片对应的元素类型，按照次序叠加，叠加次序需尽量保证每个元素图片上的元素图形不被遮挡（作为底图纹理的元素图片除外），然后将叠加后的所有元素图片，渲染为第一卡片三维模型的纹理。
43.s104.显示目标三维模型的预览画面。
44.本技术实施例的卡预览方法，能够获取第一卡片的元素数据，并在预设三维场景中创建第一卡片的三维模型，然后根据元素数据对第一卡片的三维模型进行渲染，生成第一卡片的目标三维模型；显示目标三维模型的预览画面，这样用户可以在绘制卡片时，预览到卡片的三维视觉效果，利于制作出满足用户需求的卡片，提高绘制效率。
45.为了方便用户记录或展示预览画面，可选的，本技术实施例在执行步骤s101~s104之后，还可以包括步骤s105或步骤s106：s105.记录显示目标三维模型的预览画面的过程中的界面变化，生成第一记录视频；或者s106.截取显示目标三维模型的预览画面的过程中的界面内容，生成第一记录图片。
46.其中，第一记录视频中记录在对第一卡片的目标三维模型或更新目标三维模型的
预览过程中的界面上的内容变化，界面内容变化一般可以包括目标三维模型的预览画面和鼠标指针等内容的变化，方便用户记录预览过程或者向其他用户展示再现该预览过程。
47.第一记录图片可以是多张截图拼接而成的图片，在显示目标三维模型或更新目标三维模型的预览画面的过程中，可以定时截取或根据用户需求截取界面内容，得到一张或多张界面内容的截图，多张界面内容的截图时，对多张界面内容的截图按照预览的时间顺序进行拼接，得到第一记录图片，方便用户记录预览过程或者向其他用户展示再现该预览过程。
48.为丰富卡片制作的素材，可选的，在通过步骤s101获取卡片元素对应的元素数据之前，方法还可以包括步骤s107~s108：s107.构建元素图库。
49.图库可以包括标志图库、文字内容图库、元件图库以及自定义图库等对应各卡片元素的图库。各图库中的各图片具有对应图片中的元素的属性信息，属性信息包括元素类型以及名称和存储位置。
50.s108.获取卡片信息，根据卡片信息从图库中选取对应的元素数据。
51.制作卡片时，可以通过信息填写界面获取用户输入的卡片信息，卡片信息例如可以包括定制方名称、卡片形状、尺寸、包含的元素，也可以包括元素的图片，这样可以根据卡片信息从元素中进行匹配，选取对应的元素数据。例如卡片信息包括xx银行名称，则可以依据该名称信息从图库匹配对应的logo图片、芯片元件图片、文字内容图片以及封面图片等。
52.在其他示例中，用户也可以直接从图库中挑选元素图片。
53.为了满足用户的个性化卡片制作需求，可选的，本技术实施例中，通过步骤s101获取元素数据中，可以包括获取卡体外形数据和不同元素对应的元素图片。
54.示例性的，步骤s101具体可以包括步骤s10101~s10106：s10101.获取卡体外形数据。
55.该卡体外形数据包括形状和尺寸数据，卡片形状可以为矩形、圆形或其他异型的形状，尺寸数据可以用于描述卡片形状的大小。
56.示例性的，卡片形状和尺寸数据可以通过数据自定义界面的选项卡控件选择，例如选择制作银行卡，则对应调用标准银行卡的形状和尺寸数据，标准银行卡的卡体形状为矩形，卡面尺寸为1051*661像素单位。
57.示例性的，卡片形状和尺寸数据也可以通过图形绘制得到，通过图形绘制界面上的图形工具（如点、直线、圆弧和自由曲线等计算机可以公式输入的矢量二维图形）进行卡片图形的自由绘制，绘制图形的对应参数确定为卡片形状和尺寸数据。本示例中，如果绘制的图形为异型，则卡片形状和尺寸数据还包括该异型的图形外围边界盒（bounding box）尺寸。
58.根据自定义或手动绘制得到卡片形状和尺寸数据，可以确定第一卡片的平面图形。
59.步骤s10102.获取第一元素数据，第一元素可以用于生成第一卡片的logo和/或元件图形。
60.由于第一卡片的元素可以包括logo（logotype，标志）、元件（下文以芯片为例）、封面、文字等，对应的元素数据可以包括logo元素图片、芯片元件元素图片、正面封面图片、文
字内容图片等，其中，文字内容图片是指以图片为载体呈现的文字元素。各类元素的元素图片按照在卡体上的位置或预设的叠加顺序，渲染到三维模型上。
61.为方便图片的标准化制作，并保障各类元素图片上的图形不被遮挡，可选的，各元素数据中的图片可以具有统一的尺寸，图片中包含对应的元素图形且除元素图形之外的区域均为透明状。如某银行卡卡体为矩形，尺寸为1051*661像素，则获取的logo元素图片尺寸为1051*661像素，该logo图片中包括银行logo图形，logo元素图片上除该银行logo图像之外的其他图片区域均为透明的；获取的芯片元件图片的尺寸也为1051*661像素，且芯片元件图片中除金色芯片元件的元素图形之外的区域均为透明状；则将logo元素图片和芯片元件元素图片直接按尺寸完全重叠后（logo图形位置和芯片图形位置不重合），可以呈现卡片的logo和芯片元件图像，以用于制作卡片表面。
62.示例性的，各元素图片也可以为所包括的元素图形的大小，其他透明或空白的背景区域很少，如某银行卡的logo元素图片为该银行标准logo图形的尺寸；各元素图片分别根据在第一卡片上的预设相对位置组合后，渲染到第一卡片的三维模型上。
63.示例性的，各元素图片的格式可以为png格式，也可以为bmp、jpg、jpeg、heic、icon、gif等格式，其中gif格式的图片可以截取为一张或多张连续帧静态图片。
64.s10103.获取第二元素数据，第二元素数据可以用于渲染第一卡片的背面封面。
65.以银行卡为例，背面封面通常包括磁条图形、银行说明文字、卡片说明等文字内容，因此可以将这些磁条图形和文字形成背面封面元素图片，也可以根据磁条图形单独形成背面封面元素图片，文字内容单独形成文字内容元素图片。
66.可选的，文字内容也可以通过输入文字，系统自动或根据用户选择字体生成文字对应的png图片。
67.s10104.获取第三元素数据，第三元素数据可以用于渲染第一卡片的自定义图案。
68.第三元素数据可以是用户从数据库中的贴纸（例如卡通图案等）图库选取，渲染出具有个性化的卡片图案。
69.s10105.获取第四元素数据，第四元素数据可以用于渲染第一卡片的正面封面。
70.第四元素数据可以是用户从电子设备端上传的图片，检测该上传的图片尺寸是否在预设范围内；如果小于预设范围，则提醒用户更换。
71.如果大于，则可以根据确定的第一卡片的卡体外形数据进行裁剪。
72.例如对于银行标准卡对上传的图片进行裁剪，如图2所示，正面封面元素图片201上传后，后续可以叠加到第一卡片202的正面，为了保证图片尺寸的一致性，裁剪时可以按照图片的几何中心与标准卡几何中心对齐，剪掉多余部分；或者将图片的一个顶点对准标准卡的相应顶点，剪掉多余部分；或者通过ai（人工智能）识别出图片中的主要对象核心部位，通过学习获知大部分图片核心部位所处的区域，将识别出的核心部位置于标准卡对应区域内。
73.应理解，上述各元素数据根据其类型，具有关联第一卡片的位置对应关系，例如logo元素数据、芯片元件元素关联在卡体正面、磁条元件元素关联在卡体背面等。
74.对于异型卡，如图3所示，可以将上传的图片301的中心与卡片外形数据确定的边界盒302的几何中心（也可以为异型卡某个顶点）对齐，裁剪多余部分，然后将裁剪后的图片
与卡片外形数据确定的卡体矢量图形303叠加，卡体矢量图形303之外的区域304设置为透明状。
75.s10106.获取第五元素数据，第五元素数据可以用于渲染第一卡片的材质或光效元素。
76.第五元素数据对应的材质图片或光效图片可以从数据库选取。例如包括一种或多种针对上述各类元素图形的金属、塑料等常用材质的材质纹理图片，以及针对各类元素的反光效果的光效图片，其中材质图片可以主要用于对卡正面封面进行渲染，光效图片可以主要用于对芯片元素图形进行渲染。
77.为了保障对第一卡片有效渲染，可选的，本技术实施例在通过步骤s101获取元素数据后，可以通过预设的三维场景确定第一卡片的三维模型，因此步骤s102在预设三维场景中创建第一卡片的三维模型，具体可以包括s10201~s10202：s10201.在预设三维场景中的视场空间内，根据卡体外形数据，生成第一卡片的卡体平面图形，其中，视场空间为预设三维场景中预设观察点对应的坐标、视场角度以及视场比例确定的视锥体空间，卡体平面图形的中心与观察点对应的坐标关联。
78.在预设三维场景中，设置前景摄像机（即观察点），该观察点的设置可以通过以下基本信息确定：坐标：观察点与第一卡片正面中心关联，第一卡片通过上述卡体外形数据确定，以第一卡片的中心确定坐标原点，该卡片长边确定x轴，宽边确定y轴，厚度确定z轴，建立坐标系；其中，观察点位于z轴上，如图4中（4a）的视场空间平面视图所示，观察点在z轴的坐标为a。
79.视野角度：表示视场，即该视野角度用于确定在预设三维场景中能够被预览到的范围，它的值是角度单位，通过α表示。
80.视野比例：表示观察点视锥体长宽比，用于确定三维模型渲染结果的横向尺寸和纵向尺寸的比值；默认长宽比为1，即表示预览到的视野是正方形，可选的，视野比例等于或接近于卡片长宽比。
81.如图4中（4b）的三维视图所示，观察点401的视野角度属性确定了横向视场。基于视野比例属性，确定了纵向视场，观察点401坐标、视野角度和视野比例确定的视椎体空间402中，通过近截面403和远截面404确定可视化区域的前后边界，即两者之间的元素才可能被渲染，当模型某些部分比远截面远或者比近截面近的时候，该部分将不会被渲染到场景中。
82.示例性的，确定视锥体空间时可以通过以下方式：如图4中（4a）所示，设第一卡片202的中心位于坐标原点，观察点401位于z轴上，坐标为a；视野角度为α；视野比例默认为1；其中，第一卡片在近截面403与远截面404之间，且观察点401、第一卡片202的中心、近截面403中心以及远截面404中心依次对齐分布在z轴上。
83.令近截面403与观察点401之间的距离为b，远截面404与观察点401之间的距离为c，c>b>a；近截面403中心在z轴的坐标为a
‑
b，远截面404中心在z轴的坐标为a
‑
c；第一卡片202的卡体尺寸为：长*宽*高=l*w*t；为保证第一卡片202的卡体在旋转、翻转、移动过程中，全程均在视野范围内，各参
数需要同时满足以下条件：tan*b>；a
‑
b>；c
‑
a> ；c
‑
b>。
84.对于异型卡，设异型卡的几何中心到其面上所有点最远的距离为x，则同样需要满足以上公式，仅将式中 替换为x。
85.确定预设三维场景中的视椎体空间范围，根据获取的卡体外形数据确定第一卡片的卡体平面图形，并且令该卡体平面图形的中心与观察点对应的坐标关联，关联后卡体平面图形的中心可以与观察点保持固定的相对距离，以使后续构建得到的三维模型以中心进行旋转或翻转的过程中，都始终位于视椎体范围内。
86.为了满足用户个性化的卡片绘制需求，可选的，可以在确定第一卡片的卡体平面图形后，可以基于卡体平面图形进行颜色渲染（即着色），颜色可以由用户选择也可以通过ai匹配。
87.其中，ai匹配颜色时，可以根据元素图片的主色调确定配色。例如ai识别获取的卡体正面封面图的为主色调为红色，则可以将其他面渲染为与主色调相匹配的色调；或者在材质图片确定为金属材质时，匹配与该材质匹配的光效；或者识别出卡体正面封面图片中为风景或人像，如果为人像则截取人像轮廓进行拉伸平铺等。
88.s10202.对卡体平面图形进行厚度拉伸，生成第一卡片的三维模型。
89.按照卡体平面图形进行厚度拉伸后，平面图形成为具有一定厚度的立体形状，作为三维模型。
90.如果在步骤s10202之前对卡体平面图形进行了着色，则生成的三维模型的各个面（包括正面、背面和四个侧面）可以具有相同的颜色。在一些示例中，也可以在生成三维模型后，根据用户输入对三维模型的某一个面或某几个面进行重新着色。
91.在包括多类元素数据时，也即元素数据至少包括第一元素数据和第二元素数据，第一元素数据为封面元素数据时，为保障各类元素数据能够有效渲染到第一卡片的三维模型上，可选的，本技术实施例通过步骤s101~s102得到第一卡片的三维模型后，步骤s103根据元素数据，对第一卡片的三维模型进行渲染，生成对应的目标三维模型，具体可以包括步骤s10301~s10302：s10301.将第一元素数据作为底图纹理，并将第二元素数据叠加在第一元素数据上层，形成第一渲染纹理数据；s10302.将第一渲染纹理数据，渲染为第一卡片的三维模型对应平面的元素纹理，得到目标三维模型。
92.获取的元素数据中，至少包括封面元素数据（即第一元素数据），还包括第二元素数据，第二元素数据可以是logo元素数据、元件元素数据、文字元素数据、材质数据或光效
数据等的一种或多种。
93.则第一元素数据作为卡片正面或背面的底图纹理，第二元素数据根据预设的叠加层次关系或预设的位置关系叠加在第一元素数据上层，形成第一渲染纹理数据。预设的位置关系可以包括第二元素数据所在面和坐标，如在卡片正面且位于左上角的某一坐标处。
94.将第一渲染纹理数据渲染为第一卡片三维模型对应平面的元素纹理，可以得到目标三维模型。
95.为了保证有多个元素数据的情况下，可以呈现较好的渲染效果，可选的，本技术实施例中，如果获取的第一元素数据为封面元素数据、第二元素数据为元素图片，第二元素数据对应元素图片上的第一元素区域呈现对应的元素图形，该元素图片上除第一元素区域之外的区域为透明状。则本技术实施例中，步骤s10301具体可以包括s103011~s103012：s103011.将第二元素数据的中心与第一元素数据的中心对齐后叠加在第一元素数据上层，形成第一渲染纹理数据；以及s103012.将第一渲染纹理数据的中心与三维模型的对应平面的中心对齐。
96.由于元素数据可以包括多个元素图片，则可以根据正封面元素数据、logo元素数据、卡组织元素数据、芯片元件元素数据、背封面元素数据、文字内容元素数据以及光效数据和材质数据对应的图片，依次叠加后，对齐到三维模型对应的平面上。
97.例如，将获取的卡正封面对应的第一图片的中心点与其他元素图片的中心点对齐，其中第一图片作为正面底图，其他元素图片叠加在第一图片上层，其他元素图片的叠加也按照预设顺序叠加，如依次顺序为logo元素图片、卡组织元素图片、芯片元件元素图片以及材质图片等，保障叠加在第一图片上的各元素图片叠加后元素图形不互相遮挡。正面的所有元素图片叠加后，中心点与三维模型的正面平面中心点对齐，对各图片超出三维模型正面平面的多余部分进行裁剪，然后渲染为三维模型的正面纹理。同时如果有背面封面图片，则在将背封面对应的第二图片（作为背面底图）的中心点与磁条元件元素图片、文字内容元素图片以及光效图片等依次叠加，叠加后的所有元素图片中心点与三维模型的背面平面中心点对齐，多余的部分进行裁剪，然后渲染为三维模型的背面。
98.应理解，各元素图片依次叠加时，为了保证图片中元素图形的有效显露，需要按照预设的顺序叠加，图片叠加时如果大于第一卡片的卡体外形数据确定的形状和尺寸，则进行裁剪。
99.将各元素图形渲染为第一卡片的三维模型的元素纹理，可以得到目标三维模型，然后可以通过步骤s104将该目标三维模型显示在页面上。
100.在一些实施例中，为了保证有多个元素数据的情况下，可以呈现较好的渲染效果，可选的，如果元素数据包括第一元素数据和第二元素数据，第一元素数据为封面元素数据，第二元素数据为元素图片，该元素图片中包括元素图形且元素图片中的元素图形在当前图片中占用的区域超过预设区域阈值的范围，即元素图片中元素图形占用了该图片较大面积，背景区域（即元素图形之外的透明区域或空白区域）较小，这种情况下，为保证各元素的有效显露，元素图片可以根据预先设定的坐标位置叠加到底图上，然后再对齐到三维模型对应的平面上进行渲染。具体的，本技术实施例中，步骤s10301中将第一元素数据作为底图纹理，并将第二元素数据叠加在第一元素数据上层，形成第一渲染纹理数据，具体可以包括s103013~s103014：
s103013.将第一元素数据作为底图纹理，将第二元素数据按照预设的坐标位置叠加在第一元素数据上层，形成第一渲染纹理数据；以及s103014.以第一元素数据的中心为第一渲染纹理数据的中心，将中心与三维模型的对应平面的中心对齐。
101.上述预设的坐标位置可以是预设的元素数据与三维模型平面的关联关系，如logo元素对应三维模型的正面左上角，芯片元件元素对应三维模型的正面左侧边中部。
102.可选的，以元素数据中作为底图的元素图片（正封面图片或背封面图片）为基础，其他元素图片按照预设的位置关系或手动拖动等方式，叠加在底图元素图片上层，形成第一渲染纹理数据。
103.第一元素数据的中心为第一渲染纹理数据的中心，将该中心与三维模型的对应平面的中心对齐后，通过步骤s10302将叠加后的所有元素数据渲染到三维模型上，得到目标三维模型。
104.为了达到更加逼真的视觉效果，可选的，本实施例中，在步骤s10301形成第一渲染纹理数据之后，该方法中步骤s103还可以包括步骤s10303：s10303.根据预设环境光数据和第一渲染纹理数据，生成叠加预设环境光后的第一渲染纹理数据。
105.预设环境光可以包括针对三维模型的平行光源、点光源以及聚光灯光源。
106.预设环境光用于模拟光源照射在第一卡片上形成的反射效果，可以利于呈现出不同光效状态下的视觉画面。
107.对应的，通过步骤s10303得到叠加预设环境光后的第一渲染纹理数据后，执行步骤s10302将第一渲染纹理数据，渲染为第一卡片的三维模型对应平面的元素纹理，得到目标三维模型。具体的，本技术实施例中，该步骤s10302可以包括步骤s103021：s103021.将叠加预设环境光后的第一渲染纹理数据，渲染为第一卡片的三维模型对应平面的元素纹理，得到目标三维模型。
108.叠加环境光后，将第一渲染纹理数据渲染到三维模型的同时，叠加对应的环境光效，呈现出更加逼真的视觉画面。
109.由于渲染后的目标三维模型一般对应的是对卡片正面或背面（也即180
°
）的角度，因此为了能够使用户观察到其他角度的立体效果，可选的，本技术实施例中，元素数据可以包括第一元素图片，第一元素图片中包括第一元素图形；目标三维模型为对应第一角度的模型；则步骤s104显示目标三维模型的预览画面之后，该方法可以包括s109~s112：s109.根据目标三维模型，确定第一元素图形在目标三维模型对应平面第一角度的初始坐标和初始形态；s110.确定第一元素图形在目标三维模型对应平面第二角度的第二坐标和第二形态；s111.在预设更新时间，根据第一元素图形更新渲染三维模型，得到对应第二角度的更新目标三维模型，更新目标三维模型中对应第一元素图形的元素纹理位于平面的第二坐标处且被渲染为第二形态；s112.将目标三维模型的预览画面，动态更新显示为更新目标三维模型的预览画面。
110.本技术实施例中，在通过步骤s101~s104渲染出对应第一角度（如180
°
）的目标三维模型后，在预览界面上显示出该角度的预览画面，然后可以根据系统设定或用户输入，触发动态显示第一卡片其他角度的目标三维模型预览画面。
111.示例性的，动态显示可以为旋转、翻转或平移、跳跃等等。
112.可选的，本技术实施例中对三维模型渲染可以基于webgl（web graphics library，是一种3d绘图协议）技术进行渲染。则为了在web页面呈现上一帧预览画面到下一帧预览画面的动态显示，可以执行上述步骤s109~s112。其中，由于目标三维模型上的每个元素图形都具有自己在当前平面角度的初始坐标和初始形态，则为了呈现动态的显示效果，每个元素图形的坐标和形态可能都会随着显示角度的变化而变化。
113.以其中的第一元素图形为例，根据目标三维模型，可以确定第一元素图形在目标三维模型对应平面第一角度的初始坐标和初始形态；然后根据系统设定（如每秒旋转多少角度）或用户输入（如鼠标拖动某个角度），确定第一元素图形在目标三维模型对应平面第二角度的第二坐标和第二形态。然后在预设更新时间（如1s）内，再次根据第一元素图形重新渲染一次第一卡片的三维模型，得到对应第二角度的更新目标三维模型，显示在预览界面上，其中更新目标三维模型中对应第一元素图形的元素纹理位于平面的第二坐标处且被渲染为第二形态。
114.例如，参考图5所示，在获得logo元素图片501后，根据预设的关联关系将logo元素图片501中的logo元素图形渲染为目标三维模型502中正面平面的纹理，logo元素图片501中的logo元素图形在目标三维模型502正面平面为初始坐标和初始形态。触发目标三维模型旋转操作，即旋转到第二角度并显示下一帧预览画面，则利用logo元素图片501渲染第一卡片的三维模型得到更新三维模型502
′
。更新三维模型502
′
中的纹理为第二形态和第二坐标的更新logo元素图片501
′
，从视觉效果上而言，是在显示预览画面变化的过程中，logo元素图片501中的logo元素图形呈现出从初始坐标和初识形态到第二坐标和第二形态变化的动画。
115.可以理解，动态更新目标三维模型时，更新速度与上述预设更新时间相关，预设更新时间约短，即更新间隔越短，更新速度越快，目标三维模型的预览变化的越快。
116.在动态更新过程中，每一个元素图形从初始坐标变换到第二坐标以至于变换到最终坐标，该元素图形可以呈现出在某移动轨迹上以一定移动速率移动的效果，如1秒移动0.01mm。
117.应理解，如果包括多个元素数据或多张元素图片，则在由一帧预览画面动态显示为下一帧预览画面之前，所有的元素数据或元素图片都确定出各自在对应的平面的第二角度时的坐标和形态，然后重新渲染一次第一卡片的三维模型，得到重新渲染后的更新目标三维模型，并显示该模型的预览画面。
118.以此每要显示一个角度的预览画面就重新渲染一次三维模型，呈现第一卡片在不同角度或视角下的预览画面，进而形成某一角度范围（如180
°
~360
°
）内的动画效果，使用户看到第一卡片在不同角度下的三维视觉效果。
119.在另一个具体实施例中，为了使用户看到第一卡片在不同角度下的三维视觉效果，可以通过改变三维模型对应的视场空间，改变目标三维模型的预览角度。可选的，本技术实施例中，目标三维模型为对应第一视场空间的模型；则在步骤s104之后，方法可以包括
步骤s113~s114：s113.调整第一卡片的三维模型对应观察点的坐标、视场角度以及视场比例，得到第二视场空间；s114.显示第二视场空间内的目标三维模型的预览画面。
120.通过改变相对于三维模型的观察点和视场空间，改变观察目标三维模型的角度，从而呈现对应的预览画面。进而可以重复步骤s113~s114，动态显示各视角的目标三维模型的预览画面。
121.在另一些实施例中，为了方便用户自由灵活的查看通过步骤s101~s103得到的目标三维模型各个角度的预览画面，可选的，本技术实施例中步骤s104显示目标三维模型的预览画面，具体可以包括步骤s10401~s10402：s10401.接收用户的第一输入。
122.第一输入可以是点击输入、或者是用户输入的语音指令，或者是用户输入的特定手势或隔空手势，具体的可以根据实际使用需求确定，本实施例对此不做限定。
123.点击输入可以为单击输入、双击输入或任意次数的点击输入，还可以为长按输入或短按输入。特定手势可以是轻点手势、双轻点手势、滑动手势、拖动手势、缩放手势、转动手势中的任意一种。
124.s10402.响应于第一输入，动态更新显示目标三维模型对应角度的预览画面。
125.用户通过手指对屏幕的点击或滑动输入，或者鼠标控制的点击或拖动输入，旋转、翻转、移动目标三维模型或改变对应的视锥体空间，动态更新显示目标三维模型对应角度的预览画面。
126.在动态更新显示目标三维模型对应角度的预览画面过程中，通过第一输入，触发旋转、翻转、移动目标三维模型或改变对应的视锥体空间时，可以根据第一输入确定的更新数据，动态更新显示目标三维模型的预览画面。这样用户可以自由控制预览第一卡片渲染后的各个角度、视角的立体效果，方便用户确定渲染后的元素纹理是否符合预期要求，避免发送到生产系统后制作出不符合用户需求的卡片。
127.可选的，在根据用户输入动态显示目标三维模型的预览画面的过程中，步骤s10402具体可以包括步骤s104021~s104023：s104021.响应于第一输入，确定第一卡片的三维模型的更新渲染的更新数据。
128.更新数据可以包括三维模型对应的第二角度或第二视场空间或元素数据对应的第二坐标和第二形态。
129.由于使立体模型产生不同角度的预览画面可以是模型本身变化（如旋转、翻转）、也可以是观察点相对于立体模型的视锥体空间变化（如改变观察点的坐标、视野角度等）或者是立体模型上的元素数据的坐标和形态发生变化等。因此当接收到用户的第一输入（如鼠标拖动目标三维模型旋转的输入）后，响应于第一输入可以变换目标三维模型的角度、变换对应的视锥体空间或者变换三维模型上渲染的元素数据的坐标和形态，从而呈现出第一卡片的目标三维模型旋转、翻转、放大、缩小、平移等动画效果。
130.因此响应于第一输入，确定三维模型的第二角度、第二视场空间或对应元素数据的第二坐标和第二形态，即确定要预览的下一帧画面中目标三维模型的角度、视场空间和元素数据的坐标和形态。
131.s104022.按照更新数据，利用对应的元素数据对三维模型进行更新渲染，得到更新目标三维模型；s104023.显示更新目标三维模型的预览画面。
132.确定三维模型的第二角度、第二视场空间或元素数据的第二坐标和第二形态后，按照该更新数据，利用对应元素数据重新渲染第一卡片的三维模型，得到渲染后的更新目标三维模型，并显示对应的预览画面。
133.重复上述步骤可以继续渲染后续帧的预览画面，呈现第一卡片立体模型在不同角度、视角下的动画。
134.在一些实施例中，对于第一卡片为光栅卡的制作场景，除了卡体各元素的渲染外，还需使绘制的第一卡片在不同角度呈现出不同的画面。因此为了满足用户的多样化的卡片制作需求，可选的，步骤s101获取的元素数据中，元素数据可以包括一组连续帧静态元素图片，每帧元素图片上包括一类或多类元素图形。
135.示例性的，连续帧静态元素图片是指该组元素图片中的内容具有关联性，且连续帧静态元素图片具有固定的排列顺序，该组图片中的内容按照该顺序呈现出一定趋势的画面变化。
136.示例性的，一组连续帧静态元素图片可以由一张动态图截取得到。
137.获取元素数据后，可以通过步骤s102确定第一卡片的三维模型，并通过s103将连续帧静态元素图片分别渲染到三维模型中，呈现出光栅视觉效果。具体的，步骤s103可以包括步骤s10304~s10305：s10304.分别将n张连续帧静态元素图片的中心与n个角度对应的三维模型的平面中心对齐，n为大于1的整数。
138.将n张连续帧静态元素图片分别与对应的n个预设角度的三维模型平面中心对齐，例如一组连续帧静态元素图片为60幅，该组图片需要渲染为卡体正封面，则每隔3
°
夹角确定一个预设角度，按照预设角度的大小顺序对应设置上述具有固定顺序的连续帧静态元素图片。
139.s10305.根据n张连续帧静态元素图片各自对应的元素图形，分别渲染第一卡片的三维模型的元素纹理，得到n个目标三维模型，n个目标三维模型分别对应n个角度。
140.确定连续帧静态元素图片与预设角度的对应关系后，根据该对应关系分别渲染第一卡片的三维模型，得到n个角度的目标三维模型。
141.对应的，本实施例中，步骤s104可以包括步骤s10403~s10404：s10403.获取第二输入，确定第三角度，第三角度为n个角度之一；s10404.响应于第二输入，显示对应第三角度的目标三维模型的预览画面。
142.第二输入可以是点击输入、或者是用户输入的语音指令，或者是用户输入的特定手势或隔空手势，具体的可以根据实际使用需求确定，本实施例对此不做限定。
143.在得到n个角度的目标三维模型之后，根据用户第二输入确定要预览的第三角度，从而响应于第二输入，显示对应第三角度的目标三维模型的预览画面；通过变换显示的不同角度的预览画面，从视觉上形成画面动起来的光栅视觉效果。
144.在另一些实施例中，一般的，相邻图片之间的内容变化不会很大，背景基本相同，图片上的元素图形会有一定程度的角度和/或位置的变化，因此如果连续帧静态元素图片
数量较少，则可以通过插值计算出相邻预览画面之间的插值，得到介于该相邻预览画面的内容变化趋势之间的插值图片，并将插值图片插入相邻预览画面之间，从而提高预览画面变换的连贯性、流畅性。示例性的，在通过s10304~s10305得到n个目标三维模型之后，可以得到对应的n个目标三维模型的预览画面，则方法中的步骤s103还可以包括步骤s10306~s10307：s10306.根据n个目标三维模型的预览画面中的第m个预览画面和第m+1个预览画面进行插值计算，得到u个插值画面；以及s10307.将u个插值画面插入第m个预览画面和第m+1个预览画面之间，得到n+u个目标预览画面。其中m为正整数，m＜m+1小于n；u为正整数。
145.例如得到n个目标三维模型的预览画面中，对应的n个角度落在0
°
~180
°
之间，每个角度间隔30
°
，用户想预览0
°
向180
°
旋转的模型画面，为了增强画面显示的流畅性，在30
°
预览画面与60
°
预览画面之间进行插值计算，可以得到两张插值画面，如分别为对应40
°
的预览画面和对应50
°
的预览画面。则通过步骤s10306~s10307得到n+u个目标预览画面后，可以通过步骤s10403~s10404进行画面的预览展示。
146.例如在显示0
°
向180
°
旋转的模型画面过程中，显示到30
°
对应预览画面后，依次显示两张插值画面，再显示60
°
对应的预览画面，得到画面内容变化更连贯的预览动画，光栅显示效果更逼真。
147.应理解，上述各实施例中，用户预览后对元素数据渲染出的目标三维模型确认，则可以将元素数据和目标三维模型等一起封装为数据包，发送到后续的生产系统进行生产。
148.对于指纹卡、显示卡等可随外界环境变化或可根据外部输入进行显示变换的卡片，可选的，步骤s101中获取的元素数据可以包括对应的元件元素图片，例如制作指纹卡需获取指纹传感器元素图片，制作显示屏的卡体需获取显示屏元素图片等，这些元素图片的获取可以与其他诸如logo元素的元素图片相同。
149.进一步的，还可以根据实际卡体具有的温显元件、光显元件、显示屏数字变换等获取材质图片和光效图片。
150.为了得到更加逼真的预览效果，对于具有显示元件的卡片，可选的，在本技术实施例中，在通过步骤s101~s103渲染得到目标三维模型后，在步骤s104对该模型进行预览时，可以具体包括s10405~s10407：s10405.预设定时器或输入接口，定时器用于定时触发对应显示元件元素图片的变化，输入接口用于接收用户虚拟指令触发对应显示元件元素图片的变化；s10406.根据对应定时器或输入接口的触发指令，确定对应显示元件元素图片的元素图形；s10407.根据显示元件元素图片的元素图形，更新目标三维模型的预览画面。
151.其中，如果定时器设定每隔1s，某显示屏上的数字（即数字元素图形）变化一次，则根据定时器的设定，每隔1s重新渲染一次三维模型，得到新的目标三维模型进行显示。
152.同理，可以根据输入接口的触发指令动态更新目标三维模型的预览画面进行显示。
153.为了满足用户的多样化需求，得到具有凸起纹理的目标三维模型，可选的，如果元素数据包括第一元素图片和第二元素图片，第一元素图片中包括第一元素图形，第二元素
图片中包括第二元素图形，则可以基于元素数据生成具有凸起图文的3d卡体。本技术实施例中，步骤s103具体可以包括s10308~s10310：s10308.根据第一元素图形，创建第一元素图形的图形三维模型；s10309.将第二元素图形渲染为第一卡片的三维模型的元素纹理，得到卡片三维模型；s10310.将图形三维模型叠加到第一卡片三维模型的对应平面上，生成目标三维模型。
154.其中，根据第一元素图形创建的第一元素图形的图形三维模型，用于作为最终三维模型中的凸起图文，例如logo元素图片中的logo图形生成对应的图形三维模型，然后第二元素图形（如芯片、文字等元素图形、或者作为底图的封面元素图片的图形）按照次序叠加后渲染为第一卡片的三维模型的纹理，得到卡片三维模型。将图形三维模型叠加到卡片三维模型的对应平面上，生成表面具有凸起图文的目标三维模型。
155.在将该立体图形图片叠加到第一卡片的对应平面的对应位置时，保证立体图形图片的下表面与卡体的正表面重合，使二者成为一个整体，并在后续将目标三维模型的相关数据向生产系统传送时，一起传送对应3d打印层的矢量数据以打印出对应的3d图文，满足用户的多样化卡片绘制需求。
156.图6示出的是申请实施例提供的一种卡预览装置的结构示意图。如图6所示，该装置包括：获取模块601，用于获取元素数据；创建模块602，用于在预设三维场景中创建第一卡片的三维模型；生成模块603，用于根据元素数据，对第一卡片的三维模型进行渲染，生成第一卡片的目标三维模型；显示模块604，用于显示目标三维模型的预览画面。
157.示例性的，获取模块601可以执行上述图1中示出的步骤s101，创建模块602可以执行上述图1中示出的步骤s102，生成模块603可以执行上述图1中示出的步骤s103，显示模块604可以执行上述图1中示出的步骤s104。
158.需要说明的是，上述方法实施例涉及的各步骤的所有相关内容均可以援引到对应功能模块的功能描述，并能达到其相应的技术效果，为简洁描述，在此不再赘述。
159.可选的，在一些实施例中，装置可以包括：第一记录模块605，用于在显示目标三维模型的预览画面之后，记录显示目标三维模型的预览画面的过程中的界面变化，生成第一记录视频。
160.可选的，装置可以包括：第二记录模块606，用于在显示目标三维模型的预览画面之后，截取显示目标三维模型的预览画面的过程中的界面内容，生成第一记录图片。
161.可选的，元素数据包括第一卡片的卡体外形数据；创建模块602可以包括：第一生成子模块60201，用于在预设三维场景中的视场空间内，根据卡体外形数据，生成第一卡片的卡体平面图形，其中，视场空间为预设三维场景中预设观察点对应的坐标、视场角度以及视场比例确定的视锥体空间，卡体平面图形的中心与观察点对应的坐标关联；
第二生成子模块60202，用于对卡体平面图形进行厚度拉伸，生成第一卡片的三维模型。
162.可选的，上述元素数据包括以下一类或多类：标志元素数据、元件元素数据、封面元素数据、文字元素数据、材质数据和光效数据。
163.可选的，元素数据包括第一元素数据和第二元素数据，第一元素数据为封面元素数据；生成模块603可以包括：第一叠加子模块60301，用于将第一元素数据作为底图纹理，并将第二元素数据叠加在第一元素数据上层，形成第一渲染纹理数据；第一渲染子模块60302，用于将第一渲染纹理数据，渲染为第一卡片的三维模型对应平面的元素纹理，得到目标三维模型。
164.可选的，在一些实施例中，元素数据包括第一元素数据和第二元素数据，第一元素数据为封面元素数据，第二元素数据为元素图片，第二元素数据对应元素图片上的第一元素区域呈现对应的元素图形，且元素图片上除第一元素区域之外的区域为透明状；第一叠加子模块60301可以包括：第一叠加孙模块603011，用于将第二元素数据的中心与第一元素数据的中心对齐后叠加在第一元素数据上层，形成第一渲染纹理数据；以及第一对齐孙模块603012，用于将第一渲染纹理数据的中心与三维模型的对应平面的中心对齐。
165.可选的，在一些实施例中，元素数据包括第一元素数据和第二元素数据，第一元素数据为封面元素数据，第二元素数据为元素图片，元素图片中包括元素图形，第一叠加子模块60301具体可以包括：第二叠加孙模块603013，用于将第一元素数据作为底图纹理，将第二元素数据按照预设的坐标位置叠加在第一元素数据上层，形成第一渲染纹理数据；以及第二对齐孙模块603014，用于以第一元素数据的中心为第一渲染纹理数据的中心，将中心与三维模型的对应平面的中心对齐。
166.可选的，装置中的生成模块603还可以包括：第三生成子模块60303，用于在形成第一渲染纹理数据之后，根据预设环境光数据和第一渲染纹理数据，生成叠加预设环境光后的第一渲染纹理数据；对应的，第一渲染子模块60302具体可以用于：将叠加预设环境光后的第一渲染纹理数据，渲染为第一卡片的三维模型对应平面的元素纹理，得到目标三维模型。
167.可选的，在一些实施例中，元素数据包括第一元素图片，第一元素图片中包括第一元素图形；目标三维模型为对应第一角度的模型；在显示目标三维模型的预览画面之后，装置还可以包括：第一确定模块609，用于根据目标三维模型，确定第一元素图形在目标三维模型对应平面第一角度的初始坐标和初始形态；第二确定模块610，用于确定第一元素图形在目标三维模型对应平面第二角度的第二坐标和第二形态；第一更新模块611，用于在预设更新时间，根据第一元素图形更新渲染三维模型，
得到对应第二角度的更新目标三维模型，更新目标三维模型中对应第一元素图形的元素纹理位于平面的第二坐标处且被渲染为第二形态；第一动态显示模块612，用于将目标三维模型的预览画面，动态更新显示为更新目标三维模型的预览画面。
168.可选的，在一些实施例中，目标三维模型为对应第一视场空间的模型；在显示目标三维模型的预览画面之后，装置可以包括：调整模块613，用于调整第一卡片的三维模型对应观察点的坐标、视场角度以及视场比例，得到第二视场空间；第二显示模块614，用于显示第二视场空间内的目标三维模型的预览画面。
169.可选的，在一些实施例中，显示模块604具体可以包括：第一接收子模块60401，用于接收用户的第一输入，第一动态更新子模块60402，用于响应于第一输入，动态更新显示目标三维模型对应角度的预览画面。
170.可选的，在一些实施例中，目标三维模型为对应第一角度的模型；第一动态更新子模块60402可以包括：第一确定孙模块604021，用于响应于第一输入，确定第一卡片的三维模型的更新渲染的更新数据，更新数据包括三维模型对应的第二角度或第二视场空间或元素数据对应的第二坐标和第二形态；第一渲染孙模块604022，用于按照更新数据，利用元素数据对三维模型进行更新渲染，得到更新目标三维模型；第一显示孙模块604023，用于显示更新目标三维模型的预览画面。
171.可选的，在一些实施例中，元素数据包括n张连续帧静态元素图片，元素图片中包括对应的元素图形，生成模块603可以包括：第三对齐子模块60304，用于分别将n张连续帧静态元素图片的中心与n个角度对应的三维模型的平面中心对齐，n为大于1的整数；第四渲染子模块60305，用于根据n张连续帧静态元素图片各自对应的元素图形，分别渲染第一卡片的三维模型的元素纹理，得到n个目标三维模型，n个目标三维模型分别对应n个角度；对应的，显示模块604具体可以包括：第二获取子模块60403，用于获取第二输入，确定第三角度，第三角度为n个角度之一；第三显示子模块60404，用于响应于第二输入，显示对应第三角度的目标三维模型的预览画面。
172.可选的，在一些实施例中，装置中的生成模块603可以包括：计算模块60306，用于在得到n个目标三维模型之后，根据n个目标三维模型的预览画面中的第m个预览画面和第m+1个预览画面进行插值计算，得到u个插值画面；插入模块60307，用于将u个插值画面插入第m个预览画面和第m+1个预览画面之间，得到n+u个目标预览画面。
173.可选的，在一些实施例中，元素数据包括第一元素图片和第二元素图片，第一元素
图片中包括第一元素图形，第二元素图片中包括第二元素图形，生成模块603可以包括：创建子模块60308，用于根据第一元素图形，创建第一元素图形的图形三维模型；第五渲染子模块60309，用于将第二元素图形渲染为第一卡片的三维模型的元素纹理，得到卡片三维模型；第三叠加子模块60310，用于将图形三维模型叠加到第一卡片的三维模型的对应平面上，生成目标三维模型。
174.图7示出了本技术实施例提供的电子设备的硬件结构示意图。
175.该电子设备可以包括处理器701以及存储有计算机程序指令的存储器702。
176.具体地，上述处理器701可以包括中央处理器（cpu），或者特定集成电路（application specific integrated circuit ，asic），或者可以被配置成实施本技术实施例的一个或多个集成电路。
177.存储器702可以包括用于数据或指令的大容量存储器。举例来说而非限制，存储器702可包括硬盘驱动器（hard disk drive，hdd）、软盘驱动器、闪存、光盘、磁光盘、磁带或通用串行总线（universal serial bus，usb）驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器702可包括可移除或不可移除(或固定)的介质。在合适的情况下，存储器702可在综合网关容灾设备的内部或外部。在特定实施例中，存储器702是非易失性固态存储器。
178.存储器可包括只读存储器（rom），随机存取存储器（ram），磁盘存储介质设备，光存储介质设备，闪存设备，电气、光学或其他物理/有形的存储器存储设备。因此，通常，存储器包括一个或多个编码有包括计算机可执行指令的软件的有形（非暂态）计算机可读存储介质（例如，存储器设备），并且当该软件被执行（例如，由一个或多个处理器）时，其可操作来执行参考根据本技术的一方面的方法所描述的操作。
179.处理器701通过读取并执行存储器702中存储的计算机程序指令，以实现上述实施例中的任意一种卡预览方法。
180.在一个示例中，电子上设备还可包括通信接口703和总线710。其中，如图7所示，处理器701、存储器702、通信接口703通过总线710连接并完成相互间的通信。
181.通信接口703，主要用于实现本技术实施例中各模块、装置、单元和/或设备之间的通信。
182.总线710包括硬件、软件或两者，将该电子设备的部件彼此耦接在一起。举例来说而非限制，总线可包括加速图形端口（agp）或其他图形总线、增强工业标准架构（eisa）总线、前端总线（fsb）、超传输（ht）互连、工业标准架构（isa）总线、无限带宽互连、低引脚数（lpc）总线、存储器总线、微信道架构（mca）总线、外围组件互连（pci）总线、pci
‑
express（pci
‑
x）总线、串行高级技术附件（sata）总线、视频电子标准协会局部（vlb）总线或其他合适的总线或者两个或更多个以上这些的组合。在合适的情况下，总线710可包括一个或多个总线。尽管本技术实施例描述和示出了特定的总线，但本技术考虑任何合适的总线或互连。
183.另外，结合上述实施例中的卡预览方法，本技术实施例可提供一种计算机存储介质来实现。该计算机存储介质上存储有计算机程序指令；该计算机程序指令被处理器执行时实现上述实施例中的任意一种卡预览方法。
184.需要明确的是，本技术并不局限于上文所描述并在图中示出的特定配置和处理。
为了简明起见，这里省略了对已知方法的详细描述。在上述实施例中，描述和示出了若干具体的步骤作为示例。但是，本技术的方法过程并不限于所描述和示出的具体步骤，本领域的技术人员可以在领会本技术的精神后，作出各种改变、修改和添加，或者改变步骤之间的顺序。
185.以上的结构框图中所示的功能模块可以实现为硬件、软件、固件或者它们的组合。当以硬件方式实现时，其可以例如是电子电路、专用集成电路（asic）、适当的固件、插件、功能卡等等。当以软件方式实现时，本技术的元素是被用于执行所需任务的程序或者代码段。程序或者代码段可以存储在机器可读介质中，或者通过载波中携带的数据信号在传输介质或者通信链路上传送。“机器可读介质”可以包括能够存储或传输信息的任何介质。机器可读介质的例子包括电子电路、半导体存储器设备、rom、闪存、可擦除rom（erom）、软盘、cd
‑
rom、光盘、硬盘、光纤介质、射频（rf）链路，等等。代码段可以经由诸如因特网、内联网等的计算机网络被下载。
186.还需要说明的是，本技术中提及的示例性实施例，基于一系列的步骤或者装置描述一些方法或系统。但是，本技术不局限于上述步骤的顺序，也就是说，可以按照实施例中提及的顺序执行步骤，也可以不同于实施例中的顺序，或者若干步骤同时执行。
187.上面参考根据本技术的实施例的方法、装置（系统）和计算机程序产品的流程图和/或框图描述了本技术的各方面。应当理解，流程图和/或框图中的每个方框以及流程图和/或框图中各方框的组合可以由计算机程序指令实现。这些计算机程序指令可被提供给通用计算机、专用计算机、或其它可编程数据处理装置的处理器，以产生一种机器，使得经由计算机或其它可编程数据处理装置的处理器执行的这些指令使能对流程图和/或框图的一个或多个方框中指定的功能/动作的实现。这种处理器可以是但不限于是通用处理器、专用处理器、特殊应用处理器或者现场可编程逻辑电路。还可理解，框图和/或流程图中的每个方框以及框图和/或流程图中的方框的组合，也可以由执行指定的功能或动作的专用硬件来实现，或可由专用硬件和计算机指令的组合来实现。
188.以上，仅为本技术的具体实施方式，所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的系统、模块和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。应理解，本技术的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本技术揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本技术的保护范围之内。