在Verge3D应用中使用JavaScript

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

方法#1（基础）

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

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

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

为了从"exec script"内部访问变量和过程拼图，您可以使用 VARS 和 PROC 内置功能。请参阅exec script文档了解更多详情。

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

方法#2（标准）

如果您想拥有比"exec script"拼图所能提供的更多的控制权，那么此方法适合您。它使用默认的 Standard 应用模板（Standard Light 或 Standard Dark）：

假设您使用应用管理器（默认配置选项）创建了一个名为 my_awesome_app 的应用。转到 applications 文件夹，然后进入 my_awesome_app 文件夹，使用您最喜欢的文本编辑器打开JavaScript文件 my_awesome_app.js。

您可以使用任何文本编辑器添加JavaScript代码，但如果您的编辑器支持语法高亮和行号显示（如Notepad++或VS Code），会更加方便。

搜索"runCode"——此位置在文件中应该如下所示：


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

    }

您可以在其声明内部（在花括号之间）添加代码，如下所示：


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

现在，保存 .js 文件并运行应用，在打开浏览器控制台之前不会看到任何反应。浏览器控制台通常可以用F12键（Windows/Linux上的Chrome、Firefox）打开。在Mac电脑中，Chrome使用 View → Developer → JavaScript Console 菜单（快捷键：⌥-⌘-J），Safari使用 Develop → Show Error Console 菜单（快捷键：⌥-⌘-C）。

通过代码您可以对场景做一些改变，比如移动默认的Verge3D立方体（在Blender中名为"Cube"，在3ds Max中名为"Box001"，在Maya中名为"pCube1"）...


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

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


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

有关在Verge3D应用中使用JavaScript的更多信息，请参阅程序员指南。

方法#3（紧凑型）

这种方法适合有经验的程序开发人员，希望从一个最小的工作代码片段开始工作。流程与 Standard 模板类似，但这次我们选择 Code-Based 模板来创建新应用：

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


    'use strict';

    const CONTAINER_ID = 'v3d-container';
    const SCENE_URL = 'template.gltf';

    const preloader = new v3d.SimplePreloader({ container: CONTAINER_ID });
    const app = new v3d.App(CONTAINER_ID, null, preloader);

    app.loadScene(SCENE_URL, () => {
        app.enableControls();
        app.run();
        runCode();
    });

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

此类应用非常简单，但它们仍然能够加载 .gltf 格式的场景文件（带预加载器），并为用户提供标准摄影机控件。

您可以按照方法#2中的描述在"runCode"函数中添加代码来继续编程。当然，您也可以完全重构此应用模板：用自己的实现替换App类，使用不同的3D文件格式加载场景，或以某种特定方式设置控件。

方法#4（硬核）

这种方法适合熟悉Three.js库的程序员，因为其API与Verge3D中使用的API类似。

从Verge3D安装路径的 build 文件夹复制 v3d.js 文件，将其链接到 .html 文件，然后开始编程吧！此外，还有一个NPM包可供使用。

与拼图交互

除了exec script之外，Verge3D还提供以下拼图与JavaScript之间的交互方式：

从拼图调用JavaScript过程: 正确定义的JavaScript过程可以通过call external function拼图由拼图执行。
从JavaScript调用拼图过程: 任何过程拼图都可以通过使用 puzzles 命名空间从JavaScript触发。请参阅此处了解更多信息。
消息传递: 此方法可用于跨域（多主机）环境。要从拼图向JavaScript发送消息，您可以使用call method / postMessage拼图。要捕获从JavaScript发送的消息，请使用on event of拼图在 window 对象上注册 "message" 处理程序。

从拼图中获得灵感

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

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

遇到问题？

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