页面集成

三维应用程序和其它页面集成可以使用iframe页面集成和组件集成方式，三维应用和其它系统集成尽量隔离开，不管是iframe集成方式还是组件代码集成方式，三维应用相关文件夹应独立出来，方便后期更新维护，即使整个三维目录替换，也不会影响原有工程文件。

注意

三维应用程序相对其它前端工程来讲，占用的文件空间较大，如使用git仓库管理代码，请注意三维程序部分占用的磁盘空间大小。

iframe集成

三维程序如果是独立编写，三维程序编写好后通常是一个独立的静态文件资源包，跟其它前端工程没有本质区别，此文件包可以复制到任何WEB容器位置，通过http访问，因此可以视之为独立的网页。

iframe作为被集成方，和集成方的通信使用iframe的父子通信方式，可查询iframe父子通信方式

提示

iframe页面和父页面必须同一域名下，否则产生跨域问题。

1. 父级页面监听消息

// 监听传来的message
window.addEventListener("message", (e)=> {
    let {type, fromSource} = e.data;
    if(type === "3d") {
        switch (fromSource) {
            case "3d-viewer":
                actionViewerHandle();  // 在收到这个message的时候要触发的函数
                break;
        }
    }
});

2. iframe页面发送消息

window.parent.postMessage({type: "3d", fromSource: "3d-viewer"}, "*");

组件方式集成

组件方式集成，视三维应用为一个组件，以Vue为例：

1. 引擎资源包放到public目录下，如public/thing；
2. 场景资源离线包也放到public下，如public/scenes/1001；
3. 在views下创建一个组件Viewer.vue实现页面逻辑

<template>
    <div class="container" id="container3d"></div>
</template>
<script>
// 安装 npm i popoload
import PL from "popoload";
import axios from "axios";

export default {
    name: "Viewer3D",
    mounted() {
        this.loadThing();
    },
    beforeUnmounted() {
        // 注销Viewer对象
        if(window.viewer3d) {
            window.viewer3d.destroy();
            window.viewer3d = null;
        }
    },
    methods: {
        loadThing() {
            PL({
                libs: [
                    './vt/libs/three.min.js',
                    './vt/vt.min.js'
                ],
                styles: [
                    './vt/style/vt.css'
                ],
                loaded: () => {
                    // 加载完成，执行三维程序逻辑
                    this.initViewer();
                }
            });
        },
        initViewer() {
            // 请求应用场景配置文件
            axios({
                method: 'get',
                url: "./scenes/1001/scene.json",
                dataType: "json",
                crossDomain: true,
                cache: false
            }).then(res => {
                res.container = "#container3d";
                {/* 初始化一个Viewer对象 */}
                var viewer = new VT.Viewer(res);

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

                // 上一级组件loaded方法
                this.$emit("loaded", viewer);
            }).catch(error => {
                reject(error)
            })
        }
    }
}
</script>
<style>
html, body, 
.container {
    height: 100%;
    padding: 0;
    margin: 0;
}
</style>