3D应用产品展示

一、概述

Web3D技术是实现网页中虚拟现实的一种最新技术，Verge3D则是一个专门桥接常用的三维软件模型（如Blender 、3ds Max、Maya）到web应用的轻量级框架。爱定制平台的3D产品展示基于verge3D，更多相关内容可以参考 verge3D官方文档。

提示

传统的3D模型需要使用verge3D拼图模块中的E-Commerce插件转化成web3D应用后上传到爱定制平台，再与相关的产品绑定，商家朋友可以参考：👉 verge3D拼图。

二、支持的产品类型

3D产品支持以下产品类型：

简单产品
分组产品
变体产品

信息

平台仅支持 3D产品的展现和配置，对于verge3D的其他功能不支持。

三、上传3D应用

转到“管理后台”->“verge3D”，点击3D应用，可以查看3D应用：

要上传您的3D应用，请点击顶部verge3D应用标题旁边的 “新增” 按钮，输入应用标题并点击下一步：

这里会有一些选项：

标题：应用的名称，该名称仅用于后台管理。
iframe宽度：嵌入产品页面的应用画布的宽度（以像素为单位），无特殊需求，保持默认即可。注意，实际大小可能会受到网站主题、布局、自定义CSS代码等的影响。
iframe高度：嵌入产品页面的应用画布的高度（以像素为单位），无特殊需求，保持默认即可。注意，实际大小可能会受到网站主题、布局、自定义CSS代码等的影响。
允许全屏模式：允许/禁用全屏模式。如果禁用，应用程序全屏按钮将被隐藏，无法进入全屏模式。
允许AR/VR：是否启用AR/VR（需3D应用实现功能）。
加载：3D应用的加载方式，选择“懒加载”会在浏览到3D应用时才开始加载，无特殊需求，默认即可。

相关参数设置完成以后，点击“选择文件”，从本地选择verge3d项目的文件夹：

注意

项目文件夹最大为20MB，可去除项目中多余的3D文件，如blend、max、ma、mb、mat、mel，以减小项目体积，获得较佳的用户体验。项目中不得包含任何项目外文件。

点击上传：

上传完成：

重要！

出于安全原因，子iframe无法访问父window对象的方法，在获取相关商品属性信息时，
请将项目中所有的window.parent的调用按照下例改为使用postMessage。
下例为项目中visual_logic.js的wooGetProductInfo函数。（其他可能出现的地方是在
visual_logic.js的featureAvailable函数中。）

function wooGetProductInfo() {
	//源代码
    /* return (function(whenReadyCb) {
        // wooGetProductInfo puzzle
        const woo_fun = window.parent.v3d_woo_get_product_info
                || window.parent.parent.v3d_woo_get_product_info || null;
        if (woo_fun) {
            woo_fun(function(info) {
                _pGlob.wooProductInfo = info;
                whenReadyCb();
            });
        } else {
            console.error('wooGetProductInfo: WooCommerce not found.');
        }
    }).apply(null, arguments);  */		
	//替换为
	return (function(whenReadyCb) {
		window.parent.postMessage('getproductinfo','https://'+window.location.host);				
		window.addEventListener('message', function(e) {		
			if (e.origin === 'https://'+window.location.host) {
				_pGlob.wooProductInfo = e.data;
				whenReadyCb();
			}
		}, false);	       
    }).apply(null, arguments);  
}