添加UI 相机缩放现在支持鼠标位置

package.json

@@ -18,6 +18,8 @@
     "extract-text-webpack-plugin": "^2.1.0",
     "file-loader": "^0.11.1",
     "html-loader": "^0.4.5",
+    "less": "^2.7.2",
+    "less-loader": "^4.0.3",
     "required-loader": "^1.2.11",
     "sass-loader": "^6.0.5",
     "source-map-loader": "^0.2.1",

sample/demo.md

@@ -37,4 +37,7 @@ https://threejs.org/examples/#webgl_multiple_elements
 
 
 #光线追踪Demo
-https://github.com/sbnietert/TypeScript-Ray-Tracer
+https://github.com/sbnietert/TypeScript-Ray-Tracer
+
+
+

sample/使用react css.md

@@ -0,0 +1,10 @@
+
+
+#实例
+https://github.com/Quramy/typescript-css-modules-demo
+https://github.com/css-modules/css-modules/issues/61
+
+
+#.Loader 
+https://github.com/olegstepura/typed-css-modules-loader
+

src/Application.ts

@@ -183,7 +183,7 @@ export class Application2
         //数据
         this.m_Database = new Database();
         //渲染器
-        this.m_Viewer = new Viewer(document.body, this.m_Database.m_Scene);
+        this.m_Viewer = new Viewer(document.getElementById("webgl"), this.m_Database.m_Scene);
 
         //相机控制        
         new CameraControls(this.m_Viewer, this.m_Viewer.m_Render.domElement);
@@ -227,4 +227,4 @@ window["ft"] = function ()
     let app = Application2.Application;
     app.m_Viewer.m_Direction.set(0, 1, 0);
     app.m_Viewer.m_bIsChange = true
-}
+}

src/Editor/DebugDatUi.ts

@@ -25,6 +25,7 @@ export class DebugDatUi
 
             }
         );
+        this.m_Ctrl_UI.domElement.parentElement.style.top = "36px";
         this.m_Ctrl_UI.add(this, "z");
         this.m_Ctrl_UI.add(this, "arr", ["a", "b"]);
 

src/GraphicsSystem/Camera.ts

@@ -132,7 +132,7 @@ export class CameraControls
     {
         event.preventDefault();
         let key: ButtonKey = event.button;
-        this.m_StartChickPoint.set(event.clientX, event.clientY, 0);
+        this.m_StartChickPoint.set(event.offsetX, event.offsetY, 0);
         switch (key)
         {
             case ButtonKey.Left:
@@ -164,23 +164,14 @@ export class CameraControls
     }
     onMouseMove = (event: MouseEvent) =>
     {
-
-
-
-
-
         event.preventDefault();
-        this.m_EndChickPoint.set(event.clientX, event.clientY, 0);
+        this.m_EndChickPoint.set(event.offsetX, event.offsetY, 0);
 
         {
             let app = Application2.Application;
             let ent = app.m_Database.m_EntityCollection[2] as Solid3d;
-
             ent.m_ThreeObj.position.copy(this.m_EndChickPoint);
             this.m_Viewer.ScreenToScenePt(ent.m_ThreeObj.position);
-            // let pt = this.m_EndChickPoint.clone();
-            // this.m_Viewer.ScreenToScenePt(pt);
-            // ent.m_ThreeObj.position.copy(pt);
             this.m_Viewer.m_bIsChange = true;
         }
 
@@ -201,7 +192,6 @@ export class CameraControls
                 }
             case State.Rotate:
                 {
-
                     break;
                 }
             case State.Scale:
@@ -214,12 +204,16 @@ export class CameraControls
     {
         event.preventDefault();
         event.stopPropagation();
+
+        let pt = new THREE.Vector3();
+        pt.set(event.offsetX, event.offsetY, 0);
+        this.m_Viewer.ScreenToScenePt(pt);
         if (event.deltaY < 0)
         {
-            this.m_Viewer.Zoom(0.6);
+            this.m_Viewer.Zoom(0.6, pt);
         } else if (event.deltaY > 0)
         {
-            this.m_Viewer.Zoom(1.4);
+            this.m_Viewer.Zoom(1.4, pt);
         }
     }
     //按键

src/GraphicsSystem/Viewer.ts

@@ -31,9 +31,9 @@ export class Viewer
     constructor(canvas: HTMLElement, scene: THREE.Scene)
     {
         this.m_Stats = new Stats();
-        this.m_Stats.showPanel(1);
+        this.m_Stats.showPanel(0);
+        this.m_Stats.dom.style.top = "36px";
         document.body.appendChild(this.m_Stats.dom);
-
         this.m_HtmlElement = canvas;
         this.setScene(scene);
         this.initRender();
@@ -42,7 +42,6 @@ export class Viewer
         canvas.appendChild(this.m_Render.domElement);
         //渲染循环
         this.Render();
-
     }
 
     ScreenToScenePt(pt: THREE.Vector3)
@@ -84,8 +83,16 @@ export class Viewer
 
         //设置设备像素比。 这通常用于HiDPI设备，以防止模糊输出画布。
         this.m_Render.setPixelRatio(window.devicePixelRatio);
+
         //这里暂时初始化成这个. 未来将分离出 Viewer
-        this.m_Render.setSize(this.m_HtmlElement.scrollWidth, this.m_HtmlElement.scrollHeight);
+        this.m_Render.setSize(this.m_HtmlElement.clientWidth, this.m_HtmlElement.clientHeight);
+
+        window.onresize = () =>
+        {
+            this.m_Render.setSize(this.m_HtmlElement.clientWidth, this.m_HtmlElement.clientHeight);
+            this.m_Camera.Update();
+            this.m_bIsChange = true;
+        };
 
         //设置它的背景色为黑色
         this.m_Render.setClearColor(0x000000, 1);
@@ -115,9 +122,15 @@ export class Viewer
         this.m_Camera.Update();
         this.m_bIsChange = true;
     }
-    Zoom(scale: number)
+    Zoom(scale: number, scaleCenter?: THREE.Vector3)
     {
         this.m_ViewHeight *= scale;
+        if (scaleCenter != null)
+        {
+            this.m_Target.sub(scaleCenter);
+            this.m_Target.multiplyScalar(scale);
+            this.m_Target.add(scaleCenter);
+        }
         this.m_Camera.Update();
         this.m_bIsChange = true;
     }
@@ -138,4 +151,5 @@ export class Viewer
         this.m_Camera.Update();
         this.m_bIsChange = true;
     }
-}
+}
+

src/UI/AppUI.tsx

@@ -0,0 +1,130 @@
+import * as React from "react";
+
+import "./AppUI.less"
+import { CSSProperties } from "react";
+import * as THREE from "three";
+//界面数据
+export class AppUi extends React.Component<{}, null> {
+    css: CSSProperties = {
+        width: "100%",
+        height: "100%"
+    }
+    render()
+    {
+        return (
+            <div className="AppUi" style={this.css}>
+                <TopPanel name="Cx" date="Sv" />
+                <Contain />
+                <DownPanel />
+            </div>
+        );
+    }
+}
+
+
+
+interface Data
+{
+    name?: string;
+    age?: number;
+    date: string;
+}
+
+export class TopPanel extends React.Component<Data, object>{
+    timerID: any;
+
+    tick()
+    {
+
+    }
+    constructor(props)
+    {
+        super(props);
+        this.state = {
+            date: ""
+        }
+
+        window["setg"] = (o) =>
+        {
+            this.setState(
+                {
+                    date: o
+                });
+        }
+    }
+
+    componentDidMount()
+    {
+        this.timerID = setInterval(
+            () => this.tick(),
+            1000
+        );
+    }
+
+    componentWillUnmount()
+    {
+        clearInterval(this.timerID);
+    }
+    render()
+    {
+        return (
+            <div className="panel b-bot topsize" >
+                <span className="logo" >
+                    webCAD
+                    <sup>dev</sup>
+                    {this.state["date"]}
+                </span>
+                <Btn />
+                <Btn />
+                <Btn />
+                <Btn />
+            </div>
+        );
+    }
+}
+
+window["sb"] = "你是不是傻";
+
+export class DownPanel extends React.Component<{}, null>
+{
+    style: CSSProperties = {
+        width: "100%",
+        height: "30px",
+    }
+    render()
+    {
+        return (
+            <div className="panel" style={this.style}></div>
+        );
+    }
+}
+
+export class Btn extends React.Component<{}, null>{
+    divStyle: CSSProperties = {
+    };
+    render()
+    {
+        // act-undo
+        return (
+            <button className="btn tbtn sep" style={this.divStyle}>
+            </button>
+        );
+    }
+}
+
+
+export class Contain extends React.Component<{}, null>{
+    css: CSSProperties =
+    {
+        width: "100%",
+        height: "calc(100% - 59px)"
+    }
+    render()
+    {
+        return (
+            <div style={this.css} id="webgl">
+            </div>
+        );
+    }
+}
+

src/UI/AppUi.less

@@ -0,0 +1,62 @@
+.topsize
+{
+    width: 100%;
+    height: 35px;
+}
+
+
+body {
+  .sans-serif;
+  font-size: 11px;
+  overflow: hidden;
+}
+
+html, body {
+  background: gray;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.sans-serif {
+  font-family: sans-serif;
+}
+
+.panel {
+  background: #444;
+  border: 0px solid black;
+  text-align: right
+}
+
+.b-top { border-top-width: 1px; }
+
+.logo {
+  color: #bbb;
+  font-size: 18px;
+  padding: 3px 0 0 10px;
+  cursor: alias;
+  float: left
+}
+
+
+.btn {
+  border:1px solid #808080;
+  background: #606060 no-repeat center;
+  border-radius: 4px;
+  color: white;
+  vertical-align: top;
+}
+
+.tbtn {
+  width:31px;
+  height:31px;
+  margin: 2px 2px;
+  font-size: 20px;
+  padding: 0;
+}
+
+
+
+.sep {
+  margin-right: 1px;
+}

src/UI/demo.tsx

@@ -19,17 +19,16 @@ export class Hello extends React.Component<Props, object> {
         {
             throw new Error('You could be a little more enthusiastic. :D');
         }
-
-        const css = `
-        .hello{
-            font-size: 150px;
-        }
-        `
+        // const css = `
+        // .hello{
+        //     font-size: 150px;
+        // }
+        // `
         return (
             <div className="hello">
-                <style>
+                {/*<style>
                     {css}
-                </style>
+                </style>*/}
                 <div className="greeting">
                     Hello {name + getExclamationMarks(enthusiasmLevel)}
                 </div>

src/index.tsx

@@ -2,22 +2,18 @@ import { Application, Application2 } from "./Application";
 
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import { Hello, Sx } from "./UI/demo";
-
-import "./UI/Sb.css"
-
 
+import { AppUi } from "./UI/AppUI";
 window.onload = function ()
 {
-    var info = document.createElement('div');
-    info.id = "root";
-    document.body.appendChild(info);
-    ReactDOM.render(
-        <Sx name="mian" />,
-        document.getElementById('root') as HTMLElement
+    var root = document.createElement('div');
+    root.style.height = "100%";
+    root.style.widows = "100%";
+    document.body.appendChild(root);
+    ReactDOM.render(<AppUi />,
+        root
     );
-
-    // new Application2();
+    new Application2();
 };
 
 

webpack.config.js

@@ -31,6 +31,25 @@ module.exports = {
                 use: ExtractTextPlugin.extract({
                     use: 'css-loader'
                 })
+            },
+            {
+                test: /\.less$/,
+                use:
+                [
+                    {
+                        loader: "style-loader"
+                    },
+                    {
+                        loader: "css-loader"
+                    },
+                    {
+                        loader: "less-loader", options:
+                        {
+                            strictMath: true,
+                            noIeCompat: true
+                        }
+                    }
+                ]
             }
         ]
     },
@@ -43,14 +62,13 @@ module.exports = {
         contentBase: path.join(__dirname, "dist"),
         compress: true,
         port: 8188
-    }
-    ,
+    },
     plugins: [
         new webpack.DllReferencePlugin({
             context: '.',
             manifest: require(path.resolve(__dirname, "./manifest.json"))
         }),
-        new HtmlWebPackPlugin(),
+        new HtmlWebPackPlugin({ title: "webCAD" }),
         new AddAssetHtmlPlugin({ filepath: path.resolve(__dirname, "./dist/dll.js") }),
         new ExtractTextPlugin('styles.css'),
     ]