网页设计
增强现实
如何

完整的指南3D web嵌入和如何使用它

详细介绍了什么是3D WebAR嵌入以及如何使用它.

完整的指南3D web嵌入和如何使用它

vecary最大的特点之一是web AR嵌入. 这里将详细介绍什么是3D WebAR嵌入,以及如何使用它来实现你的商业目标

如果你不会说任何编程语言, 网络嵌入可能仍然不在你的词汇表中, 但这种情况即将改变. 网络嵌入, 或嵌入的文件, 是否有任何类型的媒体,你可以简单地通过粘贴HTML代码或脚本插入到你的网站.

你是否想让你的博客文章更有趣, 在你的网站上添加互动元素, 让你的客户在AR中体验产品, 或者用来自流行社交媒体网络的设计元素来突出文章的一部分, 它可以给你的网站和访问它的客户带来很多价值.

如今,互联网用户每天都会遇到网络嵌入. 它们以社交媒体帖子、新闻和媒体网站等形式出现. YouTube可能是最受认可的嵌入式应用之一. 如果你想在你的博客文章中包含一个视频, 通常情况下, 它将是一段代码, 可以在任何YouTube视频中找到, 并被简单地复制粘贴. 3D项目也在朝着这个方向发展.

一个3D和AR网络嵌入的例子

下图是一个交互式vecary 3D查看器——它被称为WebAR,因为它支持3D网络元素和增强现实体验. 试着旋转它或打开这个博客在iPhone的Safari浏览器或在Android的Chrome浏览器,以看到它在AR:

如何准备WebAR嵌入矢量

步骤1:创建一个3D对象或3D场景

将一个对象嵌入博客或网站, 您需要计划希望嵌入对象出现的位置. 在此基础上,你可以准备嵌入,让它自然地适应网站的环境. 有几种方法可以创建一个web友好的3D项目.

1. 导入自己的3D模型

如果你已经有3D建模的经验,你可能会有一些模型和文件开始你的3D web嵌入. 只需将它们导入vecary并等待它们加载. 目前,24K皇冠手机app支持超过60种文件格式,包括: .obj, .dae, .stl, .gltf, .最大下界, .jpg, .png, .Svg,您可以查看所有受支持的格式的完整列表 在这里.

2. 使用库和访问3D存储库或预先制作的集合

3D建模初学者, 24K皇冠手机app创建了一组由资产组成的精心策划的集合, 材料, 和环境. 一旦你找到它,拖拽 & 把它放到场景中,继续生成嵌入.

3. 从零开始创建项目

对于高级用户,vecary提供了编辑模式下直观的网格建模. 类似于导入项目, 您可以从头创建它,也可以编辑已导入的现有文件, 或者是在图书馆被发现的. 当你完成了3D建模,继续生成你的嵌入代码.

创建一个3D项目

第二步:如何生成3D网页嵌入代码

一旦你准备好并准备好你的项目和3D对象, 创建一个WebAR嵌入代码是非常简单和直接的. 24K皇冠手机app的软件为您做了所有的工作与一个简单的点击 生成 按钮.  一旦完成,就会生成一个iframe代码,可以在HTML代码中使用.

矢量3D网页嵌入设置

你可以在高级菜单中自定义嵌入的结果:

  • 纹理质量

影响嵌入的最重要的参数是纹理质量. 更详细的纹理需要更多的时间来生成,因为他们是非常详细的. 当在网站上实现时,它们可能会有较慢的性能. 另一方面,分辨率越小的纹理加载速度越快.

  • 环境闭塞

定义了表面上的阴影,它也增强了你的嵌入的真实性.

  • 以及材质

定义表面上的光

  • 增强现实

最后但并非最不重要的是,你的项目可以在设备上与AR预览. iOS设备和Android设备都可以预览它,因为vecary WebAR Viewer支持Android的AR核心技术. 如果你有一个电子商务业务,你想让访问者以真实比例体验产品, 或者在他们的环境中预览产品,这是一种方法. 默认情况下,24K皇冠手机app保持这个特性是打开的.

  • 中心相机视图

“中心摄像机视图”将您的场景与摄像机相匹配,以便摄像机轴心点将位于场景的中间.

当嵌入生成后,你还可以添加更多WebAR查看器行为的设置,例如:

  • 播放
  • 显示预紧器
  • 显示交互提示-鼠标跟随对象
  • 转盘-物体的自转

步骤3:预览WebAR嵌入

有时候在嵌入之前预览一下WebAR查看器是很好的, 或者你只是想与你的同事和客户分享增强现实预览. 要做到这一点,请转到格式设置并选择链接. 在新选项卡中打开生成的链接.

第四步:将网页嵌入到你的网站代码中

只需复制并粘贴web嵌入到您的网站. 在格式查看器设置中选择链接. 原理与YouTube的嵌入代码相同. 你也可以在服务中嵌入文件,比如 Squarespace, , Shopify, 拥有, Webflow或类似.

http://www.kneadleandbread.com/uploads/media-library/embeding.jpg-0u5XFVh92xgWzs0qWjbuvb.jpeg

如何编辑3D网页嵌入代码

熟悉HTML代码的用户可以编辑生成的iframe代码. 目前,只有基本参数,如宽度、高度和边框可以更改. 将来,在嵌入代码中会有更多的定制和可编辑选项. 这些都不需要任何编码技能. 举个例子, 如果你想调整大小,让你的嵌入更小,这样它就能很好地适合你的网站, 更改属性“宽度”和“高度”,以满足您的需求. 24K皇冠手机app建议保持 framerborder 值为“0”使对象很好地与背景混合.

第四步:如何在你的网站上编辑3D浏览器

网站上的嵌入对象是在矢量编辑器中创建的3D设计的最终结果. 然而, vecary更进一步,允许您编辑已经嵌入的WebAR项目并实时更改它们. 在vecary中打开项目,进行更改并重新生成代码. 所有更改都应立即应用.

http://www.kneadleandbread.com/uploads/media-library/edit.jpg-2pdZAHwg0QblxqitMQgBsJ.jpeg

开始创建

常见问题解答

使用vecary 3D网络嵌入要花多少钱?

WebAR测试现在是免费计划的一部分,只有有限的浏览量. 检查24K皇冠手机app的 定价 要了解更多.

准备开始用vectarwebar嵌入3D/AR内容?
开始创建
开始创建
友情链接: 1 2 3 4 5 6 7 8 9 10