AR/3D查看器

概述

上头AR/3D查看器web组件使浏览器中能查看3D模型并与之交互,并使用移动设备从增强现实中看到3D模型

上头3D模型配置媒体库应用可用AR/3D查看器定义纹理变异并设置模型默认质量

开始

上头AR/3D查看器组件可以在前端设置中工作(Vanilla JavaScript、React、Vue、agle等)。

使用组件:

预设条件:要使用AR/3D查看器,你首先需要三维模型上传云.

1. 添加脚本标签到页面 :

2. 指定AR3D浏览器元素中需要查看器显示页面,并有下列属性:

   • 云层:设置云生成环境云名
   • 模型化3D模型公开发布
     注解

     属性反应性,以更新 模型化属性删除前一模型并加载新模型

   例举三维模型使用公共标识docs/CldLogo3D中演示文集云式产品环境

全部例子和输出

AR/3D查看器属性

下属性可用AR3D浏览器组件 :

属性化	类型	描述性
云层	字符串	上头云名云化产品环境
模型化	字符串	逗号有限三维模型公共身份证显示式查看器当前只支持一个公共ID看吧支持三维模型.
ar系统	布尔	显示/隐藏AR按钮看吧增强现实. 可能的值: 真实性显示AR按钮 虚伪:隐藏AR按钮 默认:真实性.
定位	字符串	将对象置于水平或垂直平面中( Android ARCore使用)。看吧增强现实. 可能的值: 楼层:将对象放入横向平面 墙壁:将对象置入垂直平面 默认:楼层.
hdr	字符串	HDR文件使用或指定存储于产品环境的HDR文件的公共标识或基础提供基础HDS文件看吧动态照明. 默认:无HDR文件使用
机箱	布尔	if真实性人发报告还提供环境图像看吧动态照明. 可能的值: 真实性重命名环境图像 虚伪:不产生环境图像 默认:虚伪.
影影	布尔	if真实性变影模型看吧影影. 可能的值: 真实性Renders模型影 虚伪:不为模型提供阴影 默认:虚伪.
动画播放	布尔	if真实性内置动画模型动画看吧动画. 可能的值: 真实性玩动画 虚伪:不玩动画 默认:虚伪.
动画名	字符串	可应用性animiation-play="true".专用动画名使用多动画模型看吧动画. 注解:不提供名或提供错误名结果
变异式	布尔	if真实性显示模型变量使用预定义3D模型配置媒体库应用看吧纹理变异. 可能的值: 真实性显示变量 虚伪:不显示变量 默认:虚伪.
优化	布尔	if真实性应用优化变换模型也可以通过预定义3D模型配置媒体库应用看吧优化. 可能的值: 真实性:应用优化 虚伪:不应用优化 默认:虚伪.
质量问题	整数	可应用性优化=真.质量水平人工优化看吧优化. 范围:10至90. 默认:80.
线框	布尔	if真实性显示模型线框看吧优化. 可能的值: 真实性显示线框 虚伪不显示线框 默认:虚伪.
分析学	布尔	if真实性发送Google分析器看吧分析学. 可能的值: 真实性发送谷歌分析 虚伪:不发送谷歌分析 默认:虚伪.

支持三维模型

可使用3D模型支持上传成图像类型.

模型转换为GLB供查看器使用,并转换为USDZ供OS设备AR查看并转换成动画GIF和招贴文件,

增强现实

上头AR视图按钮默认显示AR/3D查看器并允许您使用增强式现实在自己的环境里查看模型隐藏按钮集ar系统至虚伪.

点击此按钮可调出QR代码,用移动设备扫描打开设备内置AR应用OS12+应用苹果设备ARCORE支持设备运行 Android7.0NUGAT(API24级)或后

Android设备可选择通过具体说明将模型垂直表面placement="wall".默认时,它放在水平面上(placement="floor")

动态照明

标准三维场景内置照明搭建,但您可加载自己的HDR文件,并用作光源和机箱并存基础选项 。

查看左侧内置照明与左侧内置照明之差基础右侧照明hdr=基础:

要加载自己的HDR文件,设置hdr属性公钥HDR文件注意HDR文件被当作原始资产公有标识包括扩展,例如hdr="docs/park.hdr".

以HDR文件为机箱,而不仅仅是光源提供机箱表示真:

设置hdr至基础带机箱表示真显示基础机箱环境

影影

令三维模型设置后向场景投影影影至真实性.

例举 :

动画

if your 3D模型支持动画,您可以通过设置选择哪个动画播放动画名to命名动画动画播放至真实性.不指定动画名则播放模型中定义的第一个

猫和猫行走动画,包括影影

极小猫https://skfb.ly/ospATDiskette96注册创用CC授权.

热点

AR/3D查看器支持热点使用HTML5槽热点可以是标签或按钮按钮只支持点击事件详解

下属性可设置 :

属性化	类型	描述性
插槽	字符串	热点ID表单热点- .
数据定位	浮点	x/y/z状态表热点 .值取自模型中心虚拟米,范围不受限制

例举 :

极小猫https://skfb.ly/ospATDiskette96注册创用CC授权.

分析学

合并谷歌标签管理器

Google标签管理员整合网页后,你可以告诉AR/3D查看器更新Google标签管理员数据馆数组随事件通过包含分析学属性

例举 :

全表报告事件

事件处理	类别	动作	标签标签	名称	注解
云化Event	ar/3d查看器部件	点击	变式修改	变式修改
云化Event	ar/3d查看器部件	点击	按ar按钮打开qr模式	ar-button-clicked	时AR按钮点击桌面
云化Event	ar/3d查看器部件	点击	点击a按钮开a	ar-button-clicked	AR按钮点击移动设备
云化Event	ar/3d查看器部件	点击	点击拷贝ar链路	ar-ur-coped
云化Event	ar/3d查看器部件	点击	点击热点	热点点击

自定义事件

设置监听器发送事件集可发送事件查看器发送事件集

例举 :

完整事件列表 :

事件名	数据传递
加载	生成器、网状Count、网状Data、三角Count
加载故障
变式修改	名(变量名)
ar-button-clicked	设备(桌面/移动式) 模式(qr/ar)
热点点击	id( Slot名称)
ar-ur-coped

AR/3D查看器演示

可使用三维模型不同设置AR/3D查看器Demo.