From 1331644962b737a4c1906b483c6061d77aaf7715 Mon Sep 17 00:00:00 2001 From: Stewart Allen Date: Tue, 17 Mar 2020 15:29:47 -0400 Subject: [PATCH] add zoom accelerator keys --- js/moto-ctrl.js | 74 +++++++++++++++++++++++++++++------------------- js/moto-space.js | 23 +++++++-------- 2 files changed, 56 insertions(+), 41 deletions(-) diff --git a/js/moto-ctrl.js b/js/moto-ctrl.js index 26c43c0f..8578a718 100644 --- a/js/moto-ctrl.js +++ b/js/moto-ctrl.js @@ -2,13 +2,14 @@ "use strict"; -var gs_moto_ctrl = exports; +let gs_moto_ctrl = exports; +let MOTO = window.moto = window.moto || {}; /** - * Adapted from OrbitControls + * Adapted from THREE.OrbitControls */ -THREE.CubeControls = function (object, domElement, notify, slider) { +MOTO.CTRL = function (object, domElement, notify, slider) { this.object = object; this.domElement = ( domElement !== undefined ) ? domElement : document; @@ -55,12 +56,21 @@ THREE.CubeControls = function (object, domElement, notify, slider) { this.noKeys = false; // The four arrow keys - this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 }; + this.keys = { + UP: 38, + LEFT: 37, + RIGHT: 39, + BOTTOM: 40 + }; // Mouse buttons - this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT }; + this.mouseButtons = { + ORBIT: THREE.MOUSE.LEFT, + ZOOM: THREE.MOUSE.MIDDLE, + PAN: THREE.MOUSE.RIGHT + }; - var scope = this, + let scope = this, domEl = scope.domElement, EPS = 0.000001, rotateStart = new THREE.Vector2(), @@ -93,7 +103,7 @@ THREE.CubeControls = function (object, domElement, notify, slider) { startEvent = { type: 'start'}, endEvent = { type: 'end'}; - var STATE = { NONE: -1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_DOLLY: 4, TOUCH_PAN: 5}, + let STATE = { NONE: -1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_DOLLY: 4, TOUCH_PAN: 5}, state = STATE.NONE, MODE = { PERSPECTIVE: 1, ORTHOGRAPHIC: 2, UNKNOWN: 3}, mode = isValue(object.fov) ? MODE.PERSPECTIVE : isValue(object.top) ? MODE.ORTHOGRAPHIC : MODE.UNKNOWN; @@ -112,7 +122,7 @@ THREE.CubeControls = function (object, domElement, notify, slider) { // pass in distance in world space to move left this.panLeft = function (distance) { - var te = this.object.matrix.elements; + let te = this.object.matrix.elements; // get X column of matrix panOffset.set(te[ 0 ], te[ 1 ], te[ 2 ]); @@ -122,7 +132,7 @@ THREE.CubeControls = function (object, domElement, notify, slider) { // pass in distance in world space to move up this.panUp = function (distance) { - var te = this.object.matrix.elements; + let te = this.object.matrix.elements; // get Y column of matrix panOffset.set(te[ 4 ], te[ 5 ], te[ 6 ]); @@ -133,13 +143,13 @@ THREE.CubeControls = function (object, domElement, notify, slider) { // pass in x,y of change desired in pixel space, // right and down are positive this.pan = function (deltaX, deltaY) { - var element = scope.domElement === document ? scope.domElement.body : scope.domElement; + let element = scope.domElement === document ? scope.domElement.body : scope.domElement; switch (mode) { case MODE.PERSPECTIVE: - var position = scope.object.position; - var offset = position.clone().sub(scope.target); - var targetDistance = offset.length(); + let position = scope.object.position; + let offset = position.clone().sub(scope.target); + let targetDistance = offset.length(); // half of the fov is center to top of screen targetDistance *= Math.tan(( scope.object.fov / 2 ) * Math.PI / 180.0); @@ -160,8 +170,8 @@ THREE.CubeControls = function (object, domElement, notify, slider) { } function firstValue(choices) { - for (var i=0; i 0) { scope.dollyOut(); } else if (delta < 0) { scope.dollyIn(); } + scope.zoomSpeed = saveZoomSpeed; + scope.update(); scope.dispatchEvent(startEvent); scope.dispatchEvent(endEvent); @@ -459,9 +475,9 @@ THREE.CubeControls = function (object, domElement, notify, slider) { state = STATE.TOUCH_DOLLY; - var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX; - var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY; - var distance = Math.sqrt(dx * dx + dy * dy); + let dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX; + let dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY; + let distance = Math.sqrt(dx * dx + dy * dy); dollyStart.set(0, distance); break; @@ -485,7 +501,7 @@ THREE.CubeControls = function (object, domElement, notify, slider) { event.preventDefault(); event.stopPropagation(); - var element = scope.domElement === document ? scope.domElement.body : scope.domElement; + let element = scope.domElement === document ? scope.domElement.body : scope.domElement; switch (event.touches.length) { case 1: // one-fingered touch: rotate @@ -508,9 +524,9 @@ THREE.CubeControls = function (object, domElement, notify, slider) { if (scope.noZoom === true) return; if (state !== STATE.TOUCH_DOLLY) return; - var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX; - var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY; - var distance = Math.sqrt(dx * dx + dy * dy); + let dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX; + let dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY; + let distance = Math.sqrt(dx * dx + dy * dy); if (reverseZoom) distance = -distance; @@ -563,4 +579,4 @@ THREE.CubeControls = function (object, domElement, notify, slider) { window.addEventListener('keydown', onKeyDown, false); }; -THREE.CubeControls.prototype = Object.create(THREE.EventDispatcher.prototype); +MOTO.CTRL.prototype = Object.create(THREE.EventDispatcher.prototype); diff --git a/js/moto-space.js b/js/moto-space.js index e2bca05f..00adbb99 100644 --- a/js/moto-space.js +++ b/js/moto-space.js @@ -2,6 +2,7 @@ "use strict"; let gs_moto_space = exports; +let MOTO = window.moto = window.moto || {}; (function() { @@ -526,7 +527,7 @@ let gs_moto_space = exports; * Space Object ******************************************************************* */ - let Space = { + let Space = MOTO.Space = { alignTracking: alignTracking, addEventListener: addEventListener, addEventHandlers: addEventHandlers, @@ -656,12 +657,17 @@ let gs_moto_space = exports; renderer.setSize(width(), height()); domelement.appendChild(renderer.domElement); - viewControl = new THREE.CubeControls(camera, domelement, function (position, moved) { - if (platform) platform.visible = hidePlatformBelow ? initialized && position.y >= 0 && showPlatform : showPlatform; - if (trackcam) trackcam.position.copy(camera.position); + viewControl = new MOTO.CTRL(camera, domelement, function (position, moved) { + if (platform) { + platform.visible = hidePlatformBelow ? + initialized && position.y >= 0 && showPlatform : showPlatform; + } + if (trackcam) { + trackcam.position.copy(camera.position); + } renderer.render(SCENE, camera); if (moved && platformOnMove) { - if (platformMoveTimer) clearTimeout(platformMoveTimer); + clearTimeout(platformMoveTimer); platformMoveTimer = setTimeout(platformOnMove, 500); } }, slider); @@ -724,11 +730,4 @@ let gs_moto_space = exports; } }; - /** ****************************************************************** - * Connect to moto - ******************************************************************* */ - - if (!window.moto) window.moto = {}; - window.moto.Space = Space; - })();