...点控制 相机

README.md

@@ -59,6 +59,7 @@ http://jsfiddle.net/m1erickson/CtsY3/
 
 #网格拉伸夹点
 https://threejs.org/examples/?q=m#webgl_morphtargets
+https://threejs.org/examples/#webgl_geometry_spline_editor
 
 #渲染循环优化
 https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
@@ -73,6 +74,9 @@ https://www.typescriptlang.org/docs/handbook/modules.html
 http://stackoverflow.com/questions/12930049/how-do-i-import-other-typescript-files
 http://stackoverflow.com/questions/18556187/importing-typescript-modules
 
+#光标
+https://css-tricks.com/using-css-cursors/
+
 //TODO:
 1.相机.
 >注册相机事件  尝试优化相机

sample/select

@@ -0,0 +1,18 @@
+
+
+
+
+1.使用八叉树过滤大部分搜索.
+
+
+2.拦选.
+->使用Box求交(提前过滤.)
+->点在盒子内部()
+->使用线相交(只要保证线相交就OK)
+End
+
+3.框选
+->使用box包含(提前过滤)
+End
+
+使用GPU优化

src/Application.ts

@@ -191,7 +191,6 @@ export class Application2
         new CameraControls(this.m_Viewer, this.m_Viewer.m_Render.domElement);
         // var gWorld_controls = new OrbitControls(this.m_Viewer.m_Camera.m_CurCamera, this.m_Viewer.m_Render.domElement);
 
-
         //绘制直线
         var line = new Line(new THREE.Vector3(0, 0, 0),
             new THREE.Vector3(100, 100, 0)
@@ -199,7 +198,7 @@ export class Application2
         this.m_Database.appendEntity(line);
         this.m_Viewer.m_bIsChange = true;
         //绘制方块
-        var box = new Solid3d(100, 200, 300);
+        var box = new Solid3d(3, 3, 3);
         this.m_Database.appendEntity(box);
 
         new DebugDatUi();

src/DatabaseServices/Entity.ts

@@ -32,6 +32,22 @@ export class Line extends Curve
         this.m_ThreeObj = new THREE.Line(geometry, material);
     }
 
+
+
+    //http://jsfiddle.net/hjx3rLmt/1/
+    setStartPoint(pt: THREE.Vector3)
+    {
+        if (this.m_ThreeObj instanceof THREE.Line)
+        {
+            if (this.m_ThreeObj.geometry instanceof THREE.Geometry)
+            {
+                this.m_ThreeObj.geometry.vertices[0].set(pt.x, pt.y, pt.z);
+
+                this.m_ThreeObj.geometry.verticesNeedUpdate = true;
+            }
+        }
+    }
+
 }
 
 export class Solid3d extends Entity

src/Editor/DebugDatUi.ts

@@ -1,6 +1,8 @@
 
 import * as dat from "dat.gui"
 import { Application2 } from "../Application";
+import { Entity, Line } from "../DatabaseServices/Entity";
+import * as THREE from "three"
 export class DebugDatUi
 {
     //UI.
@@ -10,6 +12,8 @@ export class DebugDatUi
     z: number = 0;
     arr: string = "a";
     color: string = "#ffae23";
+
+    linex: number = 0;
     constructor()
     {
         this.m_Ctrl_UI = new dat.GUI(
@@ -28,5 +32,19 @@ export class DebugDatUi
             Application2.Application.m_Viewer.m_Render.setClearColor(this.color);
             Application2.Application.m_Viewer.m_bIsChange = true;
         })
+
+        var xCtrl = this.m_Ctrl_UI.add(this, "linex");
+        xCtrl.onChange((value: any) =>
+        {
+            let ent: Entity = Application2.Application.m_Database.m_EntityCollection[0];
+            if (ent instanceof Line)
+            {
+                ent.setStartPoint(new THREE.Vector3(value, 0, 0));
+                Application2.Application.m_Viewer.m_bIsChange = true;
+            }
+            let ent2: Entity = Application2.Application.m_Database.m_EntityCollection[1];
+            ent2.m_ThreeObj.position.setX(value);
+        }
+        )
     }
 }

src/GraphicsSystem/Camera.ts

@@ -200,15 +200,26 @@ export class CameraControls
     //按键
     onKeyDown = (event: KeyboardEvent) =>
     {
-        switch (event.key)
-        {
-            case "Ctrl":
-                {
-                    break;
-                }
-        }
+        this[event.key] = true;
+        // switch (event.key)
+        // {
+        //     case "Ctrl":
+        //         {
+        //             this[event.key] = true;
+        //             break;
+        //         }
+        // }
     }
     onKeyUp = (event: KeyboardEvent) =>
     {
+        this[event.key] = false;
+        // switch (event.key)
+        // {
+        //     case "Ctrl":
+        //         {
+
+        //             break;
+        //         }
+        // }
     }
 }

src/GraphicsSystem/Viewer.ts

@@ -4,9 +4,20 @@ import { Database } from "../DatabaseServices/Database";
 import { Camera } from "./Camera";
 import * as THREE from "three";
 import Stats = require('stats.js')
+
+//
+
 export class Viewer
 {
     m_ViewHeight: number = 205;
+    //视角中心
+    m_Center: THREE.Vector3 = new THREE.Vector3();
+    //目标
+    m_Target: THREE.Vector3 = new THREE.Vector3();
+    //Up
+    m_Up: THREE.Vector3 = new THREE.Vector3();
+    //Rotate
+    m_Ro: THREE.Spherical = new THREE.Spherical();
     m_bIsChange: boolean = true;
     //渲染器
     m_Render: THREE.WebGLRenderer;  //暂时只用这个类型
@@ -67,8 +78,8 @@ export class Viewer
         //这里暂时初始化成这个. 未来将分离出 Viewer
         this.m_Render.setSize(window.innerWidth - 30, window.innerHeight - 30);
 
-        //设置它的背景色为白色
-        this.m_Render.setClearColor(0x000000, 0.5);
+        //设置它的背景色为黑色
+        this.m_Render.setClearColor(0x000000, 1);
     }
     //初始化相机
     initCamera()