编程基础

本节的目的是为Verge3D做一个简要介绍。我们将首先使用旋转立方体创建新的应用程序。

准备工作

在使用Verge3D之前，您需要使用Verge3D App Manager创建一个新应用程序。

编程基础 - 图1

在Create new App面板上选择Custom App选项，然后单击Create App按钮。App Manager创建以下HTML文件：

<!DOCTYPE html>

<html lang="en">

<head>

<title>Verge3D Application</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

<link rel="stylesheet" type="text/css" href="my_awesome_app.css">

</head>

<body>

<div id="container"></div>

<script src="v3d.js"></script>

<script src="my_awesome_app.js"></script>

<script src="visual_logic.js"></script>

</body>

</html>仅需以上代码。下面的所有代码都进入my_awesome_app.js脚本。

创建App

要实际使用Verge3D显示内容，我们需要做三件事：创建一个新的App，加载你的glTF场景并启用基本控件：

'use strict';

window.addEventListener(‘load’, function() {

var app = new v3d.App(‘container’, null,new v3d.SimplePreloader({ container: ‘container’ }));

var url = ‘template.gltf’;

app.load(url, function() {app.enableControls();runCode();});

function runCode() {// add you code here, e.g. console.log(‘Hello, World!’);

}

});

您可以通过几下几种方式扩展您的第一个程序：编辑场景，使用Verge3D拼图工具或使用JavaScript创建自己的代码。