使用javascript

得益于拼图，您不需要写任何一行代码就可以实现典型webGL应用程序的大多数的功能。但是，仍有一些特殊情况需要使用javascript。比如，利用第三方的库或实现一些单纯依赖拼图无法实现的功能。

原则上可以使用任何文本编辑器来编写代码，但是那些支持语法高亮和行号的编辑器会更加便利，比如Notepad++或Atom。

方法1（基础）

假设你使用AppManager（使用默认配置选项）创建了应用程序，并且命名为myawesome_app。在_erge3d/applications folder and then to my_awesome_app文件夹下，找到my_awesome_app.js，并使用喜欢的文本编辑器打开这个javascript文件。

找到“runCode”-它在文件中的位置如下：

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

你可以在声明中添加一些代码（在花括号之间），那会变成：

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

现在，如果你保存.js文件，然后运行app，你会发现……什么也没有，除非打开浏览器控制台。后者一般使用F12打开（ Chrome, Firefox 在Windows, Linux 平台）。Mac下在Chrome中使用View > Developer > JavaScript Console menu (Option-Cmd-J) ，或者在Safari中使用Develop > Show Error Console menu (Option-Cmd-C) 。

使用javascript - 图1

通过代码你可以改变场景中的一些东西，比如，移动默认的Verge3D盒子（3ds max中名为“Box001”，Blender中名为“Cube”）……

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

或凭空新建一个新的材质：

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

使用javascript - 图2

查看Verge3D代码示例获得启发。点击View source按钮查看示例源码。

使用javascript - 图3

方法2（进阶）

在runCode函数中添加代码使其在应用程序加载时执行，一劳永逸。但是当你需要一段代码被用户行为触发，该怎么做呢？比如，用户点击一个3D物体，然后那个物体会发生一些事情。

借助拼图，而不是纯代码，可以更轻松地实现这种情况。您可以使用拼图捕获用户事件，并仅使用代码执行特殊操作。这种方法可以为您节省大量时间。

使用喜欢的文本编辑器打开应用程序的.js文件（如，位于verge3d/applications/my_awesome_app的 my_awesome_app .js）。查找“prepareExternalInterface ”并在声明中（花括号内）添加一个函数，看起来像这样：

  1. function prepareExternalInterface(app) {
  2.     app.ExternalInterface.myJSFunction = function() {
  3.         console.log('Running my JavaScript function!');
  4.     }
  5. }

如你所见，函数被添加到了app.ExternalInterface命名空间-这对于拼图来说至关重要。如有必要，你可以用不同的名字添加更多函数到这个命名空间。

你现在可以从拼图中触发名为“ myJSFunction ”的函数。为此，需要打开拼图编辑器，在工作区添加一个叫做call JS function的拼图。默认会触发名为“myJSFunction”的函数，所以如果你的函数命名不同，需要在这个拼图的文本区输入正确的函数名。

使用javascript - 图4

现在如果保存拼图并运行app，拼图脚本会触发添加的函数，并且在浏览器控制台会出现信息。

使用javascript - 图5

可以添加更多拼图，让函数仅当用户点击一个物体时运行。

使用javascript - 图6

如果你要从拼图传递一个参数到javaScript函数（比如，用户点击物体的名字），可以通过增加一个输入插槽来修改callJSFunction拼图。

使用javascript - 图7

还可以修改代码以使函数接受参数作为其参数：

  1. function prepareExternalInterface(app) {
  2.     app.ExternalInterface.myJSFunction = function(myObject) {
  3.         console.log(myObject);
  4.     }
  5. }

因此，将以编程方式生成的材质分配给所选对象的代码段可能如下所示：

  1. function prepareExternalInterface(app) {
  2.     app.ExternalInterface.myJSFunction = function(myObject) {
  3.         var obj = app.scene.getObjectByName(myObject);
  4.         obj.material = new v3d.MeshPhongMaterial({ color: '#00DD00', emissive: '#880000' });
  5.     }
  6. }

方法3（高级）

这种方法适合有经验的程序员，他们希望开始时只需要一个最小的工作代码片段。

创建新应用程序时，将App Type切换为Custom：

使用javascript - 图8

这将导致一个更简单的项目结构，没有拼图编辑器连接到您的应用程序，app .js文件将只包含几行代码：

  1. 'use strict';
  3. window.addEventListener('load', function() {
  5. var app = new v3d.App('container', null, 
  6.     new v3d.SimplePreloader({ container: 'container' }));
  8. var url = 'my_awesome_app.gltf';
  10. app.load(url, function() {
  11.     app.enableControls();
  12.     runCode();
  13. });
  15. function runCode() {
  16.     // add your code here, e.g. console.log('Hello, World!');
  18. }
  20. });

这种类型的应用程序非常简单，但它们仍然能够以.gltf格式加载场景（带加载器），并为用户提供标准的摄像机控制。

您可以按照方法＃1中的描述在“runCode”函数中添加代码。当然，您可以完全彻底修改此应用程序模板 – 例如，您可以丢弃App类，使用其他一些文件格式加载场景或以某种特定方式设置控件。

方法4（硬核）

您可以从verge3d / build文件夹中获取v3d.js文件，将其链接到.html文件并开始编码！您认为代码示例当初是如何创建的？