Skip to content

Commit fbac4a1

Browse files
redcamelredcamel
committed
RedBoxSelection, screenToWorld 모바일처리
1 parent b38a3c9 commit fbac4a1

File tree

4 files changed

+53
-35
lines changed

4 files changed

+53
-35
lines changed

‎example/etc/screenToWorld.html

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
~ RedGL - MIT License
33
~ Copyright (c) 2018 - 2019 By RedCamel([email protected])
44
~ https://github.com/redcamel/RedGL2/blob/dev/LICENSE
5-
~ Last modification time of this file - 2019.4.30 19:54
5+
~ Last modification time of this file - 2019.4.30 20:40
66
-->
77

88
<!DOCTYPE html>
@@ -41,9 +41,10 @@
4141
// 씬 생성
4242
tScene = RedScene(redGL);
4343
// 카메라 생성
44-
tController = RedObitController(redGL);
45-
tController.pan = 0;
46-
tController.tilt = -45;
44+
tController = RedCamera();
45+
tController.z = -10
46+
tController.y = 10
47+
tController.lookAt(0, 0, 0)
4748
// 렌더러 생성
4849
tRenderer = RedRenderer();
4950
// 뷰생성 및 적용
@@ -86,10 +87,11 @@
8687
tText.y = 2;
8788
tMesh.addChild(tText);
8889
document.body.addEventListener(
89-
'mousemove', function (e) {
90+
RedGLDetect.BROWSER_INFO.isMobile ? 'touchmove' : 'mousemove', function (e) {
9091
var currentPosition = RedGLUtil.screenToWorld(
9192
[
92-
e.layerX, e.layerY,
93+
RedGLDetect.BROWSER_INFO.isMobile ? e.changedTouches[0].clientX * window.devicePixelRatio : e.layerX * window.devicePixelRatio,
94+
RedGLDetect.BROWSER_INFO.isMobile ? e.changedTouches[0].clientY * window.devicePixelRatio : e.layerY * window.devicePixelRatio,
9395
tView['_viewRect'][2], tView['_viewRect'][3]
9496
],
9597
tController

‎release/RedGL.js

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* RedGL - MIT License
33
* Copyright (c) 2018 - 2019 By RedCamel([email protected])
44
* https://github.com/redcamel/RedGL2/blob/dev/LICENSE
5-
* Last modification time of this file - 2019.4.30 19:55
5+
* Last modification time of this file - 2019.4.30 20:58
66
*/
77

88
/**DOC:
@@ -1828,7 +1828,7 @@ var RedGLDetect;
18281828
* RedGL - MIT License
18291829
* Copyright (c) 2018 - 2019 By RedCamel([email protected])
18301830
* https://github.com/redcamel/RedGL2/blob/dev/LICENSE
1831-
* Last modification time of this file - 2019.4.30 18:53
1831+
* Last modification time of this file - 2019.4.30 19:34
18321832
*/
18331833

18341834
"use strict";
@@ -2805,16 +2805,25 @@ var RedGL;
28052805
var RedBoxSelection;
28062806
(function () {
28072807
var tRectBox;
2808-
var tXkey, tYkey;
28092808
var tW, tH;
28102809
var startPoint = {x: 0, y: 0};
28112810
var dragPoint = {x: 0, y: 0};
28122811
var currentRect = [];
28132812
var looper, calRect;
28142813
calRect = function (e, targetView) {
2815-
// console.log(e)
2816-
dragPoint.x = e[tXkey];
2817-
dragPoint.y = e[tYkey];
2814+
console.log(e)
2815+
if (RedGLDetect.BROWSER_INFO.isMobile) {
2816+
if (e.changedTouches) {
2817+
dragPoint.x = e.changedTouches[0].clientX;
2818+
dragPoint.y = e.changedTouches[0].clientY;
2819+
} else {
2820+
dragPoint.x = startPoint.x;
2821+
dragPoint.y = startPoint.y;
2822+
}
2823+
} else {
2824+
dragPoint.x = e.clientX;
2825+
dragPoint.y = e.clientY;
2826+
}
28182827
tW = dragPoint.x - startPoint.x;
28192828
tH = dragPoint.y - startPoint.y;
28202829
currentRect = [startPoint.x, startPoint.y, tW, tH];
@@ -2882,17 +2891,16 @@ var RedBoxSelection;
28822891
if (!redGL['_datas']['RedBoxSelection']) redGL['_datas']['RedBoxSelection'] = this;
28832892
else return this;
28842893
[RedGLDetect.BROWSER_INFO.move, RedGLDetect.BROWSER_INFO.down, RedGLDetect.BROWSER_INFO.up].forEach(function (v) {
2885-
tXkey = 'clientX';
2886-
tYkey = 'clientY';
2894+
28872895
var HD;
28882896
HD = function (e) {
28892897
var result = calRect(e, redView);
28902898
if (callback) callback(result)
28912899
};
28922900
redGL['_canvas'].addEventListener(v, function (e) {
28932901
if (e.type === RedGLDetect.BROWSER_INFO.down) {
2894-
startPoint.x = e[tXkey];
2895-
startPoint.y = e[tYkey];
2902+
dragPoint.x = startPoint.x = RedGLDetect.BROWSER_INFO.isMobile ? e.changedTouches[0].clientX : e.clientX;
2903+
dragPoint.y = startPoint.y = RedGLDetect.BROWSER_INFO.isMobile ? e.changedTouches[0].clientY : e.clientY;
28962904
if (!tRectBox) {
28972905
tRectBox = document.createElement('div');
28982906
tRectBox.style.cssText = 'position:fixed;border:1px dashed red;z-index:0';
@@ -2904,12 +2912,12 @@ var RedBoxSelection;
29042912
document.body.appendChild(tRectBox);
29052913
if (redView.camera && redView.camera.camera) redView.camera.needUpdate = false;
29062914
HD({});
2907-
window.addEventListener('mousemove', HD);
2908-
window.addEventListener('click', function () {
2915+
window.addEventListener(RedGLDetect.BROWSER_INFO.move, HD);
2916+
window.addEventListener(RedGLDetect.BROWSER_INFO.isMobile ? 'touchend' : 'click', function () {
29092917
if (redView.camera.camera) redView.camera.needUpdate = true;
29102918
if (tRectBox.parentNode) document.body.removeChild(tRectBox);
29112919
window.removeEventListener(
2912-
'mousemove', HD
2920+
RedGLDetect.BROWSER_INFO.move, HD
29132921
)
29142922
})
29152923
}
@@ -27307,4 +27315,4 @@ var RedGLOffScreen;
2730727315
};
2730827316
RedWorkerCode = RedWorkerCode.toString().replace(/^function ?. ?\) ?\{|\}\;?$/g, '');
2730927317
})();
27310-
})();var RedGL_VERSION = {version : 'RedGL Release. last update( 2019-04-30 19:55:25)' };console.log(RedGL_VERSION);
27318+
})();var RedGL_VERSION = {version : 'RedGL Release. last update( 2019-04-30 20:58:25)' };console.log(RedGL_VERSION);

‎release/RedGL.min.js

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/RedBoxSelection.js

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,31 @@
22
* RedGL - MIT License
33
* Copyright (c) 2018 - 2019 By RedCamel([email protected])
44
* https://github.com/redcamel/RedGL2/blob/dev/LICENSE
5-
* Last modification time of this file - 2019.4.30 19:6
5+
* Last modification time of this file - 2019.4.30 20:58
66
*/
77
"use strict";
88
var RedBoxSelection;
99
(function () {
1010
var tRectBox;
11-
var tXkey, tYkey;
1211
var tW, tH;
1312
var startPoint = {x: 0, y: 0};
1413
var dragPoint = {x: 0, y: 0};
1514
var currentRect = [];
1615
var looper, calRect;
1716
calRect = function (e, targetView) {
18-
// console.log(e)
19-
dragPoint.x = e[tXkey];
20-
dragPoint.y = e[tYkey];
17+
console.log(e)
18+
if (RedGLDetect.BROWSER_INFO.isMobile) {
19+
if (e.changedTouches) {
20+
dragPoint.x = e.changedTouches[0].clientX;
21+
dragPoint.y = e.changedTouches[0].clientY;
22+
} else {
23+
dragPoint.x = startPoint.x;
24+
dragPoint.y = startPoint.y;
25+
}
26+
} else {
27+
dragPoint.x = e.clientX;
28+
dragPoint.y = e.clientY;
29+
}
2130
tW = dragPoint.x - startPoint.x;
2231
tH = dragPoint.y - startPoint.y;
2332
currentRect = [startPoint.x, startPoint.y, tW, tH];
@@ -85,17 +94,16 @@ var RedBoxSelection;
8594
if (!redGL['_datas']['RedBoxSelection']) redGL['_datas']['RedBoxSelection'] = this;
8695
else return this;
8796
[RedGLDetect.BROWSER_INFO.move, RedGLDetect.BROWSER_INFO.down, RedGLDetect.BROWSER_INFO.up].forEach(function (v) {
88-
tXkey = 'clientX';
89-
tYkey = 'clientY';
97+
9098
var HD;
9199
HD = function (e) {
92100
var result = calRect(e, redView);
93101
if (callback) callback(result)
94102
};
95103
redGL['_canvas'].addEventListener(v, function (e) {
96104
if (e.type === RedGLDetect.BROWSER_INFO.down) {
97-
startPoint.x = e[tXkey];
98-
startPoint.y = e[tYkey];
105+
dragPoint.x = startPoint.x = RedGLDetect.BROWSER_INFO.isMobile ? e.changedTouches[0].clientX : e.clientX;
106+
dragPoint.y = startPoint.y = RedGLDetect.BROWSER_INFO.isMobile ? e.changedTouches[0].clientY : e.clientY;
99107
if (!tRectBox) {
100108
tRectBox = document.createElement('div');
101109
tRectBox.style.cssText = 'position:fixed;border:1px dashed red;z-index:0';
@@ -107,12 +115,12 @@ var RedBoxSelection;
107115
document.body.appendChild(tRectBox);
108116
if (redView.camera && redView.camera.camera) redView.camera.needUpdate = false;
109117
HD({});
110-
window.addEventListener('mousemove', HD);
111-
window.addEventListener('click', function () {
118+
window.addEventListener(RedGLDetect.BROWSER_INFO.move, HD);
119+
window.addEventListener(RedGLDetect.BROWSER_INFO.isMobile ? 'touchend' : 'click', function () {
112120
if (redView.camera.camera) redView.camera.needUpdate = true;
113121
if (tRectBox.parentNode) document.body.removeChild(tRectBox);
114122
window.removeEventListener(
115-
'mousemove', HD
123+
RedGLDetect.BROWSER_INFO.move, HD
116124
)
117125
})
118126
}

0 commit comments

Comments
 (0)