选取事件。

src/Application.js

@@ -13,10 +13,12 @@ import Sidebar from './panel/Sidebar';
  */
 function Application(container, options) {
 
+    // 容器
     this.container = container;
     this.width = this.container.clientWidth;
     this.height = this.container.clientHeight;
 
+    // 配置
     this.options = new Options(options);
 
     // 事件
@@ -24,27 +26,15 @@ function Application(container, options) {
     this.call = this.event.call.bind(this.event);
     this.on = this.event.on.bind(this.event);
 
-    // 编辑器
-    this.editor = new Editor(this);
-
-    // 菜单栏
-    this.menubar = new Menubar(this);
-
-    // 编辑区
-    this.viewport = new Viewport(this);
-
-    // 侧边栏
-    this.sidebar = new Sidebar(this);
+    // 编辑器ui
+    this.editor = new Editor(this); // 编辑器
+    this.menubar = new Menubar(this); // 菜单栏
+    this.viewport = new Viewport(this); // 编辑区
+    this.sidebar = new Sidebar(this); // 侧边栏
     this.container.appendChild(this.sidebar.dom);
-
-    // 底部状态栏
-    this.statusBar = new StatusBar(this);
-
-    // 脚本编辑窗口
-    this.script = new Script(this);
-
-    // 启动窗口
-    this.player = new Player(this);
+    this.statusBar = new StatusBar(this); // 状态栏
+    this.script = new Script(this); // 脚本编辑窗口
+    this.player = new Player(this); // 启动窗口
     this.container.appendChild(this.player.dom);
 
     // 是否从文件中加载场景，从文件中加载场景的url格式是index.html#file=xxx
@@ -52,20 +42,20 @@ function Application(container, options) {
 }
 
 Application.prototype.start = function () {
-    this.call('appStart', this);
-
-    // 调用所有事件的start方法
+    // 启动事件 - 事件要在ui创建完成后启动
     this.event.start();
 
+    this.call('appStart', this);
     this.call('resize', this);
-
     this.call('initApp', this);
-
-    this.call('appStarted');
+    this.call('appStarted', this);
 };
 
 Application.prototype.stop = function () {
+    this.call('appStop', this);
+    this.call('appStoped', this);
 
+    this.event.stop();
 };
 
 export default Application;

src/editor/Viewport.js

@@ -198,6 +198,8 @@ function Viewport(app) {
     container.dom.addEventListener('touchstart', onTouchStart, false);
     container.dom.addEventListener('dblclick', onDoubleClick, false);
 
+    // 编辑器控件
+
     // controls need to be added *after* main logic,
     // otherwise controls.enabled doesn't work.
 

src/event/EventDispatcher.js

@@ -91,6 +91,7 @@ import SceneBackgroundChangedEvent from './viewport/SceneBackgroundChangedEvent'
 import HelperEvent from './viewport/HelperEvent';
 import ObjectEvent from './viewport/ObjectEvent';
 import GeometryEvent from './viewport/GeometryEvent';
+import PickEvent from './viewport/PickEvent';
 
 import TransformModeChangedEvent from './statusBar/TransformModeChangedEvent';
 import GridChangeEvent from './statusBar/GridChangeEvent';
@@ -198,6 +199,7 @@ function EventDispatcher(app) {
         new HelperEvent(this.app),
         new ObjectEvent(this.app),
         new GeometryEvent(this.app),
+        new PickEvent(this.app),
 
         // statusBar中的事件
         new TransformModeChangedEvent(this.app),

src/event/EventList.js

@@ -20,6 +20,8 @@ var EventList = [
     'appStart', // 应用程序开始前调用
     'appStarted', // 应用程序开始后调用
     'initApp', // 引用程序初始化
+    'appStop', // 程序开始结束前调用
+    'appStoped', // 程序结束后调用
 
     // editor事件
     'setTheme', // 设置编辑器主题

src/event/viewport/PickEvent.js

@@ -0,0 +1,134 @@
+import BaseEvent from '../BaseEvent';
+
+/**
+ * 选取事件
+ * @param {*} app 
+ */
+function PickEvent(app) {
+    BaseEvent.call(this, app);
+
+    this.raycaster = new THREE.Raycaster();
+    this.mouse = new THREE.Vector2();
+
+    this.onDownPosition = new THREE.Vector2();
+    this.onUpPosition = new THREE.Vector2();
+    this.onDoubleClickPosition = new THREE.Vector2();
+}
+
+PickEvent.prototype = Object.create(BaseEvent.prototype);
+PickEvent.prototype.constructor = PickEvent;
+
+PickEvent.prototype.start = function () {
+    var container = this.app.viewport.container;
+
+    container.dom.addEventListener('mousedown', this.onMouseDown.bind(this), false);
+    container.dom.addEventListener('touchstart', this.onTouchStart.bind(this), false);
+    container.dom.addEventListener('dblclick', this.onDoubleClick.bind(this), false);
+};
+
+PickEvent.prototype.stop = function () {
+    var container = this.app.viewport.container;
+
+    container.dom.removeEventListener('mousedown', this.onMouseDown, false);
+    container.dom.removeEventListener('touchstart', this.onTouchStart, false);
+    container.dom.removeEventListener('dblclick', this.onDoubleClick, false);
+};
+
+PickEvent.prototype.onMouseDown = function (event) {
+    var container = this.app.viewport.container;
+
+    event.preventDefault();
+
+    var array = this.getMousePosition(container.dom, event.clientX, event.clientY);
+    this.onDownPosition.fromArray(array);
+
+    document.addEventListener('mouseup', this.onMouseUp.bind(this), false);
+};
+
+PickEvent.prototype.onMouseUp = function (event) {
+    var container = this.app.viewport.container;
+
+    var array = this.getMousePosition(container.dom, event.clientX, event.clientY);
+    this.onUpPosition.fromArray(array);
+
+    this.handleClick();
+
+    document.removeEventListener('mouseup', this.onMouseUp, false);
+};
+
+PickEvent.prototype.onTouchStart = function (event) {
+    var container = this.app.viewport.container;
+
+    var touch = event.changedTouches[0];
+
+    var array = this.getMousePosition(container.dom, touch.clientX, touch.clientY);
+    this.onDownPosition.fromArray(array);
+
+    document.addEventListener('touchend', this.onTouchEnd.bind(this), false);
+};
+
+PickEvent.prototype.onTouchEnd = function (event) {
+    var container = this.app.viewport.container;
+
+    var touch = event.changedTouches[0];
+
+    var array = this.getMousePosition(container.dom, touch.clientX, touch.clientY);
+    this.onUpPosition.fromArray(array);
+
+    this.handleClick();
+
+    document.removeEventListener('touchend', this.onTouchEnd, false);
+}
+
+PickEvent.prototype.onDoubleClick = function (event) {
+    var container = this.app.viewport.container;
+    var objects = this.app.editor.objects;
+
+    var array = this.getMousePosition(container.dom, event.clientX, event.clientY);
+    this.onDoubleClickPosition.fromArray(array);
+
+    var intersects = this.getIntersects(this.onDoubleClickPosition, objects);
+
+    if (intersects.length > 0) {
+        var intersect = intersects[0];
+        this.app.call('objectFocused', this, intersect.object);
+    }
+};
+
+PickEvent.prototype.getIntersects = function (point, objects) {
+    this.mouse.set((point.x * 2) - 1, -(point.y * 2) + 1);
+    this.raycaster.setFromCamera(this.mouse, this.app.editor.camera);
+    return this.raycaster.intersectObjects(objects);
+};
+
+PickEvent.prototype.getMousePosition = function (dom, x, y) {
+    var rect = dom.getBoundingClientRect();
+    return [(x - rect.left) / rect.width, (y - rect.top) / rect.height];
+};
+
+PickEvent.prototype.handleClick = function () {
+    var container = this.app.viewport.container;
+    var editor = this.app.editor;
+    var objects = editor.objects;
+
+    if (this.onDownPosition.distanceTo(this.onUpPosition) === 0) {
+        var intersects = this.getIntersects(this.onUpPosition, objects);
+
+        if (intersects.length > 0) {
+            var object = intersects[0].object;
+
+            if (object.userData.object !== undefined) {
+                // helper
+                editor.select(object.userData.object);
+            } else {
+                editor.select(object);
+            }
+        } else {
+            editor.select(null);
+        }
+
+        this.app.call('render');
+    }
+};
+
+export default PickEvent;