【verge3d】新手指南

文章

verge3d是一款能够适用不同用户需求的通用软件。本教程描述了各种工作流程中的一种,所以就把它当成一个友好的建议吧。有一个前提,你需要有3D软件的使用经验,如3ds max或blender。

安装

安装教程见另一篇文章【verge3d教程】安装-blender版

App管理器

虽然你可以先创建3D场景再创建verge3d工程,但是我们建议你从创建verge3d 的app管理器开始。通过这步操作,你会了解你的文件是如何组织和存放的,这些文件是用于发布的重要文件。另外,你还会在3D场景之外通过浏览器运行和加载网页应用程序,这是后面要做的事。

app管理器是基于网页的工具,当你在”verge3d”菜单下选择“App Manager”选项时(3dsMax)或者直接点击相应的按钮(Blender)时,app管理器会在浏览器中打开。浏览器使用的是系统默认的,你可以在系统设置中修改。任何现代的浏览器都能正常运行,google chrome最新版效果最好。

你可以从app管理器右侧面板创建一个新的工程。仅需输入工程名称(默认的My Awesome App也可以),然后点击”Create App”。其它选项保持默认就好。

完成操作后,在verge3d安装目录下的”applications”文件夹下,会创建一个刚才输入名称为命名的文件夹。你可以查看这个文件夹下的内容,但是没有必要,因为你可以通过app管理器打开app文件。

完成工程的创建后,回到app管理器页面,你的工程名称会出现在列表中。现在你有几种方式操作你的app:直接运行,查看场景,创建交互,发布。

运行程序

你可以随时点击verge3d图标来运行程序,蓝色的和绿色的都是对的。蓝色图标会运行程序的最终结果,包括拼图代码和编程代码。相反,绿色图标只打开和导出3D场景。

打开一个新创建的app,会显示一个盒子。如果显示”This site can’t be reached” 表明,你不小心关闭了你的3D程序和基于它的开发服务器。这种情况你需要重新打开3dsMax或者Blender。

另一种提示信息虽然罕见,但是如果出现”Your graphics card does not seem to support WebGL.”,这说明你正在使用一个较老的浏览器或者不被支持的浏览器,如ie。或者你的显卡或显卡驱动被浏览器列入了黑名单。尝试安装Google Chrome浏览器,更新驱动或者干脆另找一台电脑吧。

现在你不只可以简单地通过按住鼠标左键查看,通过鼠标滚轮缩放。通过拼图,你可以添加各种脚本,这样你的3D场景会变成一个直接的可交互的网页应用程序。

图形

点击3d max或blender图标,会打开各自的场景文件。一个工程里可以有多个3D场景文件,但是只有导出3D场景的文件被认为是主文件,它将会加载到你的应用程序中。

3D文件可以常规地从”File > Open” 打开,或者直接双击打开。

需要重点理解的是,一个应用只能加载导出的场景,而不是原始的3D场景文件。所以,每次你在原文件上做的修改,只能重新导出才能在应用中看到所做的修改。导出操作在主菜单的verge3d菜单(3dsmax),或者从file>export菜单(blender)。如果操作频繁,你可以为这个操作指定一个快捷键。

你可以把你的场景文件导出到你的应用程序文件夹下,通过glTF格式。

你可以在浏览器中预览你的场景,这样不需要导出。直接点击“sneak peek”菜单选项(3dsmax)或者这个按钮(blender)。这个操作会导出一个临时文件夹,并且立即在你的浏览器中展示你的场景。当新建工程不可行的时候可以用这个办法快速测试。

对于从传统游戏开发流程中过来的用户,在verge3d中进行图形编辑一点也不困难。引擎支持光线追踪和百万面多边形,并且,你还能获得真实的效果,包括:实时材质,同时支持标准材质和pbr材质,以及低到中级模型。

在三维软件的视窗中任何修改都可以直接显示出来,这一点非常有帮助。与你最喜欢的建模工具的即时可用性相比,视口预览功能显著地加速了与“外部”游戏引擎(如虚幻或unity)相比的图形工作流程。说到这里,在你的产品开发中,你不需要高级的艺术修养或者寻求他人的协助了,对吗?

在app管理器中,当工程创建的时候,视窗视频功能就已经默认存在了(3ds max/blender)。看下图的信息,如果你没有使用app管理器创建资源文件,应如何开启视窗预览。

在blender中开启窗口预览,在”Viewport Shading” 菜单中选择”Material” 。在”Shading”中选择”GLSL”,并且在“Display”中打开”World Background” ——这些面板都可以在”Properties” 面板中找到(快捷键n)。你也可以打开 “Backface Culling”,隐藏背面。

为熟悉你掌握的基础知识,你可以在场景中新建一个茶壶或者猴头,导出glTF格式,通过点击app管理器上的蓝色图标来运行程序。

为了快速刷新,你可以不关闭浏览器中运行的应用程序。每次当你重新导出场景时,在浏览器中使用快捷键“F5”,会重新加载程序。使用alt+tab(苹果系统command+tab)快捷键可以在浏览器和3D程序间快速切换。

拼图

到现在为止,我们把verge3d当做一个理想的网页导出工具,它仅仅只是在浏览器中生成了实时的3D显示。但是,你还可以做更多,更多。使用拼图,verge3d自带的强大脚本代码编辑工具,你不需要成为程序员就可以编程。

在app管理器中,在你的app名字旁边点击”Puzzles”图标,会在应用的上面打开一个拼图编辑器。然后,你可以从左边的工具栏中向工作区拖拽拼图。把拼图组合起来可以创建一个脚本,脚本可以在你的场景文件打开的时候运行。

首先,从”Events” 类中拖一个”when clicked” 拼图,然后从“Selectors”拖进来一个”Select an object” 拼图。

把它们拼到一起,这意思就是你的应用将等待直到用户点击一个你从下拉列表中选择的物体,然后再做什么事,在“do”下面添加。

在这个小例子里,从”Objects” 类中,拖一个”hide” 拼图,然后插到“do”的位置。

现在,当用户点击物体,它会隐藏。点击 “Run” 编译你的程序,然后检查点击盒子时,是否起作用。

现在你已经有一个了简单的脚本了。让我们来检查一下在拼图外它是如果工作的。点击“Save”按钮,回到app管理器界面。

在app管理器正常运行你的应用,看看你的脚本是否起作用。恭喜,你现在是程序员了!

拼图之外

拼图提供了很多函数,但是如果你想要做一点特别的事呢?举个例子,将你的应用作为电商网站的一部分,必须和网站环境进行通讯。对于这种情况,verge3d提供了一个称为”External Interface”的功能,它可以允许拼图与JavaScript程序代码进行双向交流。

基本的操作是,你可以从拼图中调用一个正确注册的JavaScript函数,反之亦然,js代码可以触发你的”JSCallback”拼图(位于“事件”)。

新的函数可以通过将它们添加到已经存在的prepareExternalInterface() 内部的application .js文件中来注册:

1
2
3
4
5
6
<span class="com">// Register "myJSFunction" to be called by Puzzles</span>
<span class="kwd">function</span><span class="pln"> prepareExternalInterface</span><span class="pun">(</span><span class="pln">app</span><span class="pun">)</span> <span class="pun">{</span><span class="pln">
app</span><span class="pun">.</span><span class="typ">ExternalInterface</span><span class="pun">.</span><span class="pln">myJSFunction </span><span class="pun">=</span> <span class="kwd">function</span><span class="pun">(</span><span class="pln">arg</span><span class="pun">)</span> <span class="pun">{</span><span class="pln">
alert</span><span class="pun">(</span><span class="pln">arg</span><span class="pun">);</span> <span class="com">// prints the passed parameter in a modal window </span>
<span class="pun">}</span>
<span class="pun">}</span>

另一方面,如果你需要触发你的拼图,您可以简单地从在.js文件中已经存在的runCode() 函数中调用具有相同名称的方法:

1
2
3
4
<span class="com">// Trigger the "myJSCallback" puzzle with an argument</span>
<span class="kwd">function</span><span class="pln"> runCode</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">
app</span><span class="pun">.</span><span class="typ">ExternalInterface</span><span class="pun">.</span><span class="pln">myJSCallback</span><span class="pun">(</span><span class="str">'Hello, Puzzles!'</span><span class="pun">);</span>
<span class="pun">}</span>

发布

你已经创建了一个网页应用程序,可能你希望数十亿的互联网用户前来查看。如果你拥有一个网站,这将不是一个问题,简单地上传整个程序文件夹到你的服务器(例如,通过FTP或SSH)。一旦部署,你可以在网站上为应用的HTML文件提供一个链接,或者通过iframe嵌入到一个网页。

1
<span class="tag">&lt;iframe</span> <span class="atn">width</span><span class="pun">=</span><span class="atv">"1024"</span> <span class="atn">height</span><span class="pun">=</span><span class="atv">"640"</span> <span class="atn">allowfullscreen</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">"https://www.example.com/my_awesome_app/my_awesome_app.html"</span><span class="tag">&gt;&lt;/iframe&gt;</span>

但是如果你没有机会成为一个站长怎么办呢?实际上,在app管理器上有一个按钮(地球的图标)可以解决这件事。点击那个按钮会上传你的应用到verge3d网络,一个在亚马逊服务器上的云存储和CDN加速服务。

上传完成后,它会免费提供给你一个链接,用于任何用途(博客,论坛,邮件)。它还可以生成HTML代码,将你的应用程序嵌入到第三方网站中,就像你用YouTube视频一样。

更新

verge3d目前正处于活跃的发展中,不时会有定期发布。我们建议您跟上开发周期,及时更新您的verge3d分发和应用程序。

更新的最“干净”方法是通过重新命名当前verge3d文件夹(例如从“verge3d”到“verge3d_old”),并以相同的名称(即“verge3d”)解开最新文件夹中的最新包。
虽然看起来很不方便,但还是建议用”Create App” 按钮初始化你的应用程序,而不是从旧的verge3d文件夹复制应用程序文件夹。这样,您的应用程序将接收来自更新的应用程序模板的最新改进。如果你只复制你的应用程序,它们仍然可以工作,但是使用旧的模板。
在初始化、复制.max或.blend文件之后,将所有的纹理和拼图脚本文件(称为”visual_logic.xml”)从旧的应用程序文件夹(位于”verge3d/applications”)到新创建的App文件夹。如果遇到重复文件,覆盖它。
最后,您应该执行导出到glTF,以便导出的格式接收最新的更新。如果你正在使用拼图,一定要重新保存你的脚本,使它们与最新版本的代码相匹配。

许可证

在获得许可证后,您将在电子邮件中发送许可证信息(下面的密钥是一个随机示例)。

许可证密钥将激活verge3d实例,并将删除所有应用程序的试用警告。

在每次更新到新版本的时候,你都需要输入许可证密钥。

支持

这只是一个简短的概述verge3d工作流程,许多主题留到未来再议。我们邀请您加入verge3d论坛,那里我们将很高兴地解答您遇到的问题。

(原文:https://www.soft8soft.com/docs/#manual/introduction/Beginner-Guide)

文章
【verge3D】iframe透明背景设置

实现如下效果: 将web3D内容嵌入到网页上。 步骤: 1.创建v3d工程,名称为transparent,在blender中预备场景,导出glTF 2.逻辑编辑器中Init标签下,设置背景透明 3.编辑v3d工 …

文章
【verge3D】多渲染窗口(小窗口)的实现

实现如下效果:  http://zjbcool.com/static/app/camera_ctl/camera_ctl.html 步骤: 1.blender中添加新相机命名为camera1,设置相机尺寸为1024*1024 2.在html css中定义渲染窗口的大小和 …

文章
使用mixamo动捕数据在blender中实现写实动画

Mixamo是adobe旗下的一个基于web的在线3D人物动画制作平台,最重要的是它提供了丰富、免费的动作捕捉数据供下载。下面介绍如何将动捕数据下载并导入blender制作动画。