常见问题

下面我们将回答一些与Verge3D相关的常见问题。

授权与支持

我已经购买了Verge3D,如何下载无水印的版本?

一般来说,购买后很短时间内(几分钟至几小时,最长不超过24小时,取决于您的时区),您将会收到一封带有许可证密钥的电子邮件(如果您从国际商店购买,将收到来自Soft8Soft的英文邮件,如果您从中国商店购买,将收到来自FunJoy.Tech的中文邮件)。复制邮件中的密钥并粘贴到应用管理器(App Manager)许可证信息面板中,这将使您的Verge3D试用版转换为授权版本,并从您的项目中去除水印。

此外,如果您购买的是企业版,您还可以下载Verge3D源代码的特别DevKit发行版。若要获取该发行版,请转到Soft8Soft上的 用户面板 并点击下载按钮。如果您是从Verge3D中国网站购买,请查看您的授权邮箱获取下载链接,在订单页面查看DevKit下载链接与密码。您也可以直接与微信客服联系或发送技术支持邮件。此操作同样适用于从Soft8Soft及FunJoy.Tech购买的材质包。

Verge3D允许被安装在多少台计算机上?单一许可证允许多少人使用?

许可证是根据个人(自由职业者)或实体(团队、企业)分配的。安装数量不受限制。自由职业者版(也称之为个人版),只允许1人使用 Verge3D 。与之相对,公司或组织内部最多可以有5名开发人员共同使用 Verge3D 。

Verge3D试用版有哪些限制?允许我做什么...?

试用版仅供评估和学习之用,不得用于生产环节——不论是商业或非商业目的。

因此,您可以使用试用版来学习和提升技能,也可以为您的主管创建模拟演示文档。但您不可以用于教育活动——您可以联系我们申请教育版折扣( 国际申请通道中国区域申请)。您不可以用试用版创建作品集,因为这也属于生成流程——请考虑购买Verge3D个人许可证(Freelancers's license)。

查看 此页 了解更多关于试用版的福利和限制。

怎样获得技术支持服务?

如果您拥有Verge3D团队许可证或个人许可证,或仍在评估试用Verge3D,您可以在此购买我们的 技术支持服务方案 。支持服务也作为企业版授权 权益包 的一部分提供。您可以在丰疆科技网站购买中文技术支持

常见问题

什么是WebGL?

WebGL(网络图形库)是一种JavaScript API,是用于在浏览器中渲染三维互动图形的技术。WebGL可以在桌面电脑和智能手机的浏览器中直接运行,无需安装其他软件。然而这是一项非常极客的技术,即使是生成渲染一个旋转的立方体,也需要很多的时间和专业知识。Verge3D帮助艺术家、设计师、教育工作者和工程师等群体逾越了这些技术障碍,以无需编程的方式驾驭丰富的Web交互创作能力。

客户端与服务器端是什么?

在 Web 开发的上下文中,客户端意味着在用户设备上运行的浏览器中发生某些事情。 服务器端意味着某些事情发生在网络服务器上。

如果我们说 Verge3D 是一个客户端解决方案,那就意味着您的 3D 应用可以在浏览器中运行,并且不需要服务器端编程或其他框架来启动和运行您的应用。 这是 Verge3D 的一项重要功能,使其易于使用。 但是,由于我们谈论的是 Web 开发,因此暗示存在一些基本的服务器功能。 在大多数情况下,此功能仅限于向浏览器提供应用文件。

为让您更易入手,我们在Verge3D中部署了3个服务器端解决方案,不要求您了解任何有关服务器端的知识:

  1. 应用管理器 提供了一个在本地服务器,用于启动应用和快速预览。
  2. Verge3D Network 是一个基于云的服务器,只需单击一下即可将应用分发给您的用户。(注意,此服务在中国区受到亚马逊云一定的限制,详情请阅读此文。
  3. Verge3D for WordPress 是一个用于在 WordPress 上托管 Verge3D 应用的插件,WordPress 是当前互联网中最受欢迎且易于使用的内容管理系统。

当然,应用托管方案不限于此。您还可以使用自己的 Web 服务器,例如基于 Apache、NGINX、IIS 的服务器组件或使用一些第三方托管平台:例如国际服务商 Amazon AWS、Digital Ocean 或 GoDaddy 等,中国云服务商腾讯云阿里云华为云等。

在哪里可以找到Verge3D开发的路线图?

Verge3D是一款客户导向的产品,因此我们一直朝着 客户期许 的方向发展。一般来说,我们的开发优先级是电子商务、电子学习和VR/AR应用。如果您有需求,我们可以在合同基础上为Verge3D添加更多特定的功能。欢迎随时 联系我们 讨论细节。

必须联网才能使用Verge3D吗?

Verge3D是一个可完全脱机工作的工具包,它针对存储在计算机硬盘本地的文件进行操作。完成项目后,您可以部署在自己的网站上、转换为移动或者桌面应用,或者通过本地网络提供服务。唯一需要互联网连接的功能是基于 Verge3D Network 发布应用。

此外,为了帮助网络条件不佳的用户学习与工作,我们提供了离线版本的用户手册和开发者参考。请在在Verge3D发行版的 docs 目录查找这些文档。

我的应用在Chrome直接打开无法加载,但在应用管理器中可以运行……

由于浏览器供应商实施的安全策略,Web应用无法跨域访问数据,包括从本地文件系统加载的数据。因此,建议您使用应用管理器(体现为本地服务器的形式)进行开发,并在web服务器(或Verge3D Network)发布应用以供运行。此外,您可以通过为浏览器运行添加变量的方式跳过此限制,我们录制了一则演示视频,请在这里查看:[使用浏览器直接打开Verge3D应用的方法](https://www.bilibili.com/video/BV1GP411p7r1/)

如果您需要桌面或者移动端应用,您可以通过应用管理器将其转换对应版本的应用。关于如何使用Verge3D创建 桌面移动 应用程序,请参见以下指南。

直接点击.html文件无法运行应用。

请查看 上一个问题 的回答。

我可以将我的场景导出到一个独立的HTML文件包吗?

不可以,Verge3D不支持导出完整HTML包的功能。如果你需要制作成独立的可执行文件,请尝试使用 Electron 进行转换。

Verge3D应用可在Internet Explorer 11中运行吗?

可以,Verge3D 1.x ~ 3.x 版本中附带了 IE 11 兼容模块:

在创建新的Verge3D应用时启用Internet Explorer 11支持

可以不依靠Blender、3ds Max或Maya运行应用管理器吗?

当然,你可以以独立模式运行应用管理器。请从桌面或“开始”菜单中单击对应的 Verge3D 图标,此快捷方式会启动本地服务器,并在默认浏览器中打开应用管理器页面。

应用管理器快捷方式

如何将拼图复制到另一个项目中?

添加到 自定义拼图库 功能可以帮您在不同应用中复用拼图。

应用在iOS系统上无法播放声音……

请查看 这里 的解决方案。

应用加载很慢且运行卡顿,如何提高它的性能?

请查看这里的 性能瓶颈优化场景以提高WebGL性能 章节。

如何打开浏览器控制台

Google Chrome

菜单 > 更多工具 > 开发者工具

Windows/Linux系统中按 F12 键, 或macOS系统中按 Option + ⌘ + J 快捷键组合。

在开发者工具窗口,选择 控制台 标签。

打开Chrome开发者控制台
Mozilla Firefox(火狐浏览器)

菜单 > Web开发者 > 浏览器控制台

Windows/Linux系统中按 F12 键, 或macOS系统中按 移动 + ⌘ + J 快捷键组合。

Apple Safari

在Safari偏好设置中开启 开发菜单高级标签内),然后点击菜单 开发 > 显示JavaScript控制台

按下 Option + ⌘ + C 快捷键组合。

Microsoft Edge

菜单 > F12开发者工具

直接按下 F12 键.

在开发者工具窗口,选择 控制台 标签。

Android版Google Chrome
您无法直接在Android设备上打开Chrome的浏览器控制台。请使用 USB debugging 功能作为替代。
亦或者,您可以通过网页前端方式添加一个模拟控制台,详细方法请阅读此文的第三部分:使用vConsole,为任何页面添加控制台
Apple Safari on iOS/iPadOS
您无法在iOS或iPadOS设备上直接打开Safari浏览器的控制台。您需要使用macOS系统的Safari的 Web Inspector 工具来访问控制台内容。
亦或者,您可以通过网页前端方式添加一个模拟控制台,详细方法请阅读此文的第三部分:使用vConsole,为任何页面添加控制台

我的应用在应用管理器中可以正常工作,但在上传到远程服务器(如Verge3D Network)后失败。

可能原因如下:

  1. 您的开发系统是不区分大小写的,而远程服务器系统是区分大小写的。
  2. 您为HTML或glTF文件错误地指定了绝对路径。

第一种情况有可能是这样:如果您使用的是Windows或macOS(都是 不区分大小写 的文件系统),可能会在导出时不小心重命名了文件。由于大多数Linux服务器(包括Verge3D Network)使用 区分大小写 的文件系统,这可能导致文件上传到服务器时出现问题。

例如,您创建了一个 "MyConfigurator" 应用。默认情况下,这个应用将包括以下资产文件:

MyConfigurator.blend (or MyConfigurator.max or MyConfigurator.mb) MyConfigurator.html MyConfigurator.js MyConfigurator.css MyConfigurator.gltf MyConfigurator.bin

假设你在Blender/Max/Maya中打开你的场景文件,并将其导出为 myconfigurator.gltf

这样,你的应用文件夹将看起来如下(对比最后两行字母大小写):

MyConfigurator.blend (or MyConfigurator.max or MyConfigurator.mb) MyConfigurator.html MyConfigurator.js MyConfigurator.css myconfigurator.gltf myconfigurator.bin

如果您打开应用的主要JS文件(在我们的例子中为MyConfigurator.js),会看到它试图加载 MyConfigurator.gltf ,而不是 myconfigurator.gltf 。这在Windows或macOS上是完全正常的,因为这两个名字代表同一个文件。但当你上传应用到服务器后,它将无法被加载。

因此,在保存和导出文件时,一定要使用正确的大小写。或者,您可以在应用的主要JS文件中重命名对应的文件。

在第二种情况下,你可能错误地指定了加载资源的 绝对 路径,如:

http://localhost:8668/applications/my_awesome_app/my_awesome_app.gltf

http://localhost:8668/applications/my_awesome_app/my_awesome_app.gltf

在这种情况下,指定 相对 路径来解决此问题:

my_awesome_app.gltf

./my_awesome_app.gltf

如何正确重命名我的应用?

转到 Verge3D 安装中的 applications 目录(4.0版之后为您自行指定的应用存放目录),查找并重命名包含您的应用的文件夹(例如,改 my_awesome_appcool_3d_visualization)。

请注意,应用名成并不是应用管理器里显示的标题!例如, "my_awesome_app" 应用显示的标题为 "My Awesome App" 。此标题是通过将下划线替换为空格并将单词首字母大写来自动生成的。

如果您也想重命名应用 内部 的文件,请按如下步骤操作:

  1. 打开应用目录。
  2. 指定新的应用名给所有的 html/css/js/gltf/bin/blend/max/ma/mb 资产文件 (详见 此处 )。请勿修改 v3d.js, visual_logic.xml, and visual_logic.js 脚本!
  3. 打开并重新导出场景以更新导出的 glTF 资源中的路径。
  4. 打开主 HTML 文件(例如 my_awesome_app.html )并更新以下 JS/CSS 路径 <script src="my_awesome_app.js"></script> <link rel="stylesheet" type="text/css" href="my_awesome_app.css"> 比如说,如果您改名 my_awesome_appcool_3d_visualization 。那如此您需将路径做如下修改: <script src="cool_3d_visualization.js"></script> <link rel="stylesheet" type="text/css" href="cool_3d_visualization.css">
  5. 打开主 JavaScript 文件(比如 my_awesome_app.js),并使用首选应用名称更新以下行: var sceneURL = params.load ? params.load : '__URL__my_awesome_app.gltf'.replace('__URL__', ''); 假设您将 my_awesome_app 改名为 cool_3d_visualization ,按此修改如下路径: var sceneURL = params.load ? params.load : '__URL__cool_3d_visualization.gltf'.replace('__URL__', '');
  6. 在应用管理器中启动该应用,如果应用没能正常运行,请打开 浏览器控制台 检查其中所报错误的原因。

此外,重命名后的应用,您可以放心地更新其HTML文件的元数据。有关如何执行此项操作,请查看 这里

建模与内容创作

什么是glTF?

glTF是一种通用的网页友好文件格式,用于在Verge3D和其他3D软件中存储和交换3D图形数据。它不仅可以存储模型数据,还可以存储整个场景,包括几何数据(网格)、对象位置、动画、摄影机数据、灯光、材质、纹理和其他信息。

glTF格式只指定了一组基本功能。因此,我们用几个扩展(前缀为s8s)扩建了这个格式。Verge3D的glTF子集不仅支持基础PBR材质,还支持基于Blender和3ds Max节点的材质、摄影机、灯光、环境等,使资源工作流更轻松、更高效。

我们在Verge3D中使用2.0版的glTF格式,不推荐使用旧的1.0版。

应该在什么情况下使用glTF兼容材质?

在Blender,3ds Max和Maya中使用原生基于节点的 glTF兼容性 PBR材质系统有以下好处:

使用glTF兼容材质系统的主要缺点是:您不能使用Blender和3ds Max提供的原生材质系统。这可能导致了很难达到与其同等程度的渲染质量。

查看以下指南以了解更多信息:

glTF和GLB,哪一种格式更好?

glTF 2.0格式有两种扩展名。glTF容器更流行和高效,因为其只保存元数据(场景、对象、材质等参数)。所有的外部数据,例如几何体、动画和纹理都会单独保存(在*.bin, *.jpeg, *.png文件中)。

GLB容器以二进制格式存储所有数据,并将元数据、几何体、动画和纹理打包到一个大文件中,无需单独管理,因此GLB文件用起来更方便。

当我导出场景时,什么都没看到(或者只有背景)。

这可能有多种原因造成:

Verge3D可以使用那些3D文件格式?

Verge3D能够加载各种格式,包括glTF, OBJ, FBX, COLLADA, STL 和 PLY。不过,创建3D Web内容的首选格式是glTF 2.0,3ds Max、Maya和Blender导出器都支持该格式。

此外,标准应用模板的脚本基于App类,该类仅支持加载glTF文件。如需加载其他格式,请改用对应的 加载器

Maya LT版本是否支持?

很遗憾,不支持。Maya LT 不支持 Python 脚本,因此无法从中导出。

有没有支持Maxon Cinema 4D 或 Sketchup 的计划?

请查看论坛中 关于此问题的回复

如何将我的SolidWorks模型转变为可用于Verge3D的WebGL格式?

从2016版起,3ds Max原生支持SolidWorks资产格式。你只需 导入SolidWorks文件 到3ds Max,然后像其他任何3ds Max场景一样导出到WebGL即可。

注意:请优化几何体数据,因为CAD模型对于网络而言过于繁重。导入文件时,从 Import Settings(导入设置) 对话框中调整 Mesh Resolution(网格分辨率) 设置。您也可以使用3ds Max修改器减少模型上的多边形数量。

SolidWorks-to-Max 导入对话框 SolidWorks-to-Max import dialog

如何基于Revit模型创建实时浏览器可视化应用?

您有两个选择方案:

  1. 导出Revit模型为FBX格式,然后再导入到3ds Max、Maya或Blender。
  2. 使用3ds Max原生支持的 Revit导入器 。在3ds Max安装过程中,别忘了激活 Autodesk Revit Interoperability(互操作性) 选项以启用此功能。
导入Revit模型到3ds Max

无论如何,您都需要优化几何体,我们建议在整个场景中使用不超过100K-500K多边形面。

E-Commerce(电子商务)

如果我的web开发经验有限,该如何快捷地创建基于 Verge3D 的电商配置器呢?

如若如此,我们建议您以 Verge3D 附带的演示案例作为参考,然后根据您的需要进行修改。在 Asset Store 中提供的如下3个demo是3D美术师单独制作的,完全零代码完成:

Ring - 钻戒定制
最简案例,UI是基于绑定在摄影机上的3D元素创建。
Recliner - 沙发躺椅
带有相对进阶的基于HTML的界面,以及使用 Webflow 编辑器制作的购物车。
Scooter - 电动车配置器
更高级的配置器应用,包含超过百万种组合可能性。与 Recliner 类似,此案例的UI是使用 Webflow 编辑器完成的。

尽管预算有限,但我仍然想创建一个支持 3D 的网上商店,该如何进行?

首先为您的产品创建三维可视化效果,然后您可以选择如下三种方案:

我需要创建一个基础的 CPQ(配置报价)系统,可实现3D形式显示与定制产品。

我们推荐如下方法:

我有足够的预算,但我自己并不是一个技术专家。如何有效地创建 3D 网站?

我们建议您联系我们的长期合作伙伴,数字代理或自由职业者,他们在开发此类应用方面非常有经验。

另外,您也可以通过 论坛 发布招聘意向与项目需求。

我开发了一个很酷的 Verge3D 插件,该如何销售?

祝贺您!您可以采用如下几种方式销售:

使用拼图编程

移动设备不支持第一人称摄像头控制

实际是可以支持的。但是,由于移动设备没有物理键盘,因此无法使用常规的WASD键移动第一人称角色。因此,您应该制作其他显示在屏幕上的元素来作为FPS角色控件。最低限度下,您需设置前后控制(因为通过触摸/拖动屏幕可用来执行旋转)。

通常有两种方法在移动设备上渲染控件:

  1. 使用显示在3D场景上层的HTML元素。在 此处 查看关于此方法的更多信息。
  2. 通过使用与摄影机建立父子关系的平面或类似3D对象来控制。您只需要在建模工具中将它们与摄影机对齐即可。

创建屏幕控件后,请使用 change local transform(改变本地变换 来移动摄影机。例如,要前进/后退,可以使用以下逻辑:

用于实现前后移动的拼图

为了实现角色平移,你可以使用相同的拼图,将移动的轴向 Z轴 改为 X轴 即可。

为什么hide/show拼图对注解无效?

由于Verge3D会移动并控制注解对象本身的可见性,因此hide/show(隐藏/显示)拼图将不起作用。

取而代之,您应该使用对应于注解对象ID的 display CSS属性来控制其可见性。例如,要隐藏/显示元素ID为 poi1 的注解,可以使用以下两个拼图:

用于显示和隐藏注解的拼图

通常来说,将 display 设置为 none 会隐藏注解,而将 display 设置为 block 则会显示注解。

是否可以在VR模式下禁用(隐藏)光线投射/十字光标?

请使用 get controller property(获取控制器属性) 拼图来获取光纤投射/十字光标的对象,并使用 hide(隐藏) 拼图将其隐藏。

用拼图显示或隐藏光线投射十字光标

高级编程问题

如果你有一定的JavaScript编程能力,请阅读下文。

既然Verge3D基于Three.js,那么它和Three.js的API兼容吗?

在创建Verge3D过程中,我们对 Three.js 代码库做了 大量的修改 ,因此因此我们决定对API使用 "v3d" 前缀。 但是,我们依然尝试与Three.js保持源代码的兼容性。大多数基于Three.js的应用和 实例 都可以在Verge3D中直接运行,无需进行任何修改。

如何计算纹理内存使用量?

要在GPU内存中存储常规的(非HDR)纹理,你至少需要

width x height x 4 x 1.333 bytes

其中 widthheight 是纹理宽高尺寸(以像素为单位),4 是每个像素的字节数,而 1.333 表示纹理映射所需的额外内存。例如,大小为2048x2048的纹理将占用大约22.4 Mb的GPU内存。如果需要存储HDR纹理,则将该值乘以 2

同样,根据WebGL的实现机制,浏览器可以至少在常规(系统)内存中存储一个纹理副本。

如何在调整大小时保持场景比例?

我们希望所有对象,无论它们与摄影机的距离如何,都显示相同的大小——即使调整了窗口的大小。解决此问题的关键方程是这个针对给定距离的可见高度公式: The key equation to solving this is this formula for the visible height at a given distance: visible_height = 2 * Math.tan((Math.PI / 180) * camera.fov / 2) * distance_from_camera; 如果我们按一定比例增加窗口高度, 么我们想要的是在所有距离的可见高度都以相同百分比增加。 不能通过改变摄影机位置来做到这一点,相反,您需要更改摄影机的视野范围。 示例

我的应用窗口在iOS设备上无限增长,如何修复它?

如果将Verge3D应用嵌入在iframe元素中, 则可能会在iOS设备上遇到特定问题, 这会导致iframe的大小不断增加,超出浏览器窗口的范围。 这最终可能导致WebGL崩溃。

要解决此问题,您可以使用以下代码段, 该代码段将iframe调整为页面主体的尺寸, 以防止该iframe超出页面范围。

<script> if (/(iPad|iPhone|iPod)/g.test(navigator.userAgent)) { var iframe = document.getElementById('myIframe'); function resize() { iframe.style.width = getComputedStyle(document.body).width; iframe.style.height = getComputedStyle(document.body).height; iframe.setAttribute('scrolling', 'no'); } iframe.addEventListener('resize', function(e) { resize(); }); resize(); } </script>

键盘控制对嵌入iframe的应用不起作用。

当页面上的其他HTML成为焦点时,就会发生这种情况。要解决此问题,请尝试以下代码: document.getElementById("my_iframe_id").focus(); 其中 my_iframe_id 是您的iframe元素的ID。

还有更多的问题?

欢迎您随时在 论坛 上提问!您还可以加入中文用户社区 QQ群(171678760),在线寻求帮助。