three-base 1.129.15 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/index.js +1 -37
- package/index.ts +1 -61
- package/package.json +3 -4
- package/lib/ApngTexture.d.ts +0 -13
- package/lib/ApngTexture.js +0 -61
- package/lib/ApngTexture.ts +0 -91
- package/lib/ApngTextureManage.d.ts +0 -18
- package/lib/ApngTextureManage.js +0 -87
- package/lib/ApngTextureManage.ts +0 -130
- package/lib/EventMesh.d.ts +0 -18
- package/lib/EventMesh.js +0 -59
- package/lib/EventMesh.ts +0 -79
- package/lib/ExtrudeMesh.d.ts +0 -111
- package/lib/ExtrudeMesh.js +0 -363
- package/lib/ExtrudeMesh.ts +0 -571
- package/lib/FPScontrol.d.ts +0 -44
- package/lib/FPScontrol.js +0 -170
- package/lib/FPScontrol.ts +0 -209
- package/lib/InstancedGroupMesh.d.ts +0 -10
- package/lib/InstancedGroupMesh.js +0 -63
- package/lib/InstancedGroupMesh.ts +0 -80
- package/lib/KeyFrameAnimation.d.ts +0 -25
- package/lib/KeyFrameAnimation.js +0 -78
- package/lib/KeyFrameAnimation.ts +0 -122
- package/lib/PlaneText.d.ts +0 -37
- package/lib/PlaneText.js +0 -30
- package/lib/PlaneText.ts +0 -58
- package/lib/PlaneWithHtml.d.ts +0 -11
- package/lib/PlaneWithHtml.js +0 -67
- package/lib/PlaneWithHtml.ts +0 -84
- package/lib/PointLight/PointLight.d.ts +0 -13
- package/lib/PointLight/PointLight.js +0 -63
- package/lib/PointLight/PointLight.ts +0 -74
- package/lib/PointLight/pointLight_map.png +0 -0
- package/lib/Sky/Sky.d.ts +0 -13
- package/lib/Sky/Sky.js +0 -28
- package/lib/Sky/Sky.ts +0 -36
- package/lib/Sky/bluesky.jpg +0 -0
- package/lib/SpriteText.d.ts +0 -45
- package/lib/SpriteText.js +0 -162
- package/lib/SpriteText.ts +0 -189
- package/lib/SpriteText2.d.ts +0 -47
- package/lib/SpriteText2.js +0 -197
- package/lib/SpriteText2.ts +0 -236
- package/lib/Text3D/Text3D.d.ts +0 -20
- package/lib/Text3D/Text3D.js +0 -61
- package/lib/Text3D/Text3D.ts +0 -92
- package/lib/Text3D/fontController.d.ts +0 -59
- package/lib/Text3D/fontController.js +0 -200
- package/lib/Text3D/fontController.ts +0 -285
- package/lib/Text3D/gentilis.json +0 -811
- package/lib/ThreeBase.d.ts +0 -59
- package/lib/ThreeBase.js +0 -395
- package/lib/ThreeBase.ts +0 -475
- package/lib/ThreeMouse.d.ts +0 -39
- package/lib/ThreeMouse.js +0 -357
- package/lib/ThreeMouse.ts +0 -464
- package/lib/Transition.d.ts +0 -43
- package/lib/Transition.js +0 -196
- package/lib/Transition.ts +0 -268
- package/lib/index.d.ts +0 -22
- package/lib/keyContorls.d.ts +0 -25
- package/lib/keyContorls.js +0 -98
- package/lib/keyContorls.ts +0 -127
- package/lib/planeModal1/PlaneModal1.d.ts +0 -31
- package/lib/planeModal1/PlaneModal1.js +0 -104
- package/lib/planeModal1/PlaneModal1.ts +0 -150
- package/lib/planeModal1/planeModal.png +0 -0
- package/lib/shaders.d.ts +0 -17
- package/lib/shaders.js +0 -245
- package/lib/shaders.ts +0 -264
- package/lib/spriteModal1/SpriteModal1.d.ts +0 -30
- package/lib/spriteModal1/SpriteModal1.js +0 -109
- package/lib/spriteModal1/SpriteModal1.ts +0 -159
- package/lib/spriteModal1/spriteModal1.png +0 -0
- package/lib/stroke_pass/FullScreenQuad.d.ts +0 -7
- package/lib/stroke_pass/FullScreenQuad.js +0 -25
- package/lib/stroke_pass/FullScreenQuad.ts +0 -33
- package/lib/stroke_pass/stroke_pass.d.ts +0 -2
- package/lib/stroke_pass/stroke_pass.js +0 -190
- package/lib/stroke_pass/stroke_pass.ts +0 -211
- package/lib/threeLoader.d.ts +0 -20
- package/lib/threeLoader.js +0 -110
- package/lib/threeLoader.ts +0 -136
- package/lib/threeUtils.d.ts +0 -41
- package/lib/threeUtils.js +0 -179
- package/lib/threeUtils.ts +0 -212
- package/lib/type.d.ts +0 -0
- package/lib/type.js +0 -10
- package/lib/type.ts +0 -13
package/lib/Transition.ts
DELETED
|
@@ -1,268 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* @Author: xiaosihan
|
|
3
|
-
* @Date: 2021-04-10 02:44:01
|
|
4
|
-
* @Last Modified by: xiaosihan
|
|
5
|
-
* @Last Modified time: 2022-06-22 19:44:23
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
import threeUtils from "./threeUtils";
|
|
9
|
-
|
|
10
|
-
function bezier(arr: [number, number, number, number], t: number) {
|
|
11
|
-
const ut = 1 - t;
|
|
12
|
-
const a1 = arr[1] * ut + arr[2] * t;
|
|
13
|
-
const result = ((arr[0] * ut + arr[1] * t) * ut + a1 * t) * ut + (a1 * ut + (arr[2] * ut + arr[3] * t) * t) * t;
|
|
14
|
-
return result;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
interface TParam { [key: string]: number }
|
|
18
|
-
|
|
19
|
-
// 过渡动画插件
|
|
20
|
-
export default class Transition {
|
|
21
|
-
|
|
22
|
-
/**
|
|
23
|
-
*Creates an instance of transition.
|
|
24
|
-
* @param {{ [key: string]: number }} // 初始值
|
|
25
|
-
* @param {[0.8, 0, 0.2, 1]} // 贝塞尔曲线
|
|
26
|
-
* @param {number} [duration=1000] // 过渡时间
|
|
27
|
-
* @memberof transition
|
|
28
|
-
*/
|
|
29
|
-
constructor(
|
|
30
|
-
param: TParam = {},
|
|
31
|
-
bezier: [number, number, number, number] = [0.8, 0, 0.2, 1],
|
|
32
|
-
duration = 500
|
|
33
|
-
) {
|
|
34
|
-
|
|
35
|
-
this.setDuration(duration);
|
|
36
|
-
|
|
37
|
-
this.setBezier(bezier);
|
|
38
|
-
|
|
39
|
-
this.reset(param);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
// 所有的 key 的枚举
|
|
43
|
-
_keys: Array<string> = [];
|
|
44
|
-
|
|
45
|
-
// 贝塞尔曲线
|
|
46
|
-
_bezier: [number, number, number, number] = [0.8, 0, 0.2, 1];
|
|
47
|
-
|
|
48
|
-
// x轴贝塞尔
|
|
49
|
-
_Xbezier: [number, number, number, number] = [0, 0.8, 0.2, 1];
|
|
50
|
-
|
|
51
|
-
// y轴贝塞尔
|
|
52
|
-
_Ybezier: [number, number, number, number] = [0, 0, 1, 1];
|
|
53
|
-
|
|
54
|
-
setBezier(bezier: [number, number, number, number] = [0.8, 0, 0.2, 1]): this {
|
|
55
|
-
this._bezier = [...bezier];
|
|
56
|
-
this._Xbezier = [0, bezier[0], bezier[2], 1];
|
|
57
|
-
this._Ybezier = [0, bezier[1], bezier[3], 1];
|
|
58
|
-
return this;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
// 当前时间戳
|
|
62
|
-
timeTemp = performance.now();
|
|
63
|
-
|
|
64
|
-
// 过渡时间
|
|
65
|
-
_duration = 0;
|
|
66
|
-
|
|
67
|
-
//延时
|
|
68
|
-
_delay = 0;
|
|
69
|
-
|
|
70
|
-
// 设置过渡时间
|
|
71
|
-
setDuration(duration = 500): this {
|
|
72
|
-
this._duration = duration;
|
|
73
|
-
return this;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
// 设置延时
|
|
77
|
-
setDelay(delay = 0) {
|
|
78
|
-
this._delay = delay;
|
|
79
|
-
return this;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
// 存储 每个参数的 起始位置 起始时间 终止位置 终止时间
|
|
83
|
-
_: { [key: string]: number } = {};
|
|
84
|
-
|
|
85
|
-
private onChangeCall = (josn: { [key: string]: number }) => { };
|
|
86
|
-
|
|
87
|
-
// 执行过度动画
|
|
88
|
-
run({ timeTemp }: any) {
|
|
89
|
-
this.timeTemp = timeTemp;
|
|
90
|
-
if (!this.onChangeCall || this.isDone()) {
|
|
91
|
-
threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
|
|
92
|
-
} else {
|
|
93
|
-
this.onChangeCall(this.getJson());
|
|
94
|
-
}
|
|
95
|
-
return this;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
runbindThis = this.run.bind(this);
|
|
99
|
-
|
|
100
|
-
// 设置动画对象的回调事件
|
|
101
|
-
onChange(onChangeCall: (josn: { [key: string]: number }) => void): this {
|
|
102
|
-
this.onChangeCall = onChangeCall;
|
|
103
|
-
this.onChangeCall(this.getJson());
|
|
104
|
-
return this;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
// 计算当前 key 的值
|
|
108
|
-
get(key: string | number): number {
|
|
109
|
-
|
|
110
|
-
key = String(key);
|
|
111
|
-
|
|
112
|
-
if (this._keys.includes(key) && this.timeTemp < (this._[key + "_startTime"] + this._duration)) {
|
|
113
|
-
|
|
114
|
-
let start = this._[key + "_start"];
|
|
115
|
-
|
|
116
|
-
let end = this._[key + "_end"];
|
|
117
|
-
|
|
118
|
-
let timeProgress = Math.min(1, Math.max(0, (this.timeTemp - this._[key + "_startTime"]) / this._duration));
|
|
119
|
-
|
|
120
|
-
// 斜率
|
|
121
|
-
let t = 0;
|
|
122
|
-
|
|
123
|
-
// 微分法 求斜率t
|
|
124
|
-
while (bezier(this._Xbezier, t + 0.1) < timeProgress) {
|
|
125
|
-
t += 0.1;
|
|
126
|
-
}
|
|
127
|
-
while (bezier(this._Xbezier, t + 0.01) < timeProgress) {
|
|
128
|
-
t += 0.01;
|
|
129
|
-
}
|
|
130
|
-
while (bezier(this._Xbezier, t + 0.001) < timeProgress) {
|
|
131
|
-
t += 0.001;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
t = Math.min(1, Math.max(0, t)) // 斜率最大为1
|
|
135
|
-
|
|
136
|
-
// 通过斜率求y值
|
|
137
|
-
return (bezier(this._Ybezier, t) * (end - start)) + start;
|
|
138
|
-
|
|
139
|
-
} else if (this._keys.includes(key) && this.timeTemp >= (this._[key + "_startTime"] + this._duration)) {
|
|
140
|
-
|
|
141
|
-
return this._[key + "_end"];
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
// `没有 ${key} 的值`;
|
|
145
|
-
return 0;
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
async set(param: TParam): Promise<this> {
|
|
149
|
-
|
|
150
|
-
let timetemp = performance.now() + this._delay;;
|
|
151
|
-
|
|
152
|
-
for (let key in param) {
|
|
153
|
-
|
|
154
|
-
// 有就赋值
|
|
155
|
-
if (this._keys.includes(key) && Math.abs(param[key] - this._[key + "_end"]) > 0.001) {
|
|
156
|
-
|
|
157
|
-
this._[key + "_start"] = this.get(key);
|
|
158
|
-
|
|
159
|
-
this._[key + "_end"] = param[key];
|
|
160
|
-
// 起始时间
|
|
161
|
-
this._[key + "_startTime"] = timetemp;
|
|
162
|
-
|
|
163
|
-
// 执行状态未完成
|
|
164
|
-
this._isDone = false;
|
|
165
|
-
|
|
166
|
-
// 没有就添加一个
|
|
167
|
-
} else if (!this._keys.includes(key)) {
|
|
168
|
-
|
|
169
|
-
this._[key + "_start"] = param[key];
|
|
170
|
-
|
|
171
|
-
this._[key + "_end"] = param[key];
|
|
172
|
-
// 起始时间
|
|
173
|
-
this._[key + "_startTime"] = timetemp - this._duration;
|
|
174
|
-
|
|
175
|
-
// 执行状态未完成
|
|
176
|
-
this._isDone = false;
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
if (!this._keys.includes(key)) {
|
|
180
|
-
this._keys.push(key);
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
// // 执行状态未完成
|
|
184
|
-
// this._isDone = false;
|
|
185
|
-
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
if (!this._isDone) {
|
|
189
|
-
threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
|
|
190
|
-
threeUtils.addEventListener("requestAnimationFrame", this.runbindThis);
|
|
191
|
-
await new Promise(resolve => setTimeout(resolve, this._duration + 50));
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
return this;
|
|
195
|
-
}
|
|
196
|
-
// 重置起始和终止位置
|
|
197
|
-
reset(param: TParam): this {
|
|
198
|
-
|
|
199
|
-
for (let key in param) {
|
|
200
|
-
|
|
201
|
-
if (!this._keys.includes(key)) {
|
|
202
|
-
this._keys.push(key);
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
this._[key + "_start"] = param[key];
|
|
206
|
-
this._[key + "_end"] = param[key];
|
|
207
|
-
this._[key + "_startTime"] = -this._duration;
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
if (this.onChangeCall) {
|
|
211
|
-
this.onChangeCall(this.getJson());
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
this._isDone = true;
|
|
215
|
-
return this;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
// 获取过渡对象上面的key
|
|
219
|
-
getKeys(): string[] {
|
|
220
|
-
return [...this._keys];
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
// 判断是否有这个参数
|
|
224
|
-
hasKey(key: string): boolean {
|
|
225
|
-
return this._keys.includes(key);
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
// 获取全部参数
|
|
229
|
-
getJson(): { [key: string]: number } {
|
|
230
|
-
let keys = this.getKeys();
|
|
231
|
-
|
|
232
|
-
let json: { [key: string]: number } = {};
|
|
233
|
-
|
|
234
|
-
keys.map(key => {
|
|
235
|
-
json[key] = this.get(key);
|
|
236
|
-
});
|
|
237
|
-
return json;
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
_isDone = false;
|
|
241
|
-
|
|
242
|
-
// 是否执行完成了
|
|
243
|
-
isDone(): boolean {
|
|
244
|
-
|
|
245
|
-
if (this._isDone) {
|
|
246
|
-
return true;
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
let isisDone = false;
|
|
250
|
-
|
|
251
|
-
for (let i in this._keys) {
|
|
252
|
-
|
|
253
|
-
isisDone = this._[this._keys[i] + "_startTime"] + this._duration < this.timeTemp;
|
|
254
|
-
|
|
255
|
-
// 只要有一个没有完成 都算没有完成 过渡
|
|
256
|
-
if (!isisDone) {
|
|
257
|
-
return false;
|
|
258
|
-
}
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
if (!this._isDone) {
|
|
262
|
-
this._isDone = true;
|
|
263
|
-
return false;
|
|
264
|
-
}
|
|
265
|
-
|
|
266
|
-
return true;
|
|
267
|
-
}
|
|
268
|
-
}
|
package/lib/index.d.ts
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
export { default } from "./lib/ThreeBase";
|
|
2
|
-
export { default as EventMesh } from "./lib/EventMesh";
|
|
3
|
-
export { default as ExtrudeMesh } from "./lib/ExtrudeMesh";
|
|
4
|
-
export type { ExtrudePath } from "./lib/ExtrudeMesh";
|
|
5
|
-
export type { ExtrudeMeshProps } from "./lib/ExtrudeMesh";
|
|
6
|
-
export { default as KeyFrameAnimation } from "./lib/KeyFrameAnimation";
|
|
7
|
-
export type { KeyframeAnimationProps } from "./lib/KeyFrameAnimation";
|
|
8
|
-
export type { Keyframe } from "./lib/KeyFrameAnimation";
|
|
9
|
-
export { default as InstancedGroupMesh } from "./lib/InstancedGroupMesh";
|
|
10
|
-
export { default as PointLight } from "./lib/PointLight";
|
|
11
|
-
export { default as Sky } from "./lib/Sky/Sky";
|
|
12
|
-
export { default as keyContorls } from "./lib/keyContorls";
|
|
13
|
-
export { default as Transition } from "./lib/Transition";
|
|
14
|
-
export { default as threeUtils } from "./lib/threeUtils";
|
|
15
|
-
export { default as threeLoader } from "./lib/threeLoader";
|
|
16
|
-
export { default as FPScontrol } from "./lib/FPScontrol";
|
|
17
|
-
export { default as PlaneText } from "./lib/PlaneText";
|
|
18
|
-
export { default as SpriteText } from "three-spritetext";
|
|
19
|
-
export { default as SpriteModal1 } from "./lib/spriteModal1/SpriteModal1";
|
|
20
|
-
export { default as PlaneModal1 } from "./lib/planeModal1/PlaneModal1";
|
|
21
|
-
export { default as Text3D } from "./lib/Text3D/Text3D";
|
|
22
|
-
export type { Text3DProps } from "./lib/Text3D/Text3D";
|
package/lib/keyContorls.d.ts
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { Event, EventDispatcher, Vector3 } from "three";
|
|
2
|
-
/**
|
|
3
|
-
* 键盘 使用 ↑↓←→ 控制 x z 方向, 小键盘 1 0 控制 y 方向
|
|
4
|
-
*
|
|
5
|
-
* @class KeyContorls
|
|
6
|
-
* @extends {EventDispatcher}
|
|
7
|
-
*/
|
|
8
|
-
declare class KeyContorls extends EventDispatcher {
|
|
9
|
-
constructor();
|
|
10
|
-
uuid: string;
|
|
11
|
-
direction: Vector3;
|
|
12
|
-
add(e: any): void;
|
|
13
|
-
delete(e: any): void;
|
|
14
|
-
enter(e: any): void;
|
|
15
|
-
keyDown: (e: any) => void;
|
|
16
|
-
_listeners?: {
|
|
17
|
-
[key: string]: Array<any>;
|
|
18
|
-
};
|
|
19
|
-
removeEvent: import("lodash").DebouncedFunc<(type: string) => void>;
|
|
20
|
-
addEventListener(type: string, listener: (event: Event) => void): void;
|
|
21
|
-
addEvent(): void;
|
|
22
|
-
dispose(): void;
|
|
23
|
-
}
|
|
24
|
-
declare const keyContorls: KeyContorls;
|
|
25
|
-
export default keyContorls;
|
package/lib/keyContorls.js
DELETED
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* @Author: xiaosihan
|
|
3
|
-
* @Date: 2022-03-20 14:48:33
|
|
4
|
-
* @Last Modified by: xiaosihan
|
|
5
|
-
* @Last Modified time: 2022-09-30 00:12:28
|
|
6
|
-
*/
|
|
7
|
-
import { throttle } from "lodash";
|
|
8
|
-
import { EventDispatcher, Vector3 } from "three";
|
|
9
|
-
import { generateUUID } from "three/src/math/MathUtils";
|
|
10
|
-
/**
|
|
11
|
-
* 键盘 使用 ↑↓←→ 控制 x z 方向, 小键盘 1 0 控制 y 方向
|
|
12
|
-
*
|
|
13
|
-
* @class KeyContorls
|
|
14
|
-
* @extends {EventDispatcher}
|
|
15
|
-
*/
|
|
16
|
-
class KeyContorls extends EventDispatcher {
|
|
17
|
-
constructor() {
|
|
18
|
-
super();
|
|
19
|
-
this.addEvent();
|
|
20
|
-
}
|
|
21
|
-
uuid = generateUUID();
|
|
22
|
-
direction = new Vector3(0, 0, 0);
|
|
23
|
-
// 添加事件需要由外部实现
|
|
24
|
-
add(e) {
|
|
25
|
-
this.dispatchEvent({ ...e, type: "add" });
|
|
26
|
-
}
|
|
27
|
-
// 删除事件
|
|
28
|
-
delete(e) {
|
|
29
|
-
this.dispatchEvent({ ...e, type: "delete" });
|
|
30
|
-
}
|
|
31
|
-
// 回车按钮
|
|
32
|
-
enter(e) {
|
|
33
|
-
this.dispatchEvent({ ...e, type: "enter" });
|
|
34
|
-
}
|
|
35
|
-
keyDown = (e) => {
|
|
36
|
-
switch (e.keyCode) {
|
|
37
|
-
case 46: // 删除按钮
|
|
38
|
-
this.delete(e);
|
|
39
|
-
return;
|
|
40
|
-
case 13: // 回车按钮
|
|
41
|
-
this.enter(e);
|
|
42
|
-
return;
|
|
43
|
-
case 97: // 小键盘1
|
|
44
|
-
this.direction.set(0, 1, 0);
|
|
45
|
-
break;
|
|
46
|
-
case 96: // 小键盘0
|
|
47
|
-
this.direction.set(0, -1, 0);
|
|
48
|
-
break;
|
|
49
|
-
case 35: //
|
|
50
|
-
this.direction.set(0, 0.001, 0);
|
|
51
|
-
break;
|
|
52
|
-
case 45:
|
|
53
|
-
this.direction.set(0, -0.001, 0);
|
|
54
|
-
break;
|
|
55
|
-
case 38: // 前
|
|
56
|
-
this.direction.set(0, 0, -1);
|
|
57
|
-
break;
|
|
58
|
-
case 37: // 后
|
|
59
|
-
this.direction.set(-1, 0, 0);
|
|
60
|
-
break;
|
|
61
|
-
case 40: // 左
|
|
62
|
-
this.direction.set(0, 0, 1);
|
|
63
|
-
break;
|
|
64
|
-
case 39: // 右
|
|
65
|
-
this.direction.set(1, 0, 0);
|
|
66
|
-
break;
|
|
67
|
-
default:
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
70
|
-
if (e.shiftKey) {
|
|
71
|
-
this.direction.multiplyScalar(0.001);
|
|
72
|
-
}
|
|
73
|
-
if (e.ctrlKey) {
|
|
74
|
-
this.direction.multiplyScalar(0.1);
|
|
75
|
-
}
|
|
76
|
-
this.dispatchEvent({
|
|
77
|
-
type: "change",
|
|
78
|
-
direction: this.direction
|
|
79
|
-
});
|
|
80
|
-
};
|
|
81
|
-
_listeners;
|
|
82
|
-
// 节流 删除事件监听
|
|
83
|
-
removeEvent = throttle((type) => {
|
|
84
|
-
this._listeners = undefined;
|
|
85
|
-
}, 1000, { trailing: false });
|
|
86
|
-
addEventListener(type, listener) {
|
|
87
|
-
this.removeEvent(type);
|
|
88
|
-
super.addEventListener(type, listener);
|
|
89
|
-
}
|
|
90
|
-
addEvent() {
|
|
91
|
-
document.addEventListener("keydown", this.keyDown);
|
|
92
|
-
}
|
|
93
|
-
dispose() {
|
|
94
|
-
document.removeEventListener("keydown", this.keyDown);
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
const keyContorls = new KeyContorls();
|
|
98
|
-
export default keyContorls;
|
package/lib/keyContorls.ts
DELETED
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* @Author: xiaosihan
|
|
3
|
-
* @Date: 2022-03-20 14:48:33
|
|
4
|
-
* @Last Modified by: xiaosihan
|
|
5
|
-
* @Last Modified time: 2022-09-30 00:12:28
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
import { throttle } from "lodash";
|
|
9
|
-
import { Event, EventDispatcher, Vector3 } from "three";
|
|
10
|
-
import { generateUUID } from "three/src/math/MathUtils";
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* 键盘 使用 ↑↓←→ 控制 x z 方向, 小键盘 1 0 控制 y 方向
|
|
15
|
-
*
|
|
16
|
-
* @class KeyContorls
|
|
17
|
-
* @extends {EventDispatcher}
|
|
18
|
-
*/
|
|
19
|
-
class KeyContorls extends EventDispatcher {
|
|
20
|
-
|
|
21
|
-
constructor() {
|
|
22
|
-
super();
|
|
23
|
-
this.addEvent();
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
uuid = generateUUID();
|
|
27
|
-
|
|
28
|
-
direction = new Vector3(0, 0, 0);
|
|
29
|
-
|
|
30
|
-
// 添加事件需要由外部实现
|
|
31
|
-
add(e: any) {
|
|
32
|
-
this.dispatchEvent({ ...e, type: "add" });
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
// 删除事件
|
|
36
|
-
delete(e: any) {
|
|
37
|
-
this.dispatchEvent({ ...e, type: "delete" });
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
// 回车按钮
|
|
41
|
-
enter(e: any) {
|
|
42
|
-
this.dispatchEvent({ ...e, type: "enter" });
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
keyDown = (e: any) => {
|
|
46
|
-
|
|
47
|
-
switch (e.keyCode) {
|
|
48
|
-
|
|
49
|
-
case 46: // 删除按钮
|
|
50
|
-
this.delete(e);
|
|
51
|
-
return;
|
|
52
|
-
|
|
53
|
-
case 13: // 回车按钮
|
|
54
|
-
this.enter(e);
|
|
55
|
-
return;
|
|
56
|
-
|
|
57
|
-
case 97: // 小键盘1
|
|
58
|
-
this.direction.set(0, 1, 0);
|
|
59
|
-
break;
|
|
60
|
-
case 96: // 小键盘0
|
|
61
|
-
this.direction.set(0, -1, 0);
|
|
62
|
-
break;
|
|
63
|
-
|
|
64
|
-
case 35: //
|
|
65
|
-
this.direction.set(0, 0.001, 0);
|
|
66
|
-
break;
|
|
67
|
-
case 45:
|
|
68
|
-
this.direction.set(0, -0.001, 0);
|
|
69
|
-
break;
|
|
70
|
-
|
|
71
|
-
case 38: // 前
|
|
72
|
-
this.direction.set(0, 0, -1);
|
|
73
|
-
break;
|
|
74
|
-
case 37: // 后
|
|
75
|
-
this.direction.set(-1, 0, 0);
|
|
76
|
-
break;
|
|
77
|
-
case 40: // 左
|
|
78
|
-
this.direction.set(0, 0, 1);
|
|
79
|
-
break;
|
|
80
|
-
case 39: // 右
|
|
81
|
-
this.direction.set(1, 0, 0);
|
|
82
|
-
break;
|
|
83
|
-
|
|
84
|
-
default:
|
|
85
|
-
return;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
if (e.shiftKey) {
|
|
89
|
-
this.direction.multiplyScalar(0.001);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
if (e.ctrlKey) {
|
|
93
|
-
this.direction.multiplyScalar(0.1);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
this.dispatchEvent({
|
|
97
|
-
type: "change",
|
|
98
|
-
direction: this.direction
|
|
99
|
-
});
|
|
100
|
-
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
_listeners?: { [key: string]: Array<any> };
|
|
104
|
-
|
|
105
|
-
// 节流 删除事件监听
|
|
106
|
-
removeEvent = throttle((type: string) => {
|
|
107
|
-
this._listeners = undefined;
|
|
108
|
-
}, 1000, { trailing: false });
|
|
109
|
-
|
|
110
|
-
addEventListener(type: string, listener: (event: Event) => void): void {
|
|
111
|
-
this.removeEvent(type);
|
|
112
|
-
super.addEventListener(type, listener);
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
addEvent() {
|
|
116
|
-
document.addEventListener("keydown", this.keyDown);
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
dispose() {
|
|
120
|
-
document.removeEventListener("keydown", this.keyDown);
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
const keyContorls = new KeyContorls();
|
|
126
|
-
|
|
127
|
-
export default keyContorls;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { MeshBasicMaterial, Mesh, CanvasTexture, PlaneGeometry } from "three";
|
|
2
|
-
export type PlaneModal1Config = {
|
|
3
|
-
size?: number;
|
|
4
|
-
title?: string;
|
|
5
|
-
titleColor?: string;
|
|
6
|
-
texts?: Array<{
|
|
7
|
-
text?: string;
|
|
8
|
-
color?: string;
|
|
9
|
-
size?: number;
|
|
10
|
-
}>;
|
|
11
|
-
};
|
|
12
|
-
export default class PlaneModal1 extends Mesh {
|
|
13
|
-
constructor(config?: PlaneModal1Config);
|
|
14
|
-
geometry: PlaneGeometry;
|
|
15
|
-
material: MeshBasicMaterial;
|
|
16
|
-
static img: HTMLImageElement;
|
|
17
|
-
canvas: HTMLCanvasElement;
|
|
18
|
-
context: CanvasRenderingContext2D;
|
|
19
|
-
texture: CanvasTexture;
|
|
20
|
-
_config: {
|
|
21
|
-
size: number;
|
|
22
|
-
title: string;
|
|
23
|
-
titleColor: string;
|
|
24
|
-
texts: Array<{
|
|
25
|
-
text: string;
|
|
26
|
-
color: string;
|
|
27
|
-
size: number;
|
|
28
|
-
}>;
|
|
29
|
-
};
|
|
30
|
-
updata(config: PlaneModal1Config): Promise<void>;
|
|
31
|
-
}
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* @Author: xiaosihan
|
|
3
|
-
* @Date: 2023-03-09 18:51:11
|
|
4
|
-
* @Last Modified by: xiaosihan
|
|
5
|
-
* @Last Modified time: 2023-03-09 19:15:35
|
|
6
|
-
*/
|
|
7
|
-
import { MeshBasicMaterial, Mesh, DoubleSide, CanvasTexture, Vector2, PlaneGeometry } from "three";
|
|
8
|
-
import planeModalPNG from "./planeModal.png";
|
|
9
|
-
// 平面模型弹窗
|
|
10
|
-
export default class PlaneModal1 extends Mesh {
|
|
11
|
-
constructor(config = {}) {
|
|
12
|
-
super();
|
|
13
|
-
this.updata(config);
|
|
14
|
-
this.material.map = this.texture;
|
|
15
|
-
this.scale.set(10, 10, 10);
|
|
16
|
-
}
|
|
17
|
-
geometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);
|
|
18
|
-
material = new MeshBasicMaterial({
|
|
19
|
-
side: DoubleSide,
|
|
20
|
-
transparent: true,
|
|
21
|
-
alphaTest: 0.01
|
|
22
|
-
});
|
|
23
|
-
// 背景图
|
|
24
|
-
static img = (() => {
|
|
25
|
-
const img = new Image();
|
|
26
|
-
img.src = planeModalPNG;
|
|
27
|
-
return img;
|
|
28
|
-
})();
|
|
29
|
-
canvas = (() => {
|
|
30
|
-
const canvas = document.createElement("canvas");
|
|
31
|
-
canvas.width = 660;
|
|
32
|
-
canvas.height = 481;
|
|
33
|
-
return canvas;
|
|
34
|
-
})();
|
|
35
|
-
context = this.canvas.getContext("2d");
|
|
36
|
-
texture = new CanvasTexture(this.canvas);
|
|
37
|
-
// 配置
|
|
38
|
-
_config = {
|
|
39
|
-
size: 10,
|
|
40
|
-
title: "PlaneModal1",
|
|
41
|
-
titleColor: "#ffffff",
|
|
42
|
-
texts: []
|
|
43
|
-
// [
|
|
44
|
-
// {
|
|
45
|
-
// text: "1",
|
|
46
|
-
// color: "#ffff00",
|
|
47
|
-
// size: 40
|
|
48
|
-
// },
|
|
49
|
-
// {
|
|
50
|
-
// text: "2",
|
|
51
|
-
// color: "#ff00ff",
|
|
52
|
-
// size: 40
|
|
53
|
-
// },
|
|
54
|
-
// ]
|
|
55
|
-
};
|
|
56
|
-
async updata(config) {
|
|
57
|
-
Object.assign(this._config, config);
|
|
58
|
-
//绘制背景
|
|
59
|
-
this.context.clearRect(0, 0, 660, 481);
|
|
60
|
-
while (!PlaneModal1.img.complete) {
|
|
61
|
-
await new Promise(resolve => setTimeout(resolve, 100));
|
|
62
|
-
}
|
|
63
|
-
// 设置大小
|
|
64
|
-
this.scale.set(this._config.size, this._config.size, this._config.size);
|
|
65
|
-
// this.context.fillStyle = "#00000088";
|
|
66
|
-
// this.context.fillRect(0, 0, 660, 481);
|
|
67
|
-
//绘制背景
|
|
68
|
-
this.context.drawImage(PlaneModal1.img, 0, 0);
|
|
69
|
-
// 绘制标题
|
|
70
|
-
this.context.fillStyle = this._config.titleColor;
|
|
71
|
-
this.context.font = '40px serif'; // 设置字体大小
|
|
72
|
-
this.context.textAlign = "left";
|
|
73
|
-
this.context.textBaseline = "top";
|
|
74
|
-
this.context.fillText(this._config.title, 60, 72);
|
|
75
|
-
let textPos = new Vector2(60, 150);
|
|
76
|
-
let maxWidth = 530;
|
|
77
|
-
// 绘制内容
|
|
78
|
-
this._config.texts.map(({ text = "text", color = "#ffffff", size = 40 }) => {
|
|
79
|
-
this.context.fillStyle = color;
|
|
80
|
-
this.context.font = `${size}px serif`; // 设置字体大小
|
|
81
|
-
this.context.textAlign = "left";
|
|
82
|
-
this.context.textBaseline = "top";
|
|
83
|
-
// 字符分隔为数组
|
|
84
|
-
var arrText = text.split('');
|
|
85
|
-
var line = '';
|
|
86
|
-
for (var n = 0; n < arrText.length; n++) {
|
|
87
|
-
var metrics = this.context.measureText(line + arrText[n]);
|
|
88
|
-
var testWidth = metrics.width;
|
|
89
|
-
if ((testWidth > maxWidth && n > 0) || arrText[n] === "\n") {
|
|
90
|
-
this.context.fillText(line, textPos.x, textPos.y);
|
|
91
|
-
line = "";
|
|
92
|
-
textPos.y += size;
|
|
93
|
-
}
|
|
94
|
-
else {
|
|
95
|
-
line += arrText[n];
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
this.context.fillText(line, textPos.x, textPos.y);
|
|
99
|
-
textPos.y += size;
|
|
100
|
-
});
|
|
101
|
-
this.texture.needsUpdate = true;
|
|
102
|
-
this.dispatchEvent({ type: "loaded" });
|
|
103
|
-
}
|
|
104
|
-
}
|