!1709 功能:使用渲染器进行渲染

src/Add-on/Renderer.tsx

@@ -0,0 +1,17 @@
+import { app } from "../ApplicationServices/Application";
+import { Command } from "../Editor/CommandMachine";
+import { CameraType } from "../GraphicsSystem/CameraUpdate";
+
+export class CMD_Renderer implements Command
+{
+    async exec()
+    {
+        if (app.WebRtcRenderer.webRtcPlayerObj)
+            app.WebRtcRenderer.EndRenderer();
+        else if (app.WebRtcRenderer.IsLink)
+        {
+            app.Viewer.CameraCtrl.CameraType = CameraType.PerspectiveCamera;
+            app.WebRtcRenderer.StartRenderer();
+        }
+    }
+}

src/Add-on/SwitchVisualStyles.ts

@@ -28,6 +28,7 @@ export class ChangeRenderType implements Command
 
     async exec()
     {
+        app.WebRtcRenderer.EndRenderer();
         if (userConfig.isOpenCabinet) return; //开启门板、抽屉时 切换视图样式失效
         if (this._type === RenderType.PlaceFace)
         {

src/Common/CommandNames.ts

@@ -256,6 +256,7 @@ export enum CommandNames
     FanMian = "FANMIAN",     //排版面 反面
     SuiYiMian = "SUIYIMIAN", //排版面 随意
     BackgroundSwitching = "BACKGROUNDSWITCHING",//背景切换
+    Renderer = "RENDERER",//渲染
     ShowHSPanel = "SHOWHIDESELECT",
     BatchModifyPanel = "BATCHMODIFYPANEL",
     EditorboardTemplate = "EDITORBOARDTEMPLATE",

src/Editor/CommandRegister.ts

@@ -156,6 +156,7 @@ import { PasteClip } from "../Add-on/PasteClip";
 import { Pedit } from "../Add-on/Pedit";
 import { Command_PLTest } from "../Add-on/polytest";
 import { Print } from "../Add-on/Print";
+import { CMD_Renderer } from "../Add-on/Renderer";
 import { Command_RenderModulesState } from "../Add-on/RenderModulesState";
 import { ReOpen } from "../Add-on/ReOpen";
 import { Command_ResetCustomCommand } from "../Add-on/ResetCustomCommand";
@@ -530,6 +531,7 @@ export function registerCommand()
     commandMachine.RegisterCommand(CommandNames.CheckEdge, new ChangeRenderType(RenderType.Edge));
     commandMachine.RegisterCommand(CommandNames.CheckPlaceFace, new ChangeRenderType(RenderType.PlaceFace));
     commandMachine.RegisterCommand(CommandNames.BackgroundSwitching, new BackgroundSwitching());
+    commandMachine.RegisterCommand(CommandNames.Renderer, new CMD_Renderer());
 
     //导入导出配置
     commandMachine.RegisterCommand(CommandNames.DownloadConfig, new DownLoadDConfig());

src/GraphicsSystem/WebRtcRenderer.ts

@@ -6,7 +6,7 @@ import { WebRtcPlayer } from "./WebRtcPlayer";
 //webrtc渲染器连接工具
 export class WebRtcRenderer
 {
-    ws = new WebSocketClientServer("ws://localhost:13421");
+    private ws = new WebSocketClientServer("ws://localhost:13421");
     webRtcPlayerObj: WebRtcPlayer;
     rm1: any;
     rm2: any;
@@ -15,6 +15,8 @@ export class WebRtcRenderer
         this.InitWebSocket();
     }
 
+    get IsLink() { return this.ws.IsLink; }
+
     private InitWebSocket()
     {
         this.ws = new WebSocketClientServer("ws://localhost:13421");
@@ -23,6 +25,8 @@ export class WebRtcRenderer
 
         this.rm1 = end(this.ws, this.ws.OnLinkEvent, (isLink: boolean) =>
         {
+            this.OnLinkEvent(isLink);
+
             if (isLink)
             {
             }
@@ -60,6 +64,7 @@ export class WebRtcRenderer
             }
         });
     }
+    OnLinkEvent(isLink: boolean) { }
 
     StartRenderer()
     {
@@ -132,19 +137,20 @@ export class WebRtcRenderer
 
     EndRenderer()
     {
-        this.ws.Close().then(() =>
+        if (this.webRtcPlayerObj)
-        {
+            this.ws.Close().then(() =>
-            this.rm1();
-            this.rm2();
-
-            if (this.webRtcPlayerObj)
             {
-                this.webRtcPlayerObj.video.remove();
+                this.rm1();
-                this.webRtcPlayerObj.close();
+                this.rm2();
-                this.webRtcPlayerObj = undefined;
-            }
 
-            this.InitWebSocket();
+                if (this.webRtcPlayerObj)
-        });
+                {
+                    this.webRtcPlayerObj.video.remove();
+                    this.webRtcPlayerObj.close();
+                    this.webRtcPlayerObj = undefined;
+                }
+
+                this.InitWebSocket();
+            });
     }
 }

src/UI/Components/CameraControlButton/CameraControlBtn.tsx

@@ -1,12 +1,11 @@
 import { Button, Menu, MenuDivider, MenuItem, Popover } from "@blueprintjs/core";
 import { observable } from "mobx";
-import { inject, observer } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
 import { OrthographicCamera, Vector3 } from "three";
 import { begin, end } from "xaop";
 import { app } from "../../../ApplicationServices/Application";
 import { CommandNames } from "../../../Common/CommandNames";
-import { Singleton } from "../../../Common/Singleton";
 import { commandMachine } from "../../../Editor/CommandMachine";
 import { equalv3 } from "../../../Geometry/GeUtils";
 import { DownPanelStore } from "../../Store/DownPanelStore";
@@ -54,15 +53,30 @@ let viewData: IViewData[] = [
         name: "西南等轴测",
     },
 ];
-export class CameraControlBtnStore extends Singleton
+export class CameraControlBtnStore
 {
     @observable m_isMenuShow: number = -1;
     @observable m_ViewMenuTitle: string = "西南等轴测";
     @observable m_CameraType: string = "平行";
 
-    constructor()
+    @observable _CanUseRenderer = false;
+
+    private static _SingleInstance: CameraControlBtnStore;
+    static GetInstance(): CameraControlBtnStore
+    {
+        if (this._SingleInstance) return this._SingleInstance;
+        this._SingleInstance = new CameraControlBtnStore;
+        return this._SingleInstance;
+    }
+
+    private constructor()
     {
-        super();
+        this._CanUseRenderer = app.WebRtcRenderer.IsLink;
+        end(app.WebRtcRenderer, app.WebRtcRenderer.OnLinkEvent, (isOk: boolean) =>
+        {
+            this._CanUseRenderer = isOk;
+        });
+
         begin(app.Viewer.CameraCtrl, app.Viewer.CameraCtrl.LookAtEvent, (dir: Vector3) =>
         {
             switch (true)
@@ -117,9 +131,8 @@ export class CameraControlBtnStore extends Singleton
         return this.m_ViewMenuTitle;
     }
 }
-@inject("store")
 @observer
-export class CameraControlBtn extends React.Component<{ store: CameraControlBtnStore; }, {}>
+export class CameraControlBtn extends React.Component<{}, {}>
 {
     public state = {
         isOpenToolbar: false,
@@ -127,7 +140,7 @@ export class CameraControlBtn extends React.Component<{ store: CameraControlBtnS
     };
     render()
     {
-        const { m_isMenuShow, m_ViewMenuTitle } = this.props.store;
+        let store = CameraControlBtnStore.GetInstance();
         const btnStyle: React.CSSProperties = {
             fontSize: "11px",
             textAlign: "center",
@@ -162,7 +175,7 @@ export class CameraControlBtn extends React.Component<{ store: CameraControlBtnS
                     <Button
                         style={btnStyle}
                         minimal={true}
-                        text={`[${m_ViewMenuTitle}]`}
+                        text={`[${store.m_ViewMenuTitle}]`}
                     />
                     {
                         this.RenderViewMenu()
@@ -180,6 +193,15 @@ export class CameraControlBtn extends React.Component<{ store: CameraControlBtnS
                             />
                     )
                 }
+                {
+                    store._CanUseRenderer &&
+                    <Button
+                        minimal
+                        style={btnStyle}
+                        text="<渲染>"
+                        onClick={() => commandMachine.ExecCommand(CommandNames.Renderer)}
+                    />
+                }
                 {
                     !(DownPanelStore.GetInstance() as DownPanelStore).isLayout && VisualStyleData2.map(
                         (data) =>
@@ -253,7 +275,7 @@ export class CameraControlBtn extends React.Component<{ store: CameraControlBtnS
 
     RenderViewMenu = () =>
     {
-        let { m_ViewMenuTitle, m_CameraType } = this.props.store;
+        let store = CameraControlBtnStore.GetInstance();
         return (
             <Menu
                 className="viewMenu-fixed"
@@ -266,10 +288,10 @@ export class CameraControlBtn extends React.Component<{ store: CameraControlBtnS
                             <MenuItem
                                 text={data.name}
                                 key={data.name}
-                                icon={data.name === m_ViewMenuTitle ? "tick" : "blank"}
+                                icon={data.name === store.m_ViewMenuTitle ? "tick" : "blank"}
                                 onClick={() =>
                                 {
-                                    m_ViewMenuTitle = data.name;
+                                    store.m_ViewMenuTitle = data.name;
                                     commandMachine.ExecCommand(data.command);
                                 }}
                             />
@@ -278,19 +300,19 @@ export class CameraControlBtn extends React.Component<{ store: CameraControlBtnS
                 <MenuDivider />
                 <MenuItem
                     text={"正交"}
-                    icon={m_CameraType === "正交" ? "tick" : "blank"}
+                    icon={store.m_CameraType === "正交" ? "tick" : "blank"}
                     onClick={() =>
                     {
-                        if (m_CameraType !== "正交")
+                        if (store.m_CameraType !== "正交")
                             app.Viewer.CameraCtrl.SwitchCamera();
                     }}
                 />
                 <MenuItem
                     text={"透视"}
-                    icon={m_CameraType === "透视" ? "tick" : "blank"}
+                    icon={store.m_CameraType === "透视" ? "tick" : "blank"}
                     onClick={() =>
                     {
-                        if (m_CameraType !== "透视")
+                        if (store.m_CameraType !== "透视")
                             app.Viewer.CameraCtrl.SwitchCamera();
                     }}
                 />

src/UI/Layout/ApplicationLayout.tsx

@@ -16,7 +16,7 @@ import { ZINDEX } from '../../Common/ZIndex';
 import { Entity } from '../../DatabaseServices/Entity/Entity';
 import { FileServer } from '../../DatabaseServices/FileServer';
 import { registerCommand } from '../../Editor/CommandRegister';
-import { CameraControlBtn, CameraControlBtnStore } from '../Components/CameraControlButton/CameraControlBtn';
+import { CameraControlBtn } from '../Components/CameraControlButton/CameraControlBtn';
 import { MainContent } from '../Components/MainContent/MainContent';
 import { MaterialContainer, MaterialContainerProps } from '../Components/MaterialContainer';
 import { DownPanel, TopPanel } from '../Components/Panel';
@@ -208,7 +208,7 @@ export class WebCAD
         `;
         document.getElementById("Webgl").appendChild(camCtrlBtn);
 
-        RenderComponent(CameraControlBtn, camCtrlBtn, CameraControlBtnStore.GetInstance());
+        RenderComponent(CameraControlBtn, camCtrlBtn);
     }
     renderToolBar()
     {