快速上手

大约 2 分钟

快速上手

从未了解三维应用开发的前端程序开发人员，一般初次接触三维概念、三维对象、三维数学公式时，往往会显得非常不适应，为了更快地让开发者直接上手，本章主要任务就是带领开发者熟悉三维开发的三个主要步骤：

依赖库引用；
初始化配置；
三维程序逻辑实现。

本节我们将创建一个三维视图，并添加网格和一个三维盒子(Box)，步骤如下：

引入样式和依赖脚本文件
准备一个具备宽度和高度的DIV
初始化一个Viewer对象，并设置网格参数
添加一个Box三维盒子

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    {/* 引入样式和依赖脚本文件 */}
    <link rel="stylesheet" href="./vt/style/vt.css">
    <script src="./vt/libs/three.js"></script>
    <script src="./vt/vt.js"></script>

    {/* 设置DIV高度和宽度 */}
    <style>
        html, body, #container {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    {/* 准备一个DIV，且设置样式，见style */}
    <div id="container"></div>

    <script>
        {/* 初始化一个Viewer对象 */}
        var viewer = new VT.Viewer({
            container: "container",
            scene: {
                helper: {
                    grid: {
                        visible: true,
                    }
                }
            },
        });

        {/* 创建一个三维盒子 */}
        var box = new VT.Box({
            position: [0, 0.5, 0]
        });

        {/* 添加到场景中 */}
        viewer.scene.add(box);

    </script>
</body>
</html>

上述代码是一个完整的HTML页面，即可实现一个有Box的三维场景。

Vue

Vue组件的实现方式如下，确保sdk在public下

<template>
    <div class="container" id="container3d"></div>
</template>
<script>
import PL from "popoload";

export default {
    name: "Viewer3D",
    mounted() {
        this.loadThing();
    },
    methods: {
        loadThing() {
            PL({
                libs: [
                    './vt/libs/three.min.js',
                    './vt/vt.min.js'
                ],
                styles: [
                    './vt/style/vt.css'
                ],
                loaded: () => {
                    // 加载完成，执行三维程序逻辑
                    this.initViewer();
                }
            });
        },
        initViewer() {
            {/* 初始化一个Viewer对象 */}
            var viewer = new VT.Viewer({
                container: "container3d",
                scene: {
                    helper: {
                        grid: {
                            visible: true,
                        }
                    }
                },
            });

            {/* 创建一个三维盒子 */}
            var box = new VT.Box({
                position: [0, 0.5, 0]
            });

            {/* 添加到场景中 */}
            viewer.scene.add(box);

            // 全局属性挂接
            window.viewer3d = viewer;

            // 上一级组件loaded方法
            this.$emit("loaded", viewer);
        }
    }
}

</script>
<style>
html, body, 
.container {
    height: 100%;
    padding: 0;
    margin: 0;
}
</style>

这样我们就创建了一个有Box的三维场景。