在Verge3D应用中使用JavaScript

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

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

方法#1（基础）

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

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

这是一种只需处理拼图的方法（不需要编辑项目的.js文件）
这样的代码片段可以保存到拼图库中，并且可以轻松地在其他项目中复用

为了访问变量和过程拼图，您可以使用“exec script”拼图内置的 VARS 和 PROC 。请参阅 "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)，在线寻求帮助。