随着消费的升级，产品3D显示具有巨大的应用空间。3D显示，为消费者优化体验;对于商品，增强展示效果;对商家而言，线上线下场景展示有效整合。

本教程是一个有趣的原理操作-交互式3D演示。我将简要分析几种常见的在线应用的3D显示实现方法，然后带领大家使用Principle制作一个简单的3D显示案例。

粤秀教育：一个年轻人都爱的自学设计平台。软件入门、设计教学、软件下载，尽在粤秀教育~

Principle制作可交互的物品3D展示的操作步骤：

一、准备工作

关于软件:首先，本教程只是对3D演示案例的思路和操作进行总结。Principle的一些基本操作在本文中可能不会详细说明，所以读者需要有一定的软件基础。

软件版本5.3原理其实并不重要，但建议您尽量使用英文版本，很多第三方版本的中文版本或多或少都有一些不可控制的、怪异的bug。此外，Principle是一个轻量级的软件，复杂的功能很少，习惯使用英文版本后，操作上没有太大的障碍。

关于素材:案例需要使用30多个序列图，从StockX网站的产品详情页面，如何在网站上快速获取相应的产品序列图?

通过这个Gif演示，你可以得到一个主序列地图的url链接，可能有合作伙伴会问，为什么不直接下载这个地图，不用担心，请继续看~

转到前一步复制的链接，你可以得到一个大的高清图片的鞋子。同时，请注意图片中红色圆圈标示的位置。如果你改变这里的值，你可以直接加载相应的序列图片

我们现在有36张图片(我会附上它们，这样你就不用手动下载了)，但它们有点太大了，长宽比也不太对。因此我们对图像进行了两次处理，最终输出了600*600px的序列图。在改变尺寸时，不要改变每个图像的相对位置，以免造成最终效果的错位和破损。

然后，所有的图像都完成了，我简化了命名以便对剩下的操作更直观。

二、创建一个新的绘图板

打开Principle，设置Size preset(考虑到未来手机的实际操作，此处选择我手机预设的Size。)在手机预览中使用其他尺寸时，屏幕不会满)，朋友可以根据自己的实际情况进行设置。

三、放置图片

将完成的图片拖到画板上。之前的图像被处理为600*600px，以便在手机上预览或生成@2x视频时更清晰。现在在414pt逻辑尺寸绘图板上制作时，需要将图像的Width和Height调整为300*300。

图像层从上到下的初始顺序是36-01，需要颠倒，01在上面，以此类推。

提示:Shift +?+[或Shift +?+]移动到底部或顶部。

四、入场动画

在动画的第一阶段，鞋子从屏幕上方移动到中间。图像被放大到414，覆盖了屏幕的宽度，并旋转到前面的角度。

复制画板2。在第二个画板上，我们将图像放大到414，并向下移动了合适的距离。

由于第一阶段的动画需要鞋子旋转到前面的角度(图10)，所以将Artboard2图片01-09的不透明度调整为0%，如图10所示。并将“咨询手势”添加到画板1的01图，以连接到画板2

默认动画长度为0.3s。我们可以将其延长一点，首先将所有图像变化特性的时间轴延长到0.6s，以便更好地观察鞋旋转和位移的变化。

由于鞋子的旋转需要01到09的9张图片连续出现，形成假旋转的感觉，所以使用不透明度从100%到0%的变化，时间分别为0s到0.02s。0.02s至0.04s;0.04s到0.06s…等等，把它们连接起来。(注:理论上每张图像的透明度变化时间应为0.6/9≈0.07s)

但是，如果不透明度的变化时间长了，在两幅图片变化的过程中，肉眼很容易观察到双重阴影或间隙，从而导致滑动。因此，最后的决定是让不透明度改变的更快，选择0.02s。

其实时间是0.07s，把不同属性的贝塞尔曲线调整为(0,1,0,1)也可以避免磨损的问题，哈哈哈哈哈哈，但是我懒得调整，不好意思。

好的，现在你可以体验动画的第一阶段了，如上所示。播放几次，感受动画的节奏。如果你对节奏不满意，你可以自己调整。你不需要完全指我。

五、可交互3D

先复制Artboard2一份为Artboard3，需要在Artboard3上制作带有手势交互的3D显示。因为此时的鞋子是第十幅图中的第一幅，所以很有必要全选01-09图，将他们的Opacity改为100%，并按shift + ? + [ 将其置于底层。

接下来，将Auto添加到画板2并将其连接到画板3。此时，在自动动画中有任何变化。为了保证Artboard2和Artboard3的无缝连接，时间轴需要压缩到0S。

在这一步中，我们绘制一个矩形，与图像大小相同，并覆盖它，降低其不透明度，以便后续观察。

添加滚动到水平和垂直的矩形，并关闭剪辑子层，以更好地观察矩形的位移。

接下来，为每张图片设置由矩形滚动控制的驱动程序。选择第十张照片并打开驱动面板。初始的时间线过于密集，不适合细节操作，所以首先将其预览范围调整到合适的区域。

在Scroll X下面添加fig.10的不透明度，并拖动光标到5px再次添加。此时，当矩形移动5px时，图10的不透明度不会发生变化。当矩形移动7px时，改变不透明度为0%，然后拖动关键帧光标到6px。为什么不直接设置为6px呢?因为联动控制可以自动识别添加的最小单位是2px，需要手动拖动回来)

不透明度从5px到10px不变，而不透明度从11px变为0%。

等等，完成Scroll X对所有图片的设置。

图中显示了Scroll X全部设置完成后的交互效果，逐个设置虽然很累，但完成后的效果并不是很惊人!!

在本例中，我们只能将旋转拖放到左边。如果我们想要将它旋转到右边，我们需要在图层的顶部添加另一个圆形的图像。初始不透明度为0%，向右拖放时，连续变为100%。(我不会在这里做演示，因为我很懒)

选择所有图像，添加缩放到他们的滚动Y，并改变缩放为2时滚动Y是-200px。

这允许我们在拖动矩形时控制鞋子的尺寸

类似地，当Scroll Y向上移动时，为所有图片添加从0°到180°的角度

联动部分完成

接下来，改变矩形的不透明度为0%并隐藏它，创建一个新的画板并根据前面的方法返回动画~

操作到这里，那么一个Principle制作可交互的物品3D展示就完成了，希望我的分享对你有所帮助哦~学习更多软件入门知识，千万不要错过粤秀教育了~