!305 太阳光初始化

Merge pull request !305 from ZoeLeeFZ/optSunLight

src/DatabaseServices/Lights/DirectionalLight.ts

@@ -18,7 +18,7 @@ import { Light } from "./Light";
 export class DirectionalLight extends Light
 {
     private m_Target = new Vector3();
-    protected m_ShowHelper = true;
+    protected m_ShowHelper = false;
 
     get Target()
     {
@@ -42,7 +42,10 @@ export class DirectionalLight extends Light
     }
     GetGripPoints(): Array<Vector3>
     {
-        return [this.Position, this.m_Target];
+        if (this.ShowHelper)
+            return [this.Position, this.m_Target];
+        else
+            return [];
     }
     MoveGripPoints(indexList: number[], vec: Vector3)
     {

src/UI/Components/Modal/LightModal.tsx

@@ -56,6 +56,7 @@ interface ILightComponentProps
     pars: [string, string][];
     isShowPos: boolean;
     isSelectTarget: boolean;
+    hideColor?: boolean;
 }
 
 @observer
@@ -142,17 +143,20 @@ export class LightDataCom extends React.Component<ILightComponentProps, {}> {
                     /> : null
                 }
                 <div className="lg">
-                    <div style={{ position: "relative" }}>
-                        <span>颜色</span>
-                        <ColorPanel
-                            color={"#" + light.Color.getHexString()}
-                            onChange={(color: string) =>
-                            {
-                                light.Color = new Color(color);
-                                app.m_Editor.UpdateScreen();
-                            }}
-                        />
-                    </div>
+                    {
+                        !this.props.hideColor &&
+                        <div style={{ position: "relative" }}>
+                            <span>颜色</span>
+                            <ColorPanel
+                                color={"#" + light.Color.getHexString()}
+                                onChange={(color: string) =>
+                                {
+                                    light.Color = new Color(color);
+                                    app.m_Editor.UpdateScreen();
+                                }}
+                            />
+                        </div>
+                    }
                     {
                         this.props.light instanceof HemisphereLight ? <div>
                             <span>底色</span>

src/UI/Components/RightPanel/RightPanel.less

@@ -1,4 +1,4 @@
-@height:20px;
+@height:27px;
 #RightPanel .lg-target .bp3-input-group{
     cursor: pointer;
     width: 10rem;
@@ -23,6 +23,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
+    align-items: center;
     &>div{
         margin-top: 0;
         margin-bottom: 15px;

src/UI/Components/RightPanel/ScenePanel.tsx

@@ -1,20 +1,95 @@
-import { Alignment, Button, Intent, ITreeNode, Switch, Divider } from '@blueprintjs/core';
+import { Alignment, Button, Intent, Switch, Divider, HTMLSelect, Label, Classes, NumericInput } from '@blueprintjs/core';
 import { observable } from 'mobx';
 import { inject, observer } from 'mobx-react';
 import * as React from 'react';
-import { FixedNotZero } from '../../../Common/Utils';
 import { RightPanelStore } from '../../Store/RightPanelStore';
 import { LightDataCom, LightModal } from '../Modal/LightModal';
+import { hot } from 'react-hot-loader/root';
+import { Vector3, Matrix4, Math as TMath } from 'three';
+import { app } from '../../../ApplicationServices/Application';
+import { FixedNotZero } from '../../../Common/Utils';
+import { angle, equalv3 } from '../../../Geometry/GeUtils';
 
-export interface ITreeExampleState
+enum ETime
 {
-    nodes: ITreeNode[];
+    Morning = "上午",
+    Noon = "中午",
+    Afternoon = "下午",
+    Evening = "傍晚",
 }
 
+const DefaultDist = 2000;
+
+@hot
 @inject("store")
 @observer
-export class ScenePanel extends React.Component<{ store?: RightPanelStore }, ITreeExampleState>
+export class ScenePanel extends React.Component<{ store?: RightPanelStore }, {}>
 {
+    @observable sunState = {
+        time: ETime.Morning,
+        angle: "60",
+        rotation: "0"
+    }
+    private SetSunPostion(angle: number, rotation: number)
+    {
+        let pos = new Vector3(DefaultDist * Math.cos(angle), 0, DefaultDist * Math.sin(angle));
+        pos.applyMatrix4(new Matrix4().makeRotationZ(rotation));
+        this.props.store.lightStore.m_DirectionalLight.Position = pos;
+        app.m_Editor.UpdateScreen();
+    }
+    private handleSuntime = () =>
+    {
+        let dirLight = this.props.store.lightStore.m_DirectionalLight;
+
+        switch (this.sunState.time)
+        {
+            case ETime.Morning:
+                dirLight.Intensity = 2;
+                this.sunState.angle = "60";
+                this.sunState.rotation = "0";
+                this.SetSunPostion(Math.PI / 3, 0);
+                break;
+            case ETime.Noon:
+                dirLight.Intensity = 6;
+                this.sunState.angle = "90";
+                this.sunState.rotation = "0";
+                this.SetSunPostion(Math.PI / 2, 0);
+                break;
+            case ETime.Afternoon:
+                dirLight.Intensity = 4;
+                this.sunState.angle = "60";
+                this.sunState.rotation = "180";
+                this.SetSunPostion(Math.PI / 3, Math.PI);
+                break;
+            case ETime.Evening:
+                dirLight.Intensity = 2;
+                this.sunState.angle = "30";
+                this.sunState.rotation = "180";
+                this.SetSunPostion(Math.PI / 6, Math.PI);
+                break;
+            default:
+                break;
+        }
+        app.m_Editor.UpdateScreen();
+    }
+    private handleChangeSunAngle = (num: number) =>
+    {
+        this.sunState.angle = num.toString();
+        this.SetSunPostion(TMath.degToRad(num), TMath.degToRad(parseFloat(this.sunState.rotation)));
+    }
+    private handleChangeSunRotation = (num: number) =>
+    {
+        this.sunState.rotation = num.toString();
+        this.SetSunPostion(TMath.degToRad(parseFloat(this.sunState.angle)), TMath.degToRad(num));
+    }
+    componentWillMount()
+    {
+        const sun = this.props.store.lightStore.m_DirectionalLight;
+        let vec = sun.Position.setZ(0);
+
+        this.sunState.angle = equalv3(vec, new Vector3()) ? "90" : FixedNotZero(TMath.radToDeg(vec.angleTo(sun.Position)), 0);
+        this.sunState.rotation = FixedNotZero(TMath.radToDeg(angle(vec)), 0);
+    }
     render()
     {
         const lightStore = this.props.store.lightStore;
@@ -92,18 +167,50 @@ export class ScenePanel extends React.Component<{ store?: RightPanelStore }, ITr
                     alignIndicator={Alignment.RIGHT}
                 />
                 <div style={{ display: lightStore.m_ShowDirLight ? "block" : "none" }}>
+                    <HTMLSelect
+                        options={[ETime.Morning, ETime.Noon, ETime.Afternoon, ETime.Evening]}
+                        value={this.sunState.time}
+                        style={{ marginBottom: 10 }}
+                        onChange={e =>
+                        {
+                            this.sunState.time = e.currentTarget.value as ETime;
+                            this.handleSuntime();
+                        }}
+                    />
                     <LightDataCom
                         data={observable({
-                            x: FixedNotZero(lightStore.m_DirectionalLight.Position.x, 2),
-                            y: FixedNotZero(lightStore.m_DirectionalLight.Position.y, 2),
-                            z: FixedNotZero(lightStore.m_DirectionalLight.Position.z, 2),
                             Intensity: lightStore.m_DirectionalLight.Intensity.toString()
                         })}
+                        hideColor
                         light={lightStore.m_DirectionalLight}
                         pars={[["Intensity", "强度"]]}
-                        isShowPos={true}
-                        isSelectTarget={true}
+                        isShowPos={false}
+                        isSelectTarget={false}
                     />
+                    <div className="lg sun">
+                        <Label className={Classes.INLINE}>
+                            <span>仰角</span>
+                            <NumericInput
+                                clampValueOnBlur
+                                min={0}
+                                max={90}
+                                stepSize={1}
+                                minorStepSize={0.01}
+                                value={this.sunState.angle} onValueChange={this.handleChangeSunAngle}
+                            />
+                        </Label>
+                        <Label className={Classes.INLINE}>
+                            <span>旋转</span>
+                            <NumericInput
+                                clampValueOnBlur
+                                min={0}
+                                max={360}
+                                stepSize={1}
+                                minorStepSize={0.01}
+                                value={this.sunState.rotation} onValueChange={this.handleChangeSunRotation}
+                            />
+                        </Label>
+                    </div>
                 </div>
                 <Divider />
                 {