安装

大约 1 分钟

安装

为了让三维应用开发更便捷，SDK包中提供了初始化和使用三维引擎必要且常见的资源文件，包括贴图、天空盒子、解压库等资源，主库文件目前暂未提供es6版本，SDK包均使用zip包方式提供给开发者。

获取

在交付包中的sdk目录下获取SDK脚本和依赖库，一般包括如下内容：

文件/夹	说明
vt.min.js	主脚本
style	样式文件目录
resources	资源文件目录
libs	第三方脚本库目录

页面引用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">

        {/* 引用样式文件 */}
        <link rel="stylesheet" href="vt/style/vt.css">

        {/* 引入依赖库 */}
        <script src="vt/libs/three.min.js"></script>

        {/* 引入主类 */}
        <script src="vt/vt.min.js"></script>
    </head>
</html>

按需加载

浏览器HTML页面中的脚本和样式文件一般是线性加载，VT直接加载依赖库和样式文件大小约3M左右，在服务器开启gzip模式下，预计在1.5M~2M，在网络带宽允许的情况下，尤其是在内网环境下，推荐直接使用浏览器加载方式。

目前许多B/S架构的应用大部分为SPA应用，如果应用中三维程序嵌入的层级或模块较深，为了提高首页加载效率，不推荐在浏览器直接加载，而使用在组件中按需加载的方式，推荐使用脚本和样式文件第三方加载库，如popoloadopen in new window，使用方式如下：

popoload

npm i popoload

或

<script src="./js/popoload.min.js"></script>

在Vue组件中的Mounted中加载调用如下代码（React同理）：

PL({
    libs: [
        './vt/libs/three.min.js',
        './vt/vt.min.js'
    ],
    styles: [
        './vt/style/vt.css'
    ],
    loaded: function() {
        // 加载完成，执行三维程序逻辑
        console.log("loaded");
    }
});