!2230 新增:增加相机近端面UI控件

src/Add-on/ShareView/ShareViewUtil.ts

@@ -92,7 +92,6 @@ export async function ExplosionView(index: number, distance: number)
     shareViewApp.Editor.UpdateScreen();
 }
 
-
 // 重置视图
 export function resetBoxView()
 {

src/ApplicationServices/Application.ts

@@ -3,8 +3,8 @@ import hotkeys from 'hotkeys-js-ext';
 import { MathUtils, Matrix4, Object3D, PerspectiveCamera, Vector3 } from 'three';
 import { begin, end } from 'xaop';
 import { HardwareCuttingReactor } from '../Add-on/BoardCutting/HardwareCuttingReactor';
-import { DrillingReactor } from '../Add-on/DrawDrilling/DrillingReactor';
 import { DwgDxfImport } from '../Add-on/DXFLoad';
+import { DrillingReactor } from '../Add-on/DrawDrilling/DrillingReactor';
 import { AppendUserInfo } from '../Add-on/ExportData';
 import { ImportJiajuFile } from '../Add-on/JiaJu/Import/JiaJuImport';
 import { ImportKJLData } from '../Add-on/KJL/Import/KJLImport';
@@ -23,7 +23,7 @@ import { FontLoader } from '../DatabaseServices/Text/FontLoader';
 import { AutoSaveServer } from '../Editor/AutoSave';
 import { BoardMoveTool } from '../Editor/BoardMoveTool';
 import { CameraControls } from '../Editor/CameraControls';
-import { commandMachine, CommandWrap } from '../Editor/CommandMachine';
+import { CommandWrap, commandMachine } from '../Editor/CommandMachine';
 import { CommandState } from '../Editor/CommandState';
 import { Editor } from '../Editor/Editor';
 import { Gesture } from '../Editor/Gesture';
@@ -438,7 +438,12 @@ export class ApplicationService
 
         let b = Math.atan(w / 2);
         b = MathUtils.RAD2DEG * b * 2;
-        let d = { type: "camera", p: app.Viewer.Camera.position.toArray(), r: [app.Viewer.CameraControl.Orbit.RoX, app.Viewer.CameraControl.Orbit.theta, 0], fov: b, aspect: app.Viewer.CameraControl.Aspect };
+        let d = {
+            type: "camera", p: app.Viewer.Camera.position.toArray(),
+            r: [app.Viewer.CameraControl.Orbit.RoX, app.Viewer.CameraControl.Orbit.theta, 0],
+            fov: b, aspect: app.Viewer.CameraControl.Aspect,
+            near: Math.max(100, app.Viewer.CameraControl.Near) //渲染器最小值10cm
+        };
         AppendUserInfo(d);
         app.WebSocket.Send(JSON.stringify(d));
     }

src/GraphicsSystem/CameraUpdate.ts

@@ -3,6 +3,9 @@ import { HostApplicationServices } from '../ApplicationServices/HostApplicationS
 import { CADFiler } from '../DatabaseServices/CADFiler';
 import { Orbit } from '../Geometry/Orbit';
 
+//相机近端面最小值
+export const ViewNearMinSize = 1e-2;
+
 const ViewScopeSize = 4e6;
 //相机活动范围
 const ViewScopeMin = new Vector3(-ViewScopeSize, -ViewScopeSize * 0.7, -ViewScopeSize);
@@ -44,6 +47,9 @@ export class CameraUpdate
     //观察的轨道.
     private _Orbit: Orbit = new Orbit();
 
+    //近端面
+    private _Near: number = ViewNearMinSize;
+
     DisableRotate = false;
 
     constructor()
@@ -51,7 +57,7 @@ export class CameraUpdate
         this._CameraArray.set(OrthographicCamera, new OrthographicCamera(-2, 2, 2, -2,
             -ViewScopeSize, ViewScopeSize));
 
-        this._CameraArray.set(PerspectiveCamera, new PerspectiveCamera(60, 1, 0.01, ViewScopeSize));
+        this._CameraArray.set(PerspectiveCamera, new PerspectiveCamera(60, 1, this._Near, ViewScopeSize));
 
         this._CurCamera = this._CameraArray.get(OrthographicCamera);
 
@@ -116,6 +122,18 @@ export class CameraUpdate
         this.UpdateCameraMatrix();
     }
 
+    public get Near(): number
+    {
+        return this._Near;
+    }
+    public set Near(value: number)
+    {
+        this._Near = value;
+        let camera = this._CameraArray.get(PerspectiveCamera) as PerspectiveCamera;
+        camera.near = this._Near;
+        this.UpdateCameraMatrix();
+    }
+
     /**
      * 平移相机.
      * @param {Vector3} mouseMove
@@ -331,16 +349,21 @@ export class CameraUpdate
 
         if (ver > 2)
             this.Fov = file.Read();
+
+        if (ver > 4)
+            this.Near = file.Read();
     }
     //对象将自身数据写入到文件.
     WriteFile(file: CADFiler)
     {
-        file.Write(4);
+        file.Write(5);
         file.Write(this._ViewHeight);
         file.WriteVec3(this._Target);
         file.WriteVec3(this._Direction);
         file.Write(this.CameraType);
         file.Write(this.Fov);
+
+        file.Write(this.Near);
     }
 
     CopyFrom(camer: CameraUpdate)

src/UI/Components/CameraControlButton/CameraState/CameraSetting.tsx

@@ -2,14 +2,16 @@ import { Button, Icon, Label, NumericInput, Popover, Position, Radio, RadioGroup
 import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 import { MathUtils } from 'three';
-import { app, CameraRoamType } from '../../../../ApplicationServices/Application';
-import { CameraType } from '../../../../GraphicsSystem/CameraUpdate';
+import { CameraRoamType, app } from '../../../../ApplicationServices/Application';
+import { CoolDownTime } from '../../../../Common/CoolDownTime';
+import { CameraType, ViewNearMinSize } from '../../../../GraphicsSystem/CameraUpdate';
 import CameraSettingStore, { CameraMode } from './CameraSettingStore';
 import { CameraSettingIcon } from './CameraState';
 
 @observer
 export default class CameraSetting extends Component
 {
+    _CoolTime = new CoolDownTime;
     CameraSettingStore: CameraSettingStore = CameraSettingStore.GetSingleInstance();
     AlterCameraVision = (deg: number): void =>
     {
@@ -20,9 +22,19 @@ export default class CameraSetting extends Component
         app.Viewer.CameraControl.ViewHeight *= a2 / a1;
         app.Editor.UpdateScreen();
     };
+    UpdateNear(value: number): void
+    {
+        this._CoolTime.Debounce(() =>
+        {
+            app.Viewer.CameraControl.Near = value;
+            app.Viewer.UpdateRender();
+        }, 10);
+    }
+
     render()
     {
         const { CameraSettingStore } = this;
+        const IsOrthographicCamera = app.Viewer.CameraCtrl.CameraType === CameraType.OrthographicCamera;
         return (
             <Popover
                 onOpening={() =>
@@ -37,7 +49,7 @@ export default class CameraSetting extends Component
                         <div className='CameraSettingItem'>
                             <Label>锁定相机旋转</Label>
                             <Switch size={30}
-                                disabled={app.Viewer.CameraCtrl.CameraType === CameraType.OrthographicCamera}
+                                disabled={IsOrthographicCamera}
                                 checked={CameraSettingStore.isCameraRotateLock}
                                 onChange={(): void =>
                                 {
@@ -60,7 +72,7 @@ export default class CameraSetting extends Component
                         <div className='CameraSettingItem'>
                             <Label>相机模式</Label>
                             <RadioGroup selectedValue={CameraSettingStore.cameraMode} inline
-                                disabled={app.Viewer.CameraCtrl.CameraType === CameraType.OrthographicCamera}
+                                disabled={IsOrthographicCamera}
                                 onChange={(e: React.FormEvent<HTMLInputElement>) =>
                                 {
                                     CameraSettingStore.cameraMode = (e.target as HTMLInputElement).value as CameraMode;
@@ -74,7 +86,7 @@ export default class CameraSetting extends Component
                             <Label>高度</Label>
                             <div>
                                 <Slider
-                                    disabled={app.Viewer.CameraCtrl.CameraType === CameraType.OrthographicCamera}
+                                    disabled={IsOrthographicCamera}
                                     max={5000}
                                     min={0}
                                     value={Number.parseInt((MathUtils.clamp(CameraSettingStore.cameraAltitude, 0, 5000).toFixed(0)))}
@@ -91,7 +103,7 @@ export default class CameraSetting extends Component
                                 <NumericInput
                                     tabIndex={1}
                                     value={Number.parseInt((MathUtils.clamp(CameraSettingStore.cameraAltitude, 0, 5000).toFixed(0)))}
-                                    disabled={app.Viewer.CameraCtrl.CameraType === CameraType.OrthographicCamera}
+                                    disabled={IsOrthographicCamera}
                                     allowNumericCharactersOnly={true}
                                     max={5000}
                                     onValueChange={(e) =>
@@ -113,7 +125,7 @@ export default class CameraSetting extends Component
                             <div>
                                 <div className='CameraVison'>
                                     <Slider
-                                        disabled={app.Viewer.CameraCtrl.CameraType === CameraType.OrthographicCamera}
+                                        disabled={IsOrthographicCamera}
                                         value={MathUtils.clamp(CameraSettingStore.cameraFov, 30, 120)}
                                         max={120}
                                         min={30}
@@ -157,7 +169,7 @@ export default class CameraSetting extends Component
                                     value={CameraSettingStore.cameraFov}
                                     min={30}
                                     max={120}
-                                    disabled={app.Viewer.CameraCtrl.CameraType === CameraType.OrthographicCamera}
+                                    disabled={IsOrthographicCamera}
                                     onValueChange={(e) =>
                                     {
                                         if (Number.isNaN(e)) return this.CameraSettingStore.cameraFov;
@@ -168,11 +180,46 @@ export default class CameraSetting extends Component
                                 />
                             </div>
                         </div>
+                        <div className='CameraSettingItem near'>
+                            <Label>相机裁剪</Label>
+                            <div>
+                                <Slider
+                                    min={0}
+                                    max={20000}
+                                    stepSize={1}
+                                    labelRenderer={false}
+                                    value={CameraSettingStore.near}
+                                    disabled={IsOrthographicCamera}
+                                    onChange={(e) =>
+                                    {
+                                        if (e === 0) e = ViewNearMinSize;
+                                        this.UpdateNear(e);
+                                    }} />
+                                <NumericInput
+                                    tabIndex={1}
+                                    min={0}
+                                    max={20000}
+                                    allowNumericCharactersOnly={true}
+                                    disabled={IsOrthographicCamera}
+                                    value={CameraSettingStore.near}
+                                    onValueChange={(e) =>
+                                    {
+                                        if (isNaN(e)) return;
+                                        if (e === 0) e = ViewNearMinSize;
+                                        else if (e > 20000)
+                                            e = 20000;
+                                        this.UpdateNear(e);
+                                    }}
+                                    onFocus={(e) => { e.target.select(); }}
+                                />
+                                <div className='unit' style={{ color: IsOrthographicCamera ? "#A6B2BC" : "black" }}>mm</div>
+                            </div>
+                        </div>
                         <div className='CameraSettingItem'>
                             <Label>行走速度</Label>
                             <div>
                                 <Slider
-                                    disabled={app.Viewer.CameraCtrl.CameraType === CameraType.OrthographicCamera}
+                                    disabled={IsOrthographicCamera}
                                     max={5}
                                     min={1}
                                     value={CameraSettingStore.walkSpeed}
@@ -186,7 +233,7 @@ export default class CameraSetting extends Component
                                     max={5}
                                     min={1}
                                     allowNumericCharactersOnly={true}
-                                    disabled={app.Viewer.CameraCtrl.CameraType === CameraType.OrthographicCamera}
+                                    disabled={IsOrthographicCamera}
                                     value={CameraSettingStore.walkSpeed} onValueChange={(e) =>
                                     {
                                         if (Number.isNaN(e)) return CameraSettingStore.walkSpeed;

src/UI/Components/CameraControlButton/CameraState/CameraSettingStore.ts

@@ -39,6 +39,10 @@ export default class CameraSettingStore
      * @description 行走速度
      */
     @observable walkSpeed: number = 3;
+    /**
+     * @description 近端面
+     */
+    @observable near: number = 0;
 
     private static _SingleInstance: CameraSettingStore;
     static GetSingleInstance = (): CameraSettingStore =>
@@ -61,12 +65,14 @@ export default class CameraSettingStore
         end(app.Viewer.CameraControl, app.Viewer.CameraControl.UpdateCameraMatrix, () =>
         {
             this.cameraAltitude = app.Viewer.Camera.position.z;
+            this.near = Math.round(app.Viewer.CameraControl.Near);
         });
 
         end(app, app.OpenFile, () =>
         {
             this.cameraAltitude = app.Viewer.Camera.position.z;
             this.cameraFov = app.Viewer.CameraControl.Fov;
+            this.near = Math.round(app.Viewer.CameraControl.Near);
         });
     }
 }

src/UI/Components/CameraControlButton/CameraState/CameraState.less

@@ -57,7 +57,8 @@
     display        : flex;
     flex-direction : column;
     box-sizing     : border-box;
-    padding        : 20px;
+    padding        : 20px 20px 10px 20px;
+    
     .CameraSettingItem
     {
         display        : flex;
@@ -74,7 +75,7 @@
             color       : #4e5257;
             margin-right: 10px;
         }
-        &:nth-child(4),&:nth-child(5),&:nth-child(6)
+        &:nth-child(4),&:nth-child(5),&:nth-child(6),&:nth-child(7)
         {
             flex-direction: column;
             align-items   : flex-start;
@@ -133,6 +134,19 @@
         {
             margin-top: 30px;
             .bp3-slider
+            {
+                margin-top: 8px;
+                min-width: 120px;
+            }
+            .bp3-label
+            {
+                margin-bottom: 5px;
+            }
+        }
+        &:nth-child(7)
+        {
+            margin-top: 25px;
+            .bp3-slider
             {
                 margin-top: 8px;
             }
@@ -189,6 +203,26 @@
         }
     }
 }
+
+.CameraSettingPanel .CameraSettingItem:nth-child(6) > div{
+    position: relative;
+
+    .bp3-slider {
+        min-width: 150px;
+    }
+
+    .bp3-input {
+        width: 83px;
+    }
+
+    .unit {
+        top      : 5px;
+        right    : 17px;
+        position : absolute;
+        font-size: 14px;
+    }
+}
+
 .SaveCameraVision
 {
     box-sizing: border-box;

src/UI/Components/CameraControlButton/CameraState/CameraState.tsx

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import { app } from '../../../../ApplicationServices/Application';
 import { userConfig } from '../../../../Editor/UserConfig';
 import { GetBox } from '../../../../Geometry/GeUtils';
-import { CameraType } from '../../../../GraphicsSystem/CameraUpdate';
+import { CameraType, ViewNearMinSize } from '../../../../GraphicsSystem/CameraUpdate';
 import ModifyModelStore from '../../ToolBar/ModifyModel/ModifyModelStore';
 import CameraSetting from './CameraSetting';
 import CameraSnapshootPanel from './CameraSnapshootPanel';
@@ -27,6 +27,7 @@ export default class CameraState extends Component
                 app.Viewer.CameraControl.Target.sub(app.Viewer.Camera.position);
                 box.getCenter(app.Viewer.Camera.position);
                 app.Viewer.CameraControl.Target.add(app.Viewer.Camera.position);
+                app.Viewer.CameraControl.Near = ViewNearMinSize;
                 app.Viewer.CameraControl.UpdateCameraMatrix();
             }
         }