常见问题

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

授权与支持

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

一般来说，购买后很短时间内（几分钟至几小时，取决于您的时区），您将会收到一封带有许可证密钥的电子邮件（如果您从国际商店购买，将收到来自Soft8Soft的英文邮件，如果您从中国商店购买，将收到来自FunJoy.Tech的中文邮件）。复制邮件中的密钥并粘贴到应用管理器的 Licensing Manager 对话框中，这将使您的Verge3D试用版转换为授权版本，并从您的项目中去除水印。

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

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

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

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

试用版仅供评估之用。不得用于生产环境——无论是商业还是非商业目的。

因此，您可以使用试用版来学习和提升技能，也可以为您的主管创建模拟演示文档。但您不可以用于教育活动——您可以联系我们申请以优惠价格获取教育许可证（中国区域申请）。您不可以用试用版创建作品集，因为这也属于生产用途——请考虑购买Verge3D自由职业者版许可证。

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

怎样获得技术支持服务？

我们作为Verge3D企业版授权包的一部分提供技术支持服务。如果您拥有Verge3D自由职业者版或团队版许可证，或仍在评估试用Verge3D，您可以在论坛上寻求帮助。您也可以在丰疆科技网站购买中文技术支持。

Verge3D安全吗？是否符合EU安全标准？

首先，Verge3D是一个创建自托管Web应用的开发工具。部署到您自己的基础设施/Web服务器上由您自行决定。Verge3D的源代码随企业版或旗舰版许可证提供，因此可以由您的安全团队进行彻底审查。

至于Verge3D Network，我们的一键发布解决方案，它基于Amazon Web Services (AWS)构建。上传的应用程序位于EU区域的服务器上。AWS满足各种全球和欧洲行业合规标准，如SOC 1-3、ISO 27001、ISO 27017、ISO 27018、HIPAA、PCI DSS等。请参阅此处了解更多信息。

常见问题

什么是WebGL？

WebGL(网络图形库)是一种用于在浏览器中渲染交互式3D图形的技术。WebGL可以在桌面电脑和智能手机的网站上直接运行，无需安装其他软件。然而这是一项非常极客的技术，即使是渲染一个旋转的立方体，也需要大量的时间和专业知识。Verge3D隐藏了这些复杂的内容，让非编程人员——艺术家、工程师或教育工作者——也能轻松创建丰富的Web交互内容。

WebGL和WebGPU有什么区别？

这两种技术的创建目的相同——在Web上渲染交互式3D图形。区别在于WebGL已经成熟并获得几乎全面的支持，而WebGPU仍被视为实验性的，尚未获得广泛的生态系统支持。

WebGPU旨在成为WebGL的底层、更高性能的替代方案。然而，对于典型的3D Web用例，它并不比WebGL提供任何显著的优势。Verge3D在底层使用WebGL，但我们也在关注WebGPU的发展。

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

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

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

为让您更易入手，我们不要求您了解任何有关服务器端的知识。这就是为什么我们在Verge3D中实现了3个服务器端解决方案：

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

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

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

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

必须联网才能使用Verge3D吗？

Verge3D工具包安装在本地计算机上，不需要互联网连接即可运行。唯一需要互联网连接的功能是在Verge3D Network上发布已完成的应用。

此外，为了帮助网络条件不稳定或带宽较低的用户，我们提供了离线版本的Verge3D用户手册和开发者参考。请在Verge3D发行版的 docs 目录中查找这些文档。

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

由于浏览器供应商实施的安全策略，Web应用无法访问从其他域加载的数据，包括从本地文件系统加载的数据。因此，您应该使用应用管理器（附带本地服务器）进行开发，或将Verge3D应用发布到Web服务器（或上传到Verge3D Network）以使其运行。此外，您可以通过为浏览器运行添加变量的方式跳过此限制，我们录制了一则演示视频，请在这里查看：使用浏览器直接打开Verge3D应用的方法。

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

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

请查看上方问题的回答。

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

可以，然而通过Electron将您的应用转换为功能完备的桌面应用会更加高效。

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

可以，Verge3D早期版本（4.0之前）附带了 IE 11 兼容模块：

请查看下载归档获取对应的链接。

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

当然，您可以以独立模式运行应用管理器。只需从桌面或"开始"菜单中单击对应的 Verge3D 图标。此启动器还会打开您的默认浏览器并自动导航到应用管理器。

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

您可以使用库功能来实现。

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

请查看此处的解决方案。

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

请查看性能瓶颈和优化场景以提高WebGL性能指南。

如何打开浏览器控制台？

Google Chrome

Menu → More Tools → Developer Tools 或

Windows/Linux上按 F12 键，或macOS上按 Option + ⌘ + J 快捷键。

在Developer Tools窗口中，选择 Console 标签。

Mozilla Firefox

Menu → Web Developer → Browser Console 或

Windows/Linux上按 F12 键，或macOS上按 Shift + ⌘ + J 快捷键。

Apple Safari

在偏好设置中激活 Developer Menu（Advanced 标签），然后 Develop → Show JavaScript Console 或

Option + ⌘ + C 快捷键。

Microsoft Edge

Menu → F12 Developer Tools 或

按 F12 键。

在Developer Tools窗口中，选择 Console 标签。

Microsoft Internet Explorer

已弃用，Verge3D不再支持。

Google Chrome on Android

无法直接在Android设备上显示浏览器控制台。请使用USB调试功能作为替代。亦或者，您可以通过网页前端方式添加一个模拟控制台，详细方法请阅读此文的第三部分：使用vConsole，为任何页面添加控制台。

Apple Safari on iOS/iPadOS

无法直接在iOS/iPadOS设备上打开浏览器控制台。您需要一台Mac系统并使用Web Inspector工具来访问控制台内容。亦或者，您可以通过网页前端方式添加一个模拟控制台，详细方法请阅读此文的第三部分：使用vConsole，为任何页面添加控制台。

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

可能原因如下：

您的开发系统是不区分大小写的，而远程系统是区分大小写的。
您为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

假设您在建模工具中打开场景文件，并将其导出为 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文件中重命名对应的文件。

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


      /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

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

转到 applications 文件夹，找到并重命名包含您的应用的文件夹（例如，将 my_awesome_app 改为 cool_3d_visualization）。

请勿将应用文件夹名称与应用管理器中显示的标题混淆。例如，"my_awesome_app"应用的标题是"My Awesome App"。此标题是通过将下划线替换为空格并将单词首字母大写来自动生成的。

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

转到应用文件夹。
为所有 html/css/js/gltf/bin/blend/max/ma/mb 资产文件指定新名称（详见此处）。请勿修改 v3d.js、visual_logic.xml 和 visual_logic.js 脚本！
打开并重新导出场景以更新导出的glTF资产中的路径。
打开主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_app 重命名为 cool_3d_visualization，则路径变为： <script src="cool_3d_visualization.js"></script> <link rel="stylesheet" type="text/css" href="cool_3d_visualization.css">
打开主JavaScript文件（例如 my_awesome_app.js）并使用首选应用名称更新以下行： sceneURL: params.load || 'my_awesome_app.gltf', 假设您要将 my_awesome_app 重命名为 cool_3d_visualization，则sceneURL行变为： sceneURL: params.load || 'cool_3d_visualization.gltf',
在应用管理器中启动该应用。如果应用没能正常运行，请打开浏览器控制台检查可能的错误。

此外，您也可以放心地更新重命名后应用的HTML元数据。有关如何执行此项操作，请查看此处了解更多信息。

建模与内容创作

什么是glTF？

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

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

我们在Verge3D中使用2.0版的glTF格式。不支持旧的1.0版本。

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

在某些情况下，您可能更倾向于使用简单的glTF兼容PBR材质，而非Blender、3ds Max或Maya基于节点的材质系统：

您可以使用export to gltf拼图将它们导出为glTF 2.0格式，并在各种模型查看器中预览/加载。
您可以使用export to usdz拼图将它们导出为USDZ，并在Apple设备上以AR模式预览。

使用glTF兼容材质的主要缺点是，您无法使用建模套件提供的原生材质系统。因此，可能难以达到相同水平的渲染质量。

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

glTF和GLB，哪一种格式更好？

这是同一glTF 2.0格式的两种变体。glTF容器更流行也更高效，因为它只存储元数据（场景/对象/材质等的参数）。所有外部数据，如几何体、动画和纹理都单独存储（在*.bin、*.jpeg、*.png文件中）。

GLB容器以二进制形式存储所有数据，并将元数据、几何体、动画和纹理打包到一个大文件中。因此，GLB更方便，因为您不需要处理一堆文件。

当我导出场景到Verge3D时，什么都没看到（或者只有背景）。

这可能由多种原因造成：

摄影机配置不正确。检查其近和远剪切距离以及目标点（如果您的摄影机使用 Orbit 控制类型）。
可能是 背面剔除 或法线方向错误。请检查您的材质和法线。
有时可能是硬件问题或软件错误导致几何体无法渲染。请检查浏览器控制台是否报告了任何错误。

Verge3D可以使用哪些3D文件格式？

理论上，通过使用第三方导入器，Verge3D可以加载各种3D格式。然而，创建3D Web内容的首选方式是使用由Soft8Soft扩展增强的glTF 2.0格式。此格式由随Verge3D提供的Blender、3ds Max或Maya导出器支持。

此外，标准应用模板的脚本基于 App 类，该类仅支持加载glTF文件。

Maya LT或Maya Creative是否支持？

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

Maya Creative也是如此，因为它不允许加载任何第三方插件。

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

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

如何将我的SolidWorks模型转换为WebGL？

从2016版起，3ds Max原生支持SolidWorks资产。只需导入您的SolidWorks文件到3ds Max，然后像其他Max场景一样导出到WebGL。

注意：请注意几何体优化，因为CAD模型对于Web而言往往过于繁重。导入文件时，从 Import Settings 对话框中调整 Mesh Resolution 设置。您也可以使用3ds Max修改器来减少模型上的多边形数量。

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

您有两个选择方案：

将Revit模型导出为FBX格式，然后导入到3ds Max、Maya或Blender。
使用3ds Max原生支持的Revit导入器。在Max安装过程中，别忘了激活 Autodesk Revit Interoperability 选项以启用此功能。

无论如何，请保持几何体的优化。我们建议整个场景使用100K-500K多边形面。

电子商务

如果我的Web开发经验有限，该如何快捷地创建基于Verge3D的3D配置器？

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

Ring: 最简案例，UI基于绑定在摄影机上的对象创建。
Recliner: 带有更高级的基于HTML的布局和使用Webflow编辑器制作的购物车。
Scooter: 最先进的配置器，包含1000000+种组合。与Recliner类似，UI使用Webflow编辑器制作。

此外，如果您会使用WordPress CMS，请注意WooCommerce Composite Products扩展，它可以帮助您轻松构建Verge3D友好的3D Web配置器。

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

首先，为您的产品创建3D可视化效果，然后您有以下3种选择：

PayPal。您可以使用paypal create order拼图将PayPal支付添加到您的应用，然后上传到Verge3D Network或其他主机。此方案最简单。
WooCommerce，数百万在线商店使用的电商解决方案。此方案免费，运行在WordPress之上。使用Verge3D for WordPress插件上传3D内容，然后设置其与WooCommerce配合使用。
由Verge3D for WordPress插件提供的自定义电商网站。订单通过place order或place order +拼图处理。与WooCommerce方案类似，它需要运行WordPress的Web服务器或托管平台。

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

我们推荐如下方法：

3D部分可以设计为常规Verge3D应用。配置引擎使用拼图实现（参见任何Verge3D配置器演示）。如果您需要一次性加载许多模型，应该将内容拆分为多个资产并使用append scene拼图按需加载。
价格可以使用拼图计算（客户端，不安全），或如果安全是关注点，最好在服务器上处理。如果您选择服务器方案，请在Verge3D for WordPress插件的管理界面中添加所有产品部件及其对应价格，然后使用place order +拼图在您的应用中生成订单。
Verge3D for WordPress插件附带可自定义的文档生成器，可用于创建报价单和发票。这些文档可以由销售经理下载，也可以手动或自动通过电子邮件发送给客户。

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

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

另外，在Jobs and Opportunities论坛上创建一个帖子也是个好主意。

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

做得好！您可以选择以下销售平台：

Gumroad或类似服务（Shopify、SendOwl、Sellfy）。使用简单但服务费稍高。
WooCommerce。需要WordPress Web服务器或托管方案。
Verge3D for WordPress。此方案支持可下载产品和PayPal支付。使用此方案，您可以在产品页面上直接演示您的插件如何运作。

使用拼图编程

应该先学习哪些拼图？

列表真的很短！

when clicked — 在用户点击某物时执行各种任务。
hide/show — 隐藏/显示对象，使您的场景可配置。
assign material — 创建基础配置器。
play animation — 为对象（或材质）添加动画。

有关使用示例，请查看 Simple Configurator 演示（也可在资源商店中找到）。

如何为我的应用设置密码保护？

在某些情况下，例如您不希望应用在最终发布前被看到，可以使用以下拼图以密码保护应用：

请将"123456"更改为更安全的密码。

此方法并非100%可靠，可能被破解。如需更安全地限制对应用的访问，请使用HTTP认证或实现服务器授权。

如何在移动设备上实现自定义第一人称控制？

基本上，您需要制作额外的屏幕对齐元素作为FPS角色控件。此类元素的最小集合是前进-后退控制（因为旋转可以通过触摸/拖动屏幕来执行）。

通常，您有两种方法在移动设备上渲染FPS控件：

使用定位在渲染3D场景上方的HTML元素。在此处查看关于此技术的更多信息。
使用与摄影机建立父子关系的平面或类似3D对象。为此，您只需在建模套件中将它们与摄影机对齐即可。

创建屏幕控件后，使用change local transform拼图来移动摄影机。例如，要前进/后退，可以使用以下逻辑：

要实现角色平移，使用相同的拼图，但沿 X 轴而非 Z 轴移动。

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

由于Verge3D会自行移动和控制注解对象的可见性，因此hide/show拼图不起作用。

取而代之，您应该使用对应于注解元素ID的 display CSS属性。例如，要隐藏/显示元素ID为 poi1 的注解，可以使用以下两个拼图：

基本上，将 display 设置为 none 会隐藏注解，而将 display 设置回 block 则会显示注解。

是否可以在VR模式下禁用（隐藏）光线/十字光标？

请使用get controller property拼图获取光线/十字光标对象，然后使用hide拼图将其隐藏：

如何递归地克隆对象？

您可能需要使用以下通过JavaScript实现的函数：

高级编程问题

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

Verge3D与Three.js API兼容吗？

Verge3D与Three.js API提供有限兼容性，因此现有的Three.js代码可以以最小的工作量移植到Verge3D。然而，您并不需要依赖编程来完成工作。在3D建模套件中正确设置场景以及使用拼图可以覆盖大多数用例。

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

要在GPU内存中存储常规的（非HDR）纹理，您至少需要

width x height x 4 x 1.333 bytes

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

此外，根据WebGL的实现，浏览器可能会在常规（系统）内存中至少存储一个纹理副本。

我的应用窗口在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)，在线寻求帮助。