随着消费的升级，产品3D显示具有巨大的应用空间。3D显示，为消费者优化体验;对于商品，增强展示效果;对商家而言，线上线下场景展示有效整合。
本教程是一个有趣的原理操作-交互式3D演示。我将简要分析几种常见的在线应用的3D显示实现方法，然后带领大家使用Principle制作一个简单的3D显示案例。
：一个年轻人都爱的自学设计平台。软件入门、设计教学、软件下载，尽在~
Principle制作可交互的物品3D展示的操作步骤：
一、准备工作
关于软件:首先，本教程只是对3D演示案例的思路和操作进行总结。Principle的一些基本操作在本文中可能不会详细说明，所以读者需要有一定的软件基础。
软件版本5.3原理其实并不重要，但建议您尽量使用英文版本，很多第三方版本的中文版本或多或少都有一些不可控制的、怪异的bug。此外，Principle是一个轻量级的软件，复杂的功能很少，习惯使用英文版本后，操作上没有太大的障碍。
关于素材:案例需要使用30多个序列图，从StockX网站的产品详情页面。并将“点击手势”添加到画板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)
但是。播放几次，感受动画的节奏。如果你对节奏不满意，你可以自己调整。你不需要完全指我。
五、可交互3D
先复制Artboard2一份为Artboard3，需要在Artboard3上制作带有手势交互的3D显示。因为此时的鞋子是第十幅图中的第一幅，所以很有必要全选01-09图，将他们的Opacity改为100%，并按shift+?+[将其置于底层。
接下来，将Auto添加到画板2并将其连接到画板3。此时，在自动动画中有任何变化。为了保证Artboard2和Artboard3的无缝连接，时间轴需要压缩到0S。
在这一步中，我们绘制一个矩形，与图像大小相同，并覆盖它，降低其不透明度，以便后续观察。
添加滚动到水平和垂直的矩形，并关闭剪辑子层，以更好地观察矩形的位移。
接下来，为每张图片设置由矩形滚动控制的驱动程序。选择第十张照片并打开驱动面板。初始的时间线过于密集，不适合细节操作，所以首先将其预览范围调整到合适的区域。
在ScrollX下面添加fig.10的不透明度，并拖动光标到5px再次添加。此时，当矩形移动5px时，图10的不透明度不会发生变化。当矩形移动7px时，改变不透明度为0%，然后拖动关键帧光标到6px。为什么不直接设置为6px呢?因为联动控制可以自动识别添加的最小单位是2px，需要手动拖动回来)
不透明度从5px到10px不变，而不透明度从11px变为0%。
等等，完成ScrollX对所有图片的设置。
图中显示了ScrollX全部设置完成后的交互效果，逐个设置虽然很累，但完成后的效果并不是很惊人!!
在本例中，我们只能将旋转拖放到左边。如果我们想要将它旋转到右边，我们需要在图层的顶部添加另一个圆形的图像。初始不透明度为0%，向右拖放时，连续变为100%。(我不会在这里做演示，因为我很懒)
选择所有图像，添加缩放到他们的滚动Y，并改变缩放为2时滚动Y是-200px。
这允许我们在拖动矩形时控制鞋子的尺寸
类似地，当ScrollY向上移动时，为所有图片添加从0°到180°的角度
联动部分完成
接下来，改变矩形的不透明度为0%并隐藏它，创建一个新的画板并根据前面的方法返回动画~
操作到这里，那么一个Principle制作可交互的物品3D展示就完成了，希望我的分享对你有所帮助哦~学习更多软件入门知识，千万不要错过了~