在Verge3D应用中使用JavaScript

借助拼图的优良特性,您可以无需写任何代码即实现常规WebGL应用中的大多数功能。但在某些特殊情况下,您依然需要使用JavaScript——比如,整合第三方编程库,或实现一些仅用拼图无法实现的重要特性。

您可以使用任何文本编辑器来编辑HTML/CSS代码。但使用支持显示行号及语法高亮的工具会提高工作效率,比如Notepad++或VS Code等。

方法#1(基础)

在拼图中合并javascript代码的最简单的方法是使用 exec script(执行脚本)拼图。它有一个内置的功能齐全的文本编辑器,能够进行语法高亮显示、语法检查、代码折叠和许多其他特性。

这个拼图所做的就是立即执行一个javascript代码片段。使用“exec script”的优点是:

为了访问 变量规程 拼图,您可以使用“exec script”拼图内置的 VARSPROC 。请参阅 "exec script" (执行脚本) 拼图的文档页面

如下图示例,使用 "exec script"拼图实现了在场景中单击对象时改变材质的功能:

方法#2(标准)

如果您想拥有比"exec script" (执行脚本) 拼图所能提供的更多的控制权,可以采用此方法。假设您使用了默认的 标准 应用模板(标准浅色标准深色) :

如果您使用了应用管理器的默认设置,并在其中创建了一个名为 my_awesome_app的新应用。打开 verge3d/applications 目录,找到 my_awesome_app 文件夹,使用您最喜欢的文本编辑器打开JavaScript文件 my_awesome_app.js

搜索"runCode" —— 文件中其位置应该如下所示:

function runCode(app) { // add your code here, e.g. console.log('Hello, World!'); }

您可以在其声明内部(在花括号之间)添加代码,就像这样:

function runCode(app) { // add your code here, e.g. console.log('Hello, World!'); console.log('Just added some JavaScript!'); }

现在保存 .js 文件并运行应用,不会看出任何反应,但打开浏览器控制台后您便会注意到上面那段代码已经起作用了。浏览器控制台通常可以用F12键(Linux和Windows上的Chrome与火狐 )打开。在Mac电脑中,Chrome使用 View > Developer > JavaScript控制台菜单(快捷键:Option-Cmd-J)开启,Safari需使用 Developer > Show Error Console菜单(快捷键:Option-Cmd-C)开启浏览器控制台。

通过代码您可以对场景做一些改变,比如移动默认的Verge3D立方体(在3ds Max和Maya中名为“Box001”,在Blender中名为“cube”)...

function runCode(app) { var obj = app.scene.getObjectByName('Cube'); obj.position.x = 2; }

... 或者凭空创造一种新材质:

function runCode(app) { var obj = app.scene.getObjectByName('Cube'); obj.material = new v3d.MeshPhongMaterial({ color: '#00BB00', emissive: '#550000' }); }

请查看 Verge3D代码示例 ,获得更多灵感。点击 View source 按钮,,可以打开示例的原始代码。

方法#3(紧凑型)

这种方法适合有经验的程序员,他们希望从一个最小的工作代码片段开始工作。流程与选择 标准 模板类似,但这次我们选择 基于代码的 模板来创建新应用:

这将预设一个更简单的项目基础结构,应用中不会附带拼图编辑器,对应的 .js 文件里也只包含短短几行代码:

'use strict'; window.addEventListener('load', function() { var app = new v3d.App('container', null, new v3d.SimplePreloader({ container: 'container' })); var url = 'my_awesome_app.gltf'; app.load(url, function() { app.enableControls(); runCode(); }); function runCode() { // add your code here, e.g. console.log('Hello, World!'); } });

此类应用非常简单,但它们仍然能够加载 .gltf 格式的文件,带有网页预加载器,并在应用中提供了标准摄影机控件。

您可以通过在“runcode”函数中添加代码来继续编程,如同方法#2 。当然,您也可以完全修改这个应用模板——例如,您可以丢弃App类,在场景中加载其他文件格式,或以某种特定的方式设置控件。

方法#4(硬核)

这种方法适合熟悉Three.js库的程序员,您可以在Verge3D中使用与之基本相同的API。

verge3d/build 文件夹复制 v3d.js 文件,将其链接到 .html 文件,然后 开始编程吧!不然,您以为 代码示例 最早是怎么写出来的?

从拼图中获得灵感

这不是一种方法,而是一种提示。事实上,当您每次单击Puzzles编辑器中的Save按钮时,它都将生成一个自包含的、人类可读的JavaScript模块,并以visual_logic.js命名保存在您的应用文件夹中。

这样,您就有了一个对应特定JavaScript API工作方法的可运行示例,即并可重新使用自己感兴趣的拼图所生成的代码片段。

遇到问题?

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