WebCAD/src/webview.ts

import * as THREE from 'three';
import { CameraControlState } from './Editor/CameraControls';
import './UI/Css/style.less';
import '../../Css/switchTheme.less'
import { WebCADView } from './WebCADView/WebCADView';

function createRootElement()
{
    let root = document.createElement('div');
    root.id = "viewer"
    root.style.height = "100%";
    document.body.appendChild(root);
    return root;
}

function createContent()
{
    let el = document.createElement("div");
    el.style.position = "absolute";
    el.style.top = "0";
    el.style.width = "100%";
    return el;
}

function createBtn(textCtx: string, parEl: HTMLElement, callback: any)
{
    let btn = document.createElement("button");
    btn.textContent = textCtx;
    btn.onclick = callback;
    parEl.appendChild(btn);
    return btn;
}

let bulbLight: THREE.PointLight

window.onload = async () =>
{
    let el = createRootElement();


    let app = new WebCADView(el);

    window.addEventListener("resize", () =>
    {
        app.m_Viewer.OnSize();
    })

    let param = parseQuery(window.location.search);
    let cdnUrl = "http://ovfprkza3.bkt.clouddn.com/";// old "/upload/"
    if (param.hasOwnProperty("id"))
    {
        await app.Load(`${cdnUrl}${param["id"]}.json`, cdnUrl);
    }
    let hemiLight = new THREE.AmbientLight(0xffffff, 3);
    app.m_Viewer.Scene.add(hemiLight)

    app.EdgeShow();
    app.ZoomAll();

    //内容
    let content = createContent();
    el.appendChild(content);

    createBtn("缩放", content, () =>
    {
        app.m_Viewer.ZoomAll();
    });

    createBtn("俯视", content, () =>
    {
        app.ViewToTop();
        app.m_Viewer.ZoomAll();
    });

    createBtn("前视", content, () =>
    {
        app.ViewToFont();
        app.ZoomAll();
    });
    createBtn("西南", content, () =>
    {
        app.m_Viewer.CameraCtrl.LookAt(new THREE.Vector3(1, 1, -1));
        app.ZoomAll();
    });
    createBtn("右视", content, () =>
    {
        app.m_Viewer.CameraCtrl.LookAt(new THREE.Vector3(-1, 0, 0));
        app.ZoomAll();
    });

    createBtn("实体", content, () =>
    {
        app.SolidShow();
        app.m_Viewer.UpdateRender();
    });
    createBtn("线框", content, () =>
    {
        app.EdgeShow();
        app.m_Viewer.UpdateRender();
    });


    let btn: HTMLElement;
    function rotateSwithMove()
    {
        if (app.m_CamerCtrl.m_TouthTypeList[0] == CameraControlState.Rotate)
        {
            app.m_CamerCtrl.m_TouthTypeList[0] = CameraControlState.Pan;
            btn.textContent = "平移";
        }
        else
        {
            app.m_CamerCtrl.m_TouthTypeList[0] = CameraControlState.Rotate;
            btn.textContent = "旋转";
        }

    }
    btn = createBtn("旋转", content, rotateSwithMove);
}

function parseQuery(search): Object
{
    let args = search.substring(1).split('&');
    let argsParsed = {};
    let i, arg, kvp, key, value;

    for (i = 0; i < args.length; i++)
    {
        arg = args[i];
        if (-1 === arg.indexOf('='))
        {
            argsParsed[decodeURIComponent(arg).trim()] = true;
        }
        else
        {
            kvp = arg.split('=');
            key = decodeURIComponent(kvp[0]).trim();
            value = decodeURIComponent(kvp[1]).trim();
            argsParsed[key] = value;
        }
    }
    return argsParsed;
}