[]
        
在线Demo 免费试用
(Showing Draft Content)

集成3D场景设计器

1. 概述

1.1 功能概述

Wyn 支持将 3D 场景设计器嵌入到 Web 应用程序的任意 DIV 容器中去,为最终用户提供在线设计3D场景的能力。

2. 操作步骤

2.1 安装集成包

  1. 安装最新的JavaScript集成包:https://www.npmjs.com/package/@grapecity-software/wyn-integration

    npm install @grapecity-software/wyn-integration 

2.2 集成

  1. 将 Wyn 3D 场景添加到 DIV 容器 wyn-root 中。

    import { WynIntegration } from "@grapecity-software/wyn-integration";
    
    let sceneDesigner = null;
    const createSceneDesigner = (baseUrl, token, sceneDocId) => {
        if (sceneDesigner) {
            sceneDesigner.destroy();
            clearContainer();
        }
    
        WynIntegration.createSceneDesigner({
            baseUrl: baseUrl,
            docId: sceneDocId,
            token: token,
        }, '#wyn-root').then(ins => {
            sceneDesigner = ins;
        });
    }
    
    const clearContainer = () => {
        const container = document.querySelector('#wyn-root');
        if (container) container.innerHTML = '';
    }
  • 参数说明:

    • baseURL 指 Wyn 服务器的地址。

    • token 指访问 Wyn 服务器的令牌,在 Wyn的「系统管理>安全设置>生成令牌」界面生成,token 所代表的用户需要具有创建仪表板的权限。具体获取方法,请详见生成令牌

    • sceneDocId 指3D场景文档 Id,可以从 Wyn 的「文档门户>我的分析」中对应的3D场景文档列表获取,当sceneDocId为空的时候,指的是创建新的3D场景文件。

      PixPin_2025-07-23_09-11-16

    • 更多的设置参考API文档:dashboard.SceneDesigner