three-base 2.0.65 → 2.0.67
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/ApngTexture.d.ts +13 -13
- package/ApngTexture.js +61 -61
- package/ApngTextureManage.d.ts +18 -18
- package/ApngTextureManage.js +87 -87
- package/EventMesh.d.ts +18 -18
- package/EventMesh.js +59 -59
- package/ExtrudeMesh.d.ts +111 -111
- package/ExtrudeMesh.js +363 -363
- package/FPScontrol.d.ts +45 -45
- package/FPScontrol.js +171 -171
- package/Fire/Fire.d.ts +28 -28
- package/Fire/Fire.js +79 -79
- package/Fire/FireGromtry.d.ts +9 -9
- package/Fire/FireGromtry.js +40 -40
- package/Fire/FireMaterial.d.ts +28 -28
- package/Fire/FireMaterial.js +32 -32
- package/InstancedMeshBase.d.ts +24 -24
- package/InstancedMeshBase.js +190 -190
- package/KeyFrameAnimation.d.ts +25 -25
- package/KeyFrameAnimation.js +78 -78
- package/MeshBase.d.ts +32 -32
- package/MeshBase.js +172 -172
- package/Mirror.d.ts +25 -25
- package/Mirror.js +139 -139
- package/PlaneModal1/PlaneModal1.d.ts +31 -31
- package/PlaneModal1/PlaneModal1.js +105 -105
- package/PlaneModal1/index.d.ts +1 -1
- package/PlaneModal1/index.js +1 -1
- package/PlaneText.d.ts +44 -44
- package/PlaneText.js +30 -30
- package/PlaneWithHtml.d.ts +11 -11
- package/PlaneWithHtml.js +68 -68
- package/PointLight/PointLight.d.ts +13 -13
- package/PointLight/PointLight.js +64 -64
- package/PointLight/index.d.ts +1 -1
- package/PointLight/index.js +1 -1
- package/Sky/Sky.d.ts +13 -13
- package/Sky/Sky.js +28 -28
- package/Sky/index.d.ts +1 -1
- package/Sky/index.js +1 -1
- package/SpriteModal1/SpriteModal1.d.ts +30 -30
- package/SpriteModal1/SpriteModal1.js +110 -110
- package/SpriteModal1/index.d.ts +1 -1
- package/SpriteModal1/index.js +1 -1
- package/SpriteText.d.ts +45 -45
- package/SpriteText.js +163 -163
- package/SpriteText2.d.ts +47 -47
- package/SpriteText2.js +198 -198
- package/SpriteWithHtml.d.ts +7 -7
- package/SpriteWithHtml.js +49 -49
- package/Text3D/Text3D.d.ts +20 -20
- package/Text3D/Text3D.js +62 -62
- package/Text3D/fontController.d.ts +59 -59
- package/Text3D/fontController.js +200 -200
- package/Text3D/index.d.ts +1 -1
- package/Text3D/index.js +1 -1
- package/ThreeBase.d.ts +91 -91
- package/ThreeBase.js +611 -611
- package/ThreeBase.ts +2 -2
- package/ThreeMouse.d.ts +39 -39
- package/ThreeMouse.js +359 -359
- package/Transition.d.ts +40 -40
- package/Transition.js +207 -207
- package/index.d.ts +1 -1
- package/index.js +2 -2
- package/keyContorls.d.ts +25 -25
- package/keyContorls.js +98 -98
- package/package.json +1 -1
- package/pass/FullScreenQuad.d.ts +7 -7
- package/pass/FullScreenQuad.js +25 -25
- package/pass/glow_pass.d.ts +2 -2
- package/pass/glow_pass.js +236 -236
- package/pass/stroke_pass.d.ts +2 -2
- package/pass/stroke_pass.js +202 -202
- package/shaders/FXAAShaderMaterial.d.ts +3 -3
- package/shaders/FXAAShaderMaterial.js +21 -21
- package/shaders.d.ts +17 -17
- package/shaders.js +99 -99
- package/threeLoader.d.ts +26 -26
- package/threeLoader.js +189 -174
- package/threeLoader.ts +17 -1
- package/threeUtils.d.ts +47 -47
- package/threeUtils.js +266 -266
package/Transition.d.ts
CHANGED
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
export type TransitionParame = {
|
|
2
|
-
[key: string]: number;
|
|
3
|
-
};
|
|
4
|
-
export default class Transition<T extends TransitionParame, K extends Extract<keyof T, string>> {
|
|
5
|
-
/**
|
|
6
|
-
*Creates an instance of transition.
|
|
7
|
-
* @param {{ [key: string]: number }} // 初始值
|
|
8
|
-
* @param {[0.8, 0, 0.2, 1]} // 贝塞尔曲线
|
|
9
|
-
* @param {number} [duration=1000] // 过渡时间
|
|
10
|
-
* @memberof transition
|
|
11
|
-
*/
|
|
12
|
-
constructor(param: T, bezier?: [number, number, number, number], duration?: number);
|
|
13
|
-
_keys: Array<Extract<keyof T, string>>;
|
|
14
|
-
_bezier: [number, number, number, number];
|
|
15
|
-
_Xbezier: [number, number, number, number];
|
|
16
|
-
_Ybezier: [number, number, number, number];
|
|
17
|
-
setBezier(bezier?: [number, number, number, number]): this;
|
|
18
|
-
timeTemp: number;
|
|
19
|
-
_duration: number;
|
|
20
|
-
_delay: number;
|
|
21
|
-
setDuration(duration?: number): this;
|
|
22
|
-
setDelay(delay?: number): this;
|
|
23
|
-
_: {
|
|
24
|
-
[key in `${K}_start` | `${K}_end` | `${K}_startTime`]: number;
|
|
25
|
-
};
|
|
26
|
-
private onChangeCall;
|
|
27
|
-
private onDoneCall;
|
|
28
|
-
run({ timeTemp }: any): this;
|
|
29
|
-
runbindThis: any;
|
|
30
|
-
onChange(onChangeCall: (josn: T) => void): this;
|
|
31
|
-
onDone(onDoneCall: (josn: T) => void): this;
|
|
32
|
-
get(key: Extract<keyof T, string>): T[K];
|
|
33
|
-
set(param: T): Promise<this>;
|
|
34
|
-
reset(param: Partial<T>): this;
|
|
35
|
-
getKeys(): Array<Extract<keyof T, string>>;
|
|
36
|
-
hasKey(key: Extract<keyof T, string>): boolean;
|
|
37
|
-
getJson(): T;
|
|
38
|
-
_isDone: boolean;
|
|
39
|
-
isDone(): boolean;
|
|
40
|
-
}
|
|
1
|
+
export type TransitionParame = {
|
|
2
|
+
[key: string]: number;
|
|
3
|
+
};
|
|
4
|
+
export default class Transition<T extends TransitionParame, K extends Extract<keyof T, string>> {
|
|
5
|
+
/**
|
|
6
|
+
*Creates an instance of transition.
|
|
7
|
+
* @param {{ [key: string]: number }} // 初始值
|
|
8
|
+
* @param {[0.8, 0, 0.2, 1]} // 贝塞尔曲线
|
|
9
|
+
* @param {number} [duration=1000] // 过渡时间
|
|
10
|
+
* @memberof transition
|
|
11
|
+
*/
|
|
12
|
+
constructor(param: T, bezier?: [number, number, number, number], duration?: number);
|
|
13
|
+
_keys: Array<Extract<keyof T, string>>;
|
|
14
|
+
_bezier: [number, number, number, number];
|
|
15
|
+
_Xbezier: [number, number, number, number];
|
|
16
|
+
_Ybezier: [number, number, number, number];
|
|
17
|
+
setBezier(bezier?: [number, number, number, number]): this;
|
|
18
|
+
timeTemp: number;
|
|
19
|
+
_duration: number;
|
|
20
|
+
_delay: number;
|
|
21
|
+
setDuration(duration?: number): this;
|
|
22
|
+
setDelay(delay?: number): this;
|
|
23
|
+
_: {
|
|
24
|
+
[key in `${K}_start` | `${K}_end` | `${K}_startTime`]: number;
|
|
25
|
+
};
|
|
26
|
+
private onChangeCall;
|
|
27
|
+
private onDoneCall;
|
|
28
|
+
run({ timeTemp }: any): this;
|
|
29
|
+
runbindThis: any;
|
|
30
|
+
onChange(onChangeCall: (josn: T) => void): this;
|
|
31
|
+
onDone(onDoneCall: (josn: T) => void): this;
|
|
32
|
+
get(key: Extract<keyof T, string>): T[K];
|
|
33
|
+
set(param: T): Promise<this>;
|
|
34
|
+
reset(param: Partial<T>): this;
|
|
35
|
+
getKeys(): Array<Extract<keyof T, string>>;
|
|
36
|
+
hasKey(key: Extract<keyof T, string>): boolean;
|
|
37
|
+
getJson(): T;
|
|
38
|
+
_isDone: boolean;
|
|
39
|
+
isDone(): boolean;
|
|
40
|
+
}
|
package/Transition.js
CHANGED
|
@@ -1,207 +1,207 @@
|
|
|
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
|
-
import threeUtils from "./threeUtils";
|
|
8
|
-
function bezier(arr, t) {
|
|
9
|
-
const ut = 1 - t;
|
|
10
|
-
const a1 = arr[1] * ut + arr[2] * t;
|
|
11
|
-
const result = ((arr[0] * ut + arr[1] * t) * ut + a1 * t) * ut + (a1 * ut + (arr[2] * ut + arr[3] * t) * t) * t;
|
|
12
|
-
return result;
|
|
13
|
-
}
|
|
14
|
-
// 过渡动画插件
|
|
15
|
-
export default class Transition {
|
|
16
|
-
/**
|
|
17
|
-
*Creates an instance of transition.
|
|
18
|
-
* @param {{ [key: string]: number }} // 初始值
|
|
19
|
-
* @param {[0.8, 0, 0.2, 1]} // 贝塞尔曲线
|
|
20
|
-
* @param {number} [duration=1000] // 过渡时间
|
|
21
|
-
* @memberof transition
|
|
22
|
-
*/
|
|
23
|
-
constructor(param, bezier = [0.8, 0, 0.2, 1], duration = 500) {
|
|
24
|
-
this.setDuration(duration);
|
|
25
|
-
this.setBezier(bezier);
|
|
26
|
-
this.reset(param);
|
|
27
|
-
}
|
|
28
|
-
// 所有的 key 的枚举
|
|
29
|
-
_keys = [];
|
|
30
|
-
// 贝塞尔曲线
|
|
31
|
-
_bezier = [0.8, 0, 0.2, 1];
|
|
32
|
-
// x轴贝塞尔
|
|
33
|
-
_Xbezier = [0, 0.8, 0.2, 1];
|
|
34
|
-
// y轴贝塞尔
|
|
35
|
-
_Ybezier = [0, 0, 1, 1];
|
|
36
|
-
setBezier(bezier = [0.8, 0, 0.2, 1]) {
|
|
37
|
-
this._bezier = [...bezier];
|
|
38
|
-
this._Xbezier = [0, bezier[0], bezier[2], 1];
|
|
39
|
-
this._Ybezier = [0, bezier[1], bezier[3], 1];
|
|
40
|
-
return this;
|
|
41
|
-
}
|
|
42
|
-
// 当前时间戳
|
|
43
|
-
timeTemp = performance.now();
|
|
44
|
-
// 过渡时间
|
|
45
|
-
_duration = 0;
|
|
46
|
-
//延时
|
|
47
|
-
_delay = 0;
|
|
48
|
-
// 设置过渡时间
|
|
49
|
-
setDuration(duration = 500) {
|
|
50
|
-
setTimeout(() => {
|
|
51
|
-
this._duration = duration;
|
|
52
|
-
}, 0);
|
|
53
|
-
return this;
|
|
54
|
-
}
|
|
55
|
-
// 设置延时
|
|
56
|
-
setDelay(delay = 0) {
|
|
57
|
-
this._delay = delay;
|
|
58
|
-
return this;
|
|
59
|
-
}
|
|
60
|
-
// 存储 每个参数的 起始位置 起始时间 终止位置 终止时间
|
|
61
|
-
_ = {};
|
|
62
|
-
// 数据改变的事件回调
|
|
63
|
-
onChangeCall = (josn) => { };
|
|
64
|
-
//结束的事件回调
|
|
65
|
-
onDoneCall = (josn) => { };
|
|
66
|
-
// 执行过度动画
|
|
67
|
-
run({ timeTemp }) {
|
|
68
|
-
this.timeTemp = timeTemp;
|
|
69
|
-
this.onChangeCall(this.getJson());
|
|
70
|
-
if (this.isDone()) {
|
|
71
|
-
this.onDoneCall(this.getJson());
|
|
72
|
-
threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
|
|
73
|
-
}
|
|
74
|
-
return this;
|
|
75
|
-
}
|
|
76
|
-
runbindThis = this.run.bind(this);
|
|
77
|
-
// 设置动画对象的回调事件
|
|
78
|
-
onChange(onChangeCall) {
|
|
79
|
-
this.onChangeCall = onChangeCall;
|
|
80
|
-
this.onChangeCall(this.getJson());
|
|
81
|
-
return this;
|
|
82
|
-
}
|
|
83
|
-
//设置动画对象的
|
|
84
|
-
onDone(onDoneCall) {
|
|
85
|
-
this.onDoneCall = onDoneCall;
|
|
86
|
-
return this;
|
|
87
|
-
}
|
|
88
|
-
// 计算当前 key 的值
|
|
89
|
-
get(key) {
|
|
90
|
-
key = String(key);
|
|
91
|
-
if (this._keys.includes(key) && this.timeTemp < (this._[key + "_startTime"] + this._duration)) {
|
|
92
|
-
let start = this._[key + "_start"];
|
|
93
|
-
let end = this._[key + "_end"];
|
|
94
|
-
let timeProgress = Math.min(1, Math.max(0, (this.timeTemp - this._[key + "_startTime"]) / this._duration));
|
|
95
|
-
// 斜率
|
|
96
|
-
let t = 0;
|
|
97
|
-
// 微分法 求斜率t
|
|
98
|
-
while (bezier(this._Xbezier, t + 0.1) < timeProgress) {
|
|
99
|
-
t += 0.1;
|
|
100
|
-
}
|
|
101
|
-
while (bezier(this._Xbezier, t + 0.01) < timeProgress) {
|
|
102
|
-
t += 0.01;
|
|
103
|
-
}
|
|
104
|
-
while (bezier(this._Xbezier, t + 0.001) < timeProgress) {
|
|
105
|
-
t += 0.001;
|
|
106
|
-
}
|
|
107
|
-
t = Math.min(1, Math.max(0, t)); // 斜率最大为1
|
|
108
|
-
// 通过斜率求y值
|
|
109
|
-
return (bezier(this._Ybezier, t) * (end - start)) + start;
|
|
110
|
-
}
|
|
111
|
-
else if (this._keys.includes(key) && this.timeTemp >= (this._[key + "_startTime"] + this._duration)) {
|
|
112
|
-
return this._[key + "_end"];
|
|
113
|
-
}
|
|
114
|
-
// `没有 ${ key } 的值`;
|
|
115
|
-
return 0;
|
|
116
|
-
}
|
|
117
|
-
async set(param) {
|
|
118
|
-
let timetemp = performance.now() + this._delay;
|
|
119
|
-
;
|
|
120
|
-
for (let key in param) {
|
|
121
|
-
// 有就赋值
|
|
122
|
-
if (this._keys.includes(key) && Math.abs(param[key] - this._[key + "_end"]) > 0.0001) {
|
|
123
|
-
this._[key + "_start"] = this.get(key);
|
|
124
|
-
this._[key + "_end"] = param[key];
|
|
125
|
-
// 起始时间
|
|
126
|
-
this._[key + "_startTime"] = timetemp;
|
|
127
|
-
// 执行状态未完成
|
|
128
|
-
this._isDone = false;
|
|
129
|
-
// 没有就添加一个
|
|
130
|
-
}
|
|
131
|
-
else if (!this._keys.includes(key)) {
|
|
132
|
-
this._[key + "_start"] = param[key];
|
|
133
|
-
this._[key + "_end"] = param[key];
|
|
134
|
-
// 起始时间
|
|
135
|
-
this._[key + "_startTime"] = timetemp - this._duration;
|
|
136
|
-
// 执行状态未完成
|
|
137
|
-
this._isDone = false;
|
|
138
|
-
}
|
|
139
|
-
if (!this._keys.includes(key)) {
|
|
140
|
-
this._keys.push(key);
|
|
141
|
-
}
|
|
142
|
-
// // 执行状态未完成
|
|
143
|
-
// this._isDone = false;
|
|
144
|
-
}
|
|
145
|
-
if (!this._isDone) {
|
|
146
|
-
threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
|
|
147
|
-
threeUtils.addEventListener("requestAnimationFrame", this.runbindThis);
|
|
148
|
-
await new Promise(resolve => setTimeout(resolve, 50));
|
|
149
|
-
await new Promise(resolve => setTimeout(resolve, this._duration));
|
|
150
|
-
}
|
|
151
|
-
return this;
|
|
152
|
-
}
|
|
153
|
-
// 重置起始和终止位置
|
|
154
|
-
reset(param) {
|
|
155
|
-
for (let key in param) {
|
|
156
|
-
if (!this._keys.includes(key)) {
|
|
157
|
-
this._keys.push(key);
|
|
158
|
-
}
|
|
159
|
-
this._[key + "_start"] = param[key];
|
|
160
|
-
this._[key + "_end"] = param[key];
|
|
161
|
-
this._[key + "_startTime"] = -this._duration;
|
|
162
|
-
}
|
|
163
|
-
if (this.onChangeCall) {
|
|
164
|
-
this.onChangeCall(this.getJson());
|
|
165
|
-
this.onDoneCall(this.getJson());
|
|
166
|
-
}
|
|
167
|
-
this._isDone = true;
|
|
168
|
-
return this;
|
|
169
|
-
}
|
|
170
|
-
// 获取过渡对象上面的key
|
|
171
|
-
getKeys() {
|
|
172
|
-
return [...this._keys];
|
|
173
|
-
}
|
|
174
|
-
// 判断是否有这个参数
|
|
175
|
-
hasKey(key) {
|
|
176
|
-
return this._keys.includes(key);
|
|
177
|
-
}
|
|
178
|
-
// 获取全部参数
|
|
179
|
-
getJson() {
|
|
180
|
-
let keys = this.getKeys();
|
|
181
|
-
let json = {};
|
|
182
|
-
keys.map(key => {
|
|
183
|
-
json[key] = this.get(key);
|
|
184
|
-
});
|
|
185
|
-
return json;
|
|
186
|
-
}
|
|
187
|
-
_isDone = false;
|
|
188
|
-
// 是否执行完成了
|
|
189
|
-
isDone() {
|
|
190
|
-
if (this._isDone) {
|
|
191
|
-
return true;
|
|
192
|
-
}
|
|
193
|
-
let isisDone = false;
|
|
194
|
-
for (let i in this._keys) {
|
|
195
|
-
isisDone = this._[this._keys[i] + "_startTime"] + this._duration < this.timeTemp;
|
|
196
|
-
// 只要有一个没有完成 都算没有完成 过渡
|
|
197
|
-
if (!isisDone) {
|
|
198
|
-
return false;
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
if (!this._isDone) {
|
|
202
|
-
this._isDone = true;
|
|
203
|
-
return false;
|
|
204
|
-
}
|
|
205
|
-
return true;
|
|
206
|
-
}
|
|
207
|
-
}
|
|
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
|
+
import threeUtils from "./threeUtils";
|
|
8
|
+
function bezier(arr, t) {
|
|
9
|
+
const ut = 1 - t;
|
|
10
|
+
const a1 = arr[1] * ut + arr[2] * t;
|
|
11
|
+
const result = ((arr[0] * ut + arr[1] * t) * ut + a1 * t) * ut + (a1 * ut + (arr[2] * ut + arr[3] * t) * t) * t;
|
|
12
|
+
return result;
|
|
13
|
+
}
|
|
14
|
+
// 过渡动画插件
|
|
15
|
+
export default class Transition {
|
|
16
|
+
/**
|
|
17
|
+
*Creates an instance of transition.
|
|
18
|
+
* @param {{ [key: string]: number }} // 初始值
|
|
19
|
+
* @param {[0.8, 0, 0.2, 1]} // 贝塞尔曲线
|
|
20
|
+
* @param {number} [duration=1000] // 过渡时间
|
|
21
|
+
* @memberof transition
|
|
22
|
+
*/
|
|
23
|
+
constructor(param, bezier = [0.8, 0, 0.2, 1], duration = 500) {
|
|
24
|
+
this.setDuration(duration);
|
|
25
|
+
this.setBezier(bezier);
|
|
26
|
+
this.reset(param);
|
|
27
|
+
}
|
|
28
|
+
// 所有的 key 的枚举
|
|
29
|
+
_keys = [];
|
|
30
|
+
// 贝塞尔曲线
|
|
31
|
+
_bezier = [0.8, 0, 0.2, 1];
|
|
32
|
+
// x轴贝塞尔
|
|
33
|
+
_Xbezier = [0, 0.8, 0.2, 1];
|
|
34
|
+
// y轴贝塞尔
|
|
35
|
+
_Ybezier = [0, 0, 1, 1];
|
|
36
|
+
setBezier(bezier = [0.8, 0, 0.2, 1]) {
|
|
37
|
+
this._bezier = [...bezier];
|
|
38
|
+
this._Xbezier = [0, bezier[0], bezier[2], 1];
|
|
39
|
+
this._Ybezier = [0, bezier[1], bezier[3], 1];
|
|
40
|
+
return this;
|
|
41
|
+
}
|
|
42
|
+
// 当前时间戳
|
|
43
|
+
timeTemp = performance.now();
|
|
44
|
+
// 过渡时间
|
|
45
|
+
_duration = 0;
|
|
46
|
+
//延时
|
|
47
|
+
_delay = 0;
|
|
48
|
+
// 设置过渡时间
|
|
49
|
+
setDuration(duration = 500) {
|
|
50
|
+
setTimeout(() => {
|
|
51
|
+
this._duration = duration;
|
|
52
|
+
}, 0);
|
|
53
|
+
return this;
|
|
54
|
+
}
|
|
55
|
+
// 设置延时
|
|
56
|
+
setDelay(delay = 0) {
|
|
57
|
+
this._delay = delay;
|
|
58
|
+
return this;
|
|
59
|
+
}
|
|
60
|
+
// 存储 每个参数的 起始位置 起始时间 终止位置 终止时间
|
|
61
|
+
_ = {};
|
|
62
|
+
// 数据改变的事件回调
|
|
63
|
+
onChangeCall = (josn) => { };
|
|
64
|
+
//结束的事件回调
|
|
65
|
+
onDoneCall = (josn) => { };
|
|
66
|
+
// 执行过度动画
|
|
67
|
+
run({ timeTemp }) {
|
|
68
|
+
this.timeTemp = timeTemp;
|
|
69
|
+
this.onChangeCall(this.getJson());
|
|
70
|
+
if (this.isDone()) {
|
|
71
|
+
this.onDoneCall(this.getJson());
|
|
72
|
+
threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
|
|
73
|
+
}
|
|
74
|
+
return this;
|
|
75
|
+
}
|
|
76
|
+
runbindThis = this.run.bind(this);
|
|
77
|
+
// 设置动画对象的回调事件
|
|
78
|
+
onChange(onChangeCall) {
|
|
79
|
+
this.onChangeCall = onChangeCall;
|
|
80
|
+
this.onChangeCall(this.getJson());
|
|
81
|
+
return this;
|
|
82
|
+
}
|
|
83
|
+
//设置动画对象的
|
|
84
|
+
onDone(onDoneCall) {
|
|
85
|
+
this.onDoneCall = onDoneCall;
|
|
86
|
+
return this;
|
|
87
|
+
}
|
|
88
|
+
// 计算当前 key 的值
|
|
89
|
+
get(key) {
|
|
90
|
+
key = String(key);
|
|
91
|
+
if (this._keys.includes(key) && this.timeTemp < (this._[key + "_startTime"] + this._duration)) {
|
|
92
|
+
let start = this._[key + "_start"];
|
|
93
|
+
let end = this._[key + "_end"];
|
|
94
|
+
let timeProgress = Math.min(1, Math.max(0, (this.timeTemp - this._[key + "_startTime"]) / this._duration));
|
|
95
|
+
// 斜率
|
|
96
|
+
let t = 0;
|
|
97
|
+
// 微分法 求斜率t
|
|
98
|
+
while (bezier(this._Xbezier, t + 0.1) < timeProgress) {
|
|
99
|
+
t += 0.1;
|
|
100
|
+
}
|
|
101
|
+
while (bezier(this._Xbezier, t + 0.01) < timeProgress) {
|
|
102
|
+
t += 0.01;
|
|
103
|
+
}
|
|
104
|
+
while (bezier(this._Xbezier, t + 0.001) < timeProgress) {
|
|
105
|
+
t += 0.001;
|
|
106
|
+
}
|
|
107
|
+
t = Math.min(1, Math.max(0, t)); // 斜率最大为1
|
|
108
|
+
// 通过斜率求y值
|
|
109
|
+
return (bezier(this._Ybezier, t) * (end - start)) + start;
|
|
110
|
+
}
|
|
111
|
+
else if (this._keys.includes(key) && this.timeTemp >= (this._[key + "_startTime"] + this._duration)) {
|
|
112
|
+
return this._[key + "_end"];
|
|
113
|
+
}
|
|
114
|
+
// `没有 ${ key } 的值`;
|
|
115
|
+
return 0;
|
|
116
|
+
}
|
|
117
|
+
async set(param) {
|
|
118
|
+
let timetemp = performance.now() + this._delay;
|
|
119
|
+
;
|
|
120
|
+
for (let key in param) {
|
|
121
|
+
// 有就赋值
|
|
122
|
+
if (this._keys.includes(key) && Math.abs(param[key] - this._[key + "_end"]) > 0.0001) {
|
|
123
|
+
this._[key + "_start"] = this.get(key);
|
|
124
|
+
this._[key + "_end"] = param[key];
|
|
125
|
+
// 起始时间
|
|
126
|
+
this._[key + "_startTime"] = timetemp;
|
|
127
|
+
// 执行状态未完成
|
|
128
|
+
this._isDone = false;
|
|
129
|
+
// 没有就添加一个
|
|
130
|
+
}
|
|
131
|
+
else if (!this._keys.includes(key)) {
|
|
132
|
+
this._[key + "_start"] = param[key];
|
|
133
|
+
this._[key + "_end"] = param[key];
|
|
134
|
+
// 起始时间
|
|
135
|
+
this._[key + "_startTime"] = timetemp - this._duration;
|
|
136
|
+
// 执行状态未完成
|
|
137
|
+
this._isDone = false;
|
|
138
|
+
}
|
|
139
|
+
if (!this._keys.includes(key)) {
|
|
140
|
+
this._keys.push(key);
|
|
141
|
+
}
|
|
142
|
+
// // 执行状态未完成
|
|
143
|
+
// this._isDone = false;
|
|
144
|
+
}
|
|
145
|
+
if (!this._isDone) {
|
|
146
|
+
threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
|
|
147
|
+
threeUtils.addEventListener("requestAnimationFrame", this.runbindThis);
|
|
148
|
+
await new Promise(resolve => setTimeout(resolve, 50));
|
|
149
|
+
await new Promise(resolve => setTimeout(resolve, this._duration));
|
|
150
|
+
}
|
|
151
|
+
return this;
|
|
152
|
+
}
|
|
153
|
+
// 重置起始和终止位置
|
|
154
|
+
reset(param) {
|
|
155
|
+
for (let key in param) {
|
|
156
|
+
if (!this._keys.includes(key)) {
|
|
157
|
+
this._keys.push(key);
|
|
158
|
+
}
|
|
159
|
+
this._[key + "_start"] = param[key];
|
|
160
|
+
this._[key + "_end"] = param[key];
|
|
161
|
+
this._[key + "_startTime"] = -this._duration;
|
|
162
|
+
}
|
|
163
|
+
if (this.onChangeCall) {
|
|
164
|
+
this.onChangeCall(this.getJson());
|
|
165
|
+
this.onDoneCall(this.getJson());
|
|
166
|
+
}
|
|
167
|
+
this._isDone = true;
|
|
168
|
+
return this;
|
|
169
|
+
}
|
|
170
|
+
// 获取过渡对象上面的key
|
|
171
|
+
getKeys() {
|
|
172
|
+
return [...this._keys];
|
|
173
|
+
}
|
|
174
|
+
// 判断是否有这个参数
|
|
175
|
+
hasKey(key) {
|
|
176
|
+
return this._keys.includes(key);
|
|
177
|
+
}
|
|
178
|
+
// 获取全部参数
|
|
179
|
+
getJson() {
|
|
180
|
+
let keys = this.getKeys();
|
|
181
|
+
let json = {};
|
|
182
|
+
keys.map(key => {
|
|
183
|
+
json[key] = this.get(key);
|
|
184
|
+
});
|
|
185
|
+
return json;
|
|
186
|
+
}
|
|
187
|
+
_isDone = false;
|
|
188
|
+
// 是否执行完成了
|
|
189
|
+
isDone() {
|
|
190
|
+
if (this._isDone) {
|
|
191
|
+
return true;
|
|
192
|
+
}
|
|
193
|
+
let isisDone = false;
|
|
194
|
+
for (let i in this._keys) {
|
|
195
|
+
isisDone = this._[this._keys[i] + "_startTime"] + this._duration < this.timeTemp;
|
|
196
|
+
// 只要有一个没有完成 都算没有完成 过渡
|
|
197
|
+
if (!isisDone) {
|
|
198
|
+
return false;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
if (!this._isDone) {
|
|
202
|
+
this._isDone = true;
|
|
203
|
+
return false;
|
|
204
|
+
}
|
|
205
|
+
return true;
|
|
206
|
+
}
|
|
207
|
+
}
|
package/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default } from "./ThreeBase";
|
|
1
|
+
export { default } from "./ThreeBase";
|
package/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
// 基类
|
|
2
|
-
export { default } from "./ThreeBase";
|
|
1
|
+
// 基类
|
|
2
|
+
export { default } from "./ThreeBase";
|
package/keyContorls.d.ts
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import { EventDispatcher, EventListener, 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<T extends string>(type: T, listener: EventListener<{}, T, this>): void;
|
|
21
|
-
addEvent(): void;
|
|
22
|
-
dispose(): void;
|
|
23
|
-
}
|
|
24
|
-
declare const keyContorls: KeyContorls;
|
|
25
|
-
export default keyContorls;
|
|
1
|
+
import { EventDispatcher, EventListener, 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<T extends string>(type: T, listener: EventListener<{}, T, this>): void;
|
|
21
|
+
addEvent(): void;
|
|
22
|
+
dispose(): void;
|
|
23
|
+
}
|
|
24
|
+
declare const keyContorls: KeyContorls;
|
|
25
|
+
export default keyContorls;
|