为WooCommerce制作3D产品配置器

Making 3D Product Configurator for WooCommerce

在过去的两年中,Verge3D已经在各行各业中被证明是用于创建可配置3D产品的强大解决方案,允许非程序员为电子商务网站创作沉浸式的Web体验。 但是,如何将交互式3D应用转换为在线商店的组件,这是一项艰巨的任务——因为您必须进行客户端和服务器端的综合编程,才能将它们有序地整合在一起。

但自Verge3D 2.16版起,您无需担心了,它内置了可适配于WooCommerce的集成模块。WooCommerce是当前最受欢迎的电商技术解决方案之一,世界上有28%的在线商店使用其电子商务解决方案。


Demo

点击下图体验一下我们已经为您准备好的Demo吧!

3D图形可与360°视图和缩放进行交互。 单击时播放动画,并伴有声音。 但是,更重要的是,客户可以通过可更改价格的可配置选项设计自己的旋转玩具。


工作流程

借助直观的Verge3D工具,创建此类3D产品配置器的过程非常简单。 WordPress插件关心所有服务器端的事情,而可视脚本编辑器Puzzles处理前端。 您需要做的只是:

  • 安装Verge3D WordPress插件。
  • 创建3D图形并将其上传到WordPress。
  • 使用WooCommerce添加产品变体。
  • 通过拼图使3D视图可配置。

…开始销售吧!


让我们详细查看这些步骤。

安装

在WordPress插件目录中找到Verge3D插件,安装并激活即可,无需更多配置。

3D图形

出于本教程的目的,我们使用Verge3D示例中包含的预制Spinner应用程序。 设计人员可以使用3ds Max,Blender或任何其他3D建模软件轻松创建此类应用程序。


通过Puzzles,不需要任何编程技能即可添加交互性,例如单击时播放动画,更改颜色或大小。


有关使用Verge3D创建网络互动的基础知识,请参见《初学者指南》。


上传3D应用

为了将3D图形上传到您的网站,请转到WordPress仪表板中的Verge3D / Applications,然后单击“Add New

输入3D应用程序的名称,然后单击"Next"。 在设置页面上,选择一个包含应用文件的文件夹,然后单击Upload

您的应用已上线,可以通过您自己的网站进行服务了!

您可以运行上传到我们的Spinner应用到 WordPress sandbox 沙盒看看它的样子。


将3D视图添加到产品

现在,让我们使用上载的3D图形,而不是在WooCommerce商店中制作无聊的静态图像。 单击产品进行编辑:



“产品数据(Product data)”中,转到“ Verge3D”选项卡,然后选择我们之前创建的应用程序:

 

点击"Update"并查看! 

添加产品差异

具有产品的3D视图已经很棒了,但是我们可以进一步发展并使产品可配置,每次客户选择时都会更新3D视图和价格。

WooCommerce的标准功能(称为变体/variations)提供了创建3D产品配置器的可能性。 在本教程中,我们将对微调框进行大,中和小变化,每种选项都有3种不同的颜色

因此,让我们从颜色开始! 在“产品数据Product data”中,选择“可变产品Variable product”,然后转到“属性Attribute”选项卡并添加一个名为“颜色(color)”的新属性。 提供3个值-“红色,蓝色和黄色”-并选中“用于变化Used for variations”

添加另一个大小属性并保存所有内容:


现在,让WooCommerce为您生成所有可能的变体:

它将总共创建9种不同的产品:蓝色小号,红色小号,黄色大号等。 您只需提供每个变体的价格:

保存设置并在商店中查看产品! 

使3D视图可配置

至此,您已经可以配置产品。 但是无论客户选择哪种选项,3D视图都是相同的。 让我们来修复这个问题。

您可能会注意到,Spinner应用程序的独立版本具有3个球体对象,它们用作更改颜色的按钮。 单击这些3D按钮之一时,将更改微调器模型上的材质。 这要归功于Verge3D的可视化逻辑编辑器Puzzles(拼图编辑器):

现在,我们将使用WooCommerce产品页面提供的选择菜单来代替这3个球体来更改颜色。 因此,这次的困惑看起来会有所不同: 

从拼图中可以看到,当客户选择一种颜色时,会将其作为具有相同名称(红色,蓝色或黄色)的材质分配给微调器模型。 归功于3ds Max或Blender中正确命名的所有材质,操作即是如此简单。

至于大小,我们可以根据客户的选择使用拼图来缩放模型:


有关完整的拼图设置,请参见Verge3D发行版中包含的Spinner示例。

欢迎您通过从此页面下载最新Verge3D 2.16预览版,来试用WooCommerce集成功能,也欢迎您在论坛上让反馈您的使用心得与建议!

我们在YouTube和Bilibili都分别提供了本教程的视频版本:


为WooCommerce制作3D产品配置器