1. Home
  2. Docs
  3. Verge3D用户手册
  4. 通用话题
  5. 使用javascript

使用javascript

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

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

方法1(基础)

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

找到“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文件,然后运行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) 。

通过代码你可以改变场景中的一些东西,比如,移动默认的Verge3D盒子(3ds max中名为“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按钮查看示例源码。

方法2(进阶)

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

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

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

function prepareExternalInterface(app) {
    app.ExternalInterface.myJSFunction = function() {
        console.log('Running my JavaScript function!');
    }
}

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

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

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

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

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

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

function prepareExternalInterface(app) {
    app.ExternalInterface.myJSFunction = function(myObject) {
        console.log(myObject);
    }
}

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

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

方法3(高级)

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

创建新应用程序时,将App Type切换为Custom:

这将导致一个更简单的项目结构,没有拼图编辑器连接到您的应用程序,app .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格式加载场景(带加载器),并为用户提供标准的摄像机控制。

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

方法4(硬核)

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

Was this article helpful to you? Yes No