接入指南

接入指南

通过以下流程，完成临云镜前端引擎SDK的开发接入、基础配置和使用方式。SDK把编辑器和预览页的资源进行了分离，根据具体场景进行资源的引入，同时扩展功能会以插件形式根据需要单独引入。

编辑器资源：https://g.alicdn.com/sail-fe/alibaba-lyj-js-player-umd/1.1.5/editor.js

预览页资源：https://g.alicdn.com/sail-fe/alibaba-lyj-js-player-umd/1.1.5/runtime.js

插件资源：https://g.alicdn.com/sail-fe/alibaba-lyj-js-player-umd/1.1.5/plugin.js

<script type="text/javascript" src="https://g.alicdn.com/sail-fe/alibaba-lyj-js-player-umd/1.1.5/runtime.js"></script>
<script type="text/javascript">
    const { Meshviewer } = TideWanhuatong;
    const { Application, PanoVideoApp } = Meshviewer;
</script>

2、调用接口获取模型加载需要的数据

2.1 服务端实现上图部署结构中（2）部分HTTP接口

通过调用【查看场景详情】实现场景详情接口，例如 http://example.com/DetailScene，入参为场景id：Id

通过调用【场景预览数据】实现场景预览数据接口，例如 http://example.com/GetScenePreviewResource，入参为预览token：PreviewToken

如何调用临云镜云端API请参考【调用方式】

2.2 调用接口获取模型加载需要的数据

首先调用2.1章节中的场景详情接口（http://example.com/DetailScene）获取至PreviewToken值，再调用场景预览数据接口（http://example.com/GetScenePreviewResource）获取模型点位信息和热点标签数据。

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
const service = async (url, params) => {
    const result = await axios.get(url, params);
    if (result.status === 200) {
        return result.data;
    } else {
        throw new Error('数据获取失败');
    }
};
const { PreviewToken } = service('/DetailScene',{Id:123456})
const data = service('/GetScenePreviewResource',{PreviewToken:PreviewToken})

3、初始化应用

// <div id='Player'></div>
<script type="text/javascript">
    // 获取dom节点
    const parentDom = document.getElementById('Player');
    // 获取模型路径数据
    const data = service('/GetScenePreviewResource',{PreviewToken:PreviewToken});
    const modelConfig = data.resourceDirectory.modelConfig;
    const orthomapConfig = data.resourceDirectory.orthomapConfig;
    const rootPath = data.resourceDirectory.rootPath;
    // 初始化模型配置数据加载器
    const configResolver = {
        resolve: async(path) => {
            switch(path) {
                case 'config.json': {
                    // 业务层获取config.json的逻辑
                    const configDataPath = rootPath + modelConfig;
                    const result = await service(configDataPath);
                    return result;
                };
                case 'orthomap/orthomap.json': {
                    // 业务层获取orthomap/orthomap.json的逻辑
                    const orthomapDataPath = rootPath + orthomapConfig;
                    const result = await service(orthomapDataPath);
                    return result;
                };
                default:{
                    break;
                }
                
           }
        }
    }
    // 初始化模型静态资源加载器
    const resourceResolver = {
        resolve: (path) => {
           return rootPath + path;
        }
    }
    // 初始化应用实例
    const app = new Application(parentDom, {
        config: configResolver,
        publicResourceResolver: resourceResolver,
        privateResourceResolver: resourceResolver,
    })
</script>

app.start().then(() => {})

<div id='Player'></div>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="https://g.alicdn.com/sail-fe/alibaba-lyj-js-player-umd/1.1.5/runtime.js"></script>
<script>
    // 获取sdk资源
    const { Meshviewer } = TideWanhuatong;
    const { Application } = Meshviewer;

    // 获取dom节点
    const parentDom = document.getElementById('Player');

    // 获取模型数据
    const service = async (url, params) => {
        const result = await axios.get(url, params);
        if (result.status === 200) {
            return result.data;
        } else {
            throw new Error('数据获取失败');
        }
    };
    const { PreviewToken } = service('/DetailScene',{Id:123456})
    const data = service('/GetScenePreviewResource',{PreviewToken:PreviewToken})
    const modelConfig = data.resourceDirectory.modelConfig;
    const orthomapConfig = data.resourceDirectory.orthomapConfig;
    const rootPath = data.resourceDirectory.rootPath;

    // 初始化模型配置数据加载器
    const configResolver = {
        resolve: async(path) => {
            switch(path) {
                case 'config.json': {
                    // 业务层获取config.json的逻辑
                    const configDataPath = rootPath + modelConfig;
                    const result = await service(configDataPath);
                    return result;
                };
                case 'orthomap/orthomap.json': {
                    // 业务层获取orthomap/orthomap.json的逻辑
                    const orthomapDataPath = rootPath + orthomapConfig;
                    const result = await service(orthomapDataPath);
                    return result;
                };
                default:{
                    break;
                }
                
           }
        }
    }
    // 初始化模型静态资源加载器
    const resourceResolver = {
        resolve: (path) => {
           return rootPath + path;
        }
    }
    // 初始化应用实例
    const app = new Application(parentDom, {
        config: configResolver,
        publicResourceResolver: resourceResolver,
        privateResourceResolver: resourceResolver,
    })

    // 渲染模型
    app.start().then(() => {})
</script>