three-base 1.0.82 → 1.0.83
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/index.js +1 -1
- package/index.ts +1 -1
- package/lib/ApngTexture.js +40 -107
- package/lib/ApngTextureManage.js +51 -100
- package/lib/EventMesh.js +22 -42
- package/lib/ExtrudeMesh.js +147 -178
- package/lib/FPScontrol.js +116 -133
- package/lib/InstancedGroupMesh.js +25 -45
- package/lib/KeyFrameAnimation.js +37 -54
- package/lib/PlaneText.d.ts +2 -2
- package/lib/PlaneText.js +16 -36
- package/lib/PlaneText.ts +2 -3
- package/lib/PlaneWithHtml.js +48 -126
- package/lib/PointLight/PointLight.d.ts +2 -2
- package/lib/PointLight/PointLight.js +47 -67
- package/lib/PointLight/PointLight.ts +3 -3
- package/lib/Sky/Sky.js +11 -30
- package/lib/SpriteText.d.ts +45 -0
- package/lib/SpriteText.js +162 -0
- package/lib/SpriteText.ts +189 -0
- package/lib/SpriteText2.d.ts +4 -4
- package/lib/SpriteText2.js +90 -166
- package/lib/Text3D/Text3D.js +40 -61
- package/lib/Text3D/fontController.js +149 -284
- package/lib/ThreeBase.js +204 -341
- package/lib/ThreeMouse.js +244 -203
- package/lib/Transition.js +95 -161
- package/lib/keyContorls.js +74 -102
- package/lib/planeModal1/PlaneModal1.js +90 -162
- package/lib/shaders.js +178 -36
- package/lib/spriteModal1/SpriteModal1.js +93 -165
- package/lib/threeLoader.js +66 -89
- package/lib/threeUtils.js +61 -85
- package/lib/threeUtils.ts +2 -1
- package/package.json +2 -4
package/lib/ExtrudeMesh.js
CHANGED
|
@@ -4,30 +4,6 @@
|
|
|
4
4
|
* @Last Modified by: xiaosihan
|
|
5
5
|
* @Last Modified time: 2022-09-30 00:12:19
|
|
6
6
|
*/
|
|
7
|
-
var __extends = (this && this.__extends) || (function () {
|
|
8
|
-
var extendStatics = function (d, b) {
|
|
9
|
-
extendStatics = Object.setPrototypeOf ||
|
|
10
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
11
|
-
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
12
|
-
return extendStatics(d, b);
|
|
13
|
-
};
|
|
14
|
-
return function (d, b) {
|
|
15
|
-
if (typeof b !== "function" && b !== null)
|
|
16
|
-
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
17
|
-
extendStatics(d, b);
|
|
18
|
-
function __() { this.constructor = d; }
|
|
19
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
20
|
-
};
|
|
21
|
-
})();
|
|
22
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
23
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
24
|
-
if (ar || !(i in from)) {
|
|
25
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
26
|
-
ar[i] = from[i];
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
30
|
-
};
|
|
31
7
|
import { clamp, cloneDeep, filter, first, get, isNumber, last } from "lodash";
|
|
32
8
|
import { BufferAttribute, BufferGeometry, Matrix4, Mesh, Vector2, Vector3 } from "three";
|
|
33
9
|
/**
|
|
@@ -38,35 +14,45 @@ import { BufferAttribute, BufferGeometry, Matrix4, Mesh, Vector2, Vector3 } from
|
|
|
38
14
|
* @class ExtrudeMesh
|
|
39
15
|
* @extends {Mesh<BufferGeometry, Material>}
|
|
40
16
|
*/
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
17
|
+
export default class ExtrudeMesh extends Mesh {
|
|
18
|
+
// 临时使用的二维顶点对象
|
|
19
|
+
static temp1Vector2 = new Vector2();
|
|
20
|
+
static temp2Vector2 = new Vector2();
|
|
21
|
+
static temp3Vector2 = new Vector2();
|
|
22
|
+
// 临时使用的3维顶点对象
|
|
23
|
+
static tempVector3 = new Vector3();
|
|
24
|
+
static temp1Vector3 = new Vector3();
|
|
25
|
+
static temp2Vector3 = new Vector3();
|
|
26
|
+
static temp3Vector3 = new Vector3();
|
|
27
|
+
// 临时使用的矩阵
|
|
28
|
+
static temp1Matrix4 = new Matrix4();
|
|
29
|
+
static temp2Matrix4 = new Matrix4();
|
|
30
|
+
static temp3Matrix4 = new Matrix4();
|
|
31
|
+
constructor(props, material) {
|
|
32
|
+
super(undefined, material);
|
|
33
|
+
this.updateGeometry(props);
|
|
49
34
|
}
|
|
35
|
+
// 通过 props.paths 和圆角属性 计算出来的 最终路径
|
|
36
|
+
pointerWidthRadius = [];
|
|
50
37
|
// 通过2个顶点和缩放值计算矩阵
|
|
51
|
-
|
|
52
|
-
var _a;
|
|
38
|
+
computerMatrix(vector1, vector2, scale) {
|
|
53
39
|
ExtrudeMesh.temp1Matrix4.identity();
|
|
54
40
|
ExtrudeMesh.temp1Matrix4.multiply(ExtrudeMesh.temp2Matrix4.lookAt(ExtrudeMesh.temp1Vector3.set(vector1[0], vector1[1], vector1[2]), ExtrudeMesh.temp2Vector3.set(vector2[0], vector1[1], vector2[2]), ExtrudeMesh.temp3Vector3.set(0, 1, 0)));
|
|
55
|
-
ExtrudeMesh.temp1Matrix4.scale(
|
|
41
|
+
ExtrudeMesh.temp1Matrix4.scale(ExtrudeMesh.temp1Vector3.set(...scale));
|
|
56
42
|
return ExtrudeMesh.temp1Matrix4.transpose().toArray();
|
|
57
|
-
}
|
|
43
|
+
}
|
|
58
44
|
/**
|
|
59
45
|
* @计算渐变值 computerGradient([3,2,4], 0.3);
|
|
60
46
|
* @渐变区间 values:number[]
|
|
61
47
|
* @百分比 percentage:number
|
|
62
48
|
*/
|
|
63
|
-
|
|
49
|
+
computerGradient(values, percentage) {
|
|
64
50
|
// 过滤有效数字类型
|
|
65
|
-
values = filter(values,
|
|
51
|
+
values = filter(values, v => isNumber(v));
|
|
66
52
|
// 限定取值范围
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
for (
|
|
53
|
+
let P = clamp(percentage, 0, 1);
|
|
54
|
+
let VL = values.length;
|
|
55
|
+
for (let i = (VL - 1); i >= 0; i--) {
|
|
70
56
|
if (P === (i / (VL - 1))) {
|
|
71
57
|
return values[i];
|
|
72
58
|
}
|
|
@@ -77,11 +63,9 @@ var ExtrudeMesh = /** @class */ (function (_super) {
|
|
|
77
63
|
}
|
|
78
64
|
}
|
|
79
65
|
return 0;
|
|
80
|
-
}
|
|
66
|
+
}
|
|
81
67
|
// 计算圆角路径 并存到 this.pointerWidthRadius 上
|
|
82
|
-
|
|
83
|
-
var _a;
|
|
84
|
-
var _this = this;
|
|
68
|
+
computerPointerWidthRadius(paths, closed) {
|
|
85
69
|
// 路径小于2个就不执行计算
|
|
86
70
|
if (paths.length < 2) {
|
|
87
71
|
return;
|
|
@@ -95,74 +79,75 @@ var ExtrudeMesh = /** @class */ (function (_super) {
|
|
|
95
79
|
paths = cloneDeep(paths);
|
|
96
80
|
// 如果是闭合路径的话就头尾相连
|
|
97
81
|
if (closed) {
|
|
98
|
-
Object.defineProperties(paths,
|
|
99
|
-
|
|
82
|
+
Object.defineProperties(paths, {
|
|
83
|
+
[-1]: {
|
|
100
84
|
value: last(paths),
|
|
101
85
|
configurable: false,
|
|
102
86
|
enumerable: false,
|
|
103
87
|
writable: false // 此属性的值能否修改
|
|
104
88
|
},
|
|
105
|
-
|
|
89
|
+
[paths.length]: {
|
|
106
90
|
value: first(paths),
|
|
107
91
|
configurable: false,
|
|
108
92
|
enumerable: false,
|
|
109
93
|
writable: false // 此属性的值能否修改
|
|
110
|
-
}
|
|
111
|
-
|
|
94
|
+
}
|
|
95
|
+
});
|
|
112
96
|
}
|
|
113
|
-
paths.map(
|
|
114
|
-
|
|
115
|
-
var vector3 = P.vector3, _o = P.radius, radius = _o === void 0 ? 0.1 : _o, _p = P.segments, segments = _p === void 0 ? 0 : _p, _q = P.scale, scale = _q === void 0 ? { x: 1, y: 1 } : _q;
|
|
97
|
+
paths.map((P, i) => {
|
|
98
|
+
const { vector3, radius = 0.1, segments = 0, scale = { x: 1, y: 1 } } = P;
|
|
116
99
|
//当前点位置前后都有点时就可以做圆角计算
|
|
117
100
|
if (paths[i - 1] && paths[i + 1]) {
|
|
118
101
|
// 第一个向量
|
|
119
|
-
|
|
120
|
-
.set
|
|
102
|
+
let v1 = ExtrudeMesh.temp1Vector3
|
|
103
|
+
.set(...vector3)
|
|
104
|
+
.sub(ExtrudeMesh.tempVector3.set(...paths[i - 1].vector3))
|
|
121
105
|
.normalize()
|
|
122
106
|
.clone();
|
|
123
107
|
// 第二个向量
|
|
124
|
-
|
|
125
|
-
.set
|
|
108
|
+
let v2 = ExtrudeMesh.temp2Vector3
|
|
109
|
+
.set(...paths[i + 1].vector3)
|
|
110
|
+
.sub(ExtrudeMesh.tempVector3.set(...vector3))
|
|
126
111
|
.normalize()
|
|
127
112
|
.clone();
|
|
128
113
|
// 夹角
|
|
129
|
-
|
|
114
|
+
let innerAngle = v1.clone().multiplyScalar(-1).angleTo(v2);
|
|
130
115
|
// 边长
|
|
131
|
-
|
|
116
|
+
let sideLength = radius / Math.tan(innerAngle / 2);
|
|
132
117
|
// 圆角的起点
|
|
133
|
-
|
|
118
|
+
let startP = new Vector3(...vector3).sub(v1.clone().multiplyScalar(sideLength));
|
|
134
119
|
// 圆角的终点
|
|
135
|
-
|
|
120
|
+
let endP = new Vector3(...vector3).add(v2.clone().multiplyScalar(sideLength));
|
|
136
121
|
// 圆角起点到终点的向量
|
|
137
|
-
|
|
122
|
+
let StoE = endP.clone().sub(startP);
|
|
138
123
|
// 弦长
|
|
139
|
-
|
|
124
|
+
let chordLength = radius / Math.sin(innerAngle / 2);
|
|
140
125
|
// 圆心位置
|
|
141
|
-
|
|
126
|
+
let circleCenter = v2
|
|
142
127
|
.clone()
|
|
143
128
|
.add(v1)
|
|
144
129
|
.multiplyScalar(0.5)
|
|
145
130
|
.sub(v1)
|
|
146
131
|
.setLength(chordLength)
|
|
147
|
-
.add(
|
|
132
|
+
.add(ExtrudeMesh.tempVector3.set(...vector3));
|
|
148
133
|
//向量2是否在 向量1的左边
|
|
149
|
-
|
|
134
|
+
let v2Inv1Left = ExtrudeMesh.temp1Vector3
|
|
150
135
|
.set(-v1.z, 0, v1.x)
|
|
151
136
|
.angleTo(ExtrudeMesh.temp2Vector3.set(v2.x, 0, v2.z))
|
|
152
137
|
< (Math.PI / 2);
|
|
153
138
|
// XZ平面上的夹角
|
|
154
|
-
|
|
139
|
+
let innerAngleXZ = ExtrudeMesh.temp1Vector3
|
|
155
140
|
.set(v1.x, 0, v1.z)
|
|
156
141
|
.angleTo(ExtrudeMesh.temp2Vector3.set(v2.x, 0, v2.z));
|
|
157
142
|
// 如果当前点的位置在前后2点的连线上,就不进行分段计算 并且应用上一个点的矩阵
|
|
158
143
|
if (innerAngleXZ === 0) {
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
vector3
|
|
144
|
+
let { x = 1, y = 1 } = scale;
|
|
145
|
+
let lastPointMatrix = last(this.pointerWidthRadius).matrix;
|
|
146
|
+
this.pointerWidthRadius.push({
|
|
147
|
+
vector3,
|
|
163
148
|
matrix: ExtrudeMesh.temp1Matrix4
|
|
164
149
|
.identity()
|
|
165
|
-
.extractRotation(
|
|
150
|
+
.extractRotation(ExtrudeMesh.temp2Matrix4.set(...lastPointMatrix))
|
|
166
151
|
.multiply(ExtrudeMesh.temp3Matrix4
|
|
167
152
|
.identity()
|
|
168
153
|
.scale(ExtrudeMesh.temp1Vector3.set(1, y, x)))
|
|
@@ -171,38 +156,38 @@ var ExtrudeMesh = /** @class */ (function (_super) {
|
|
|
171
156
|
});
|
|
172
157
|
}
|
|
173
158
|
else if (segments === 0) { // 分段数为0时不分段
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
vector3
|
|
177
|
-
matrix:
|
|
159
|
+
let { x = 1, y = 1 } = scale;
|
|
160
|
+
this.pointerWidthRadius.push({
|
|
161
|
+
vector3,
|
|
162
|
+
matrix: this.computerMatrix((v2Inv1Left ? circleCenter.toArray() : vector3), (v2Inv1Left ? vector3 : circleCenter.toArray()), [1, y, x])
|
|
178
163
|
});
|
|
179
164
|
}
|
|
180
165
|
else {
|
|
181
|
-
for (
|
|
166
|
+
for (let ii = 0; ii <= segments; ii++) {
|
|
182
167
|
// 圆角计算的低n个点的角度
|
|
183
|
-
|
|
168
|
+
let Aa = ii * ((Math.PI - innerAngle) / segments);
|
|
184
169
|
//半径对角
|
|
185
|
-
|
|
170
|
+
let Cc = Math.PI - Aa - (innerAngle / 2);
|
|
186
171
|
//圆角分段的弦长
|
|
187
|
-
|
|
172
|
+
let a = radius * Math.sin(Aa) / Math.sin(Cc);
|
|
188
173
|
// 每段圆角的弦长
|
|
189
|
-
|
|
174
|
+
let StoEvector = StoE.clone().setLength(a).add(startP);
|
|
190
175
|
// 当前点的位置
|
|
191
|
-
|
|
176
|
+
let ridiusP = StoEvector
|
|
192
177
|
.clone()
|
|
193
178
|
.sub(circleCenter)
|
|
194
179
|
.setLength(radius)
|
|
195
180
|
.add(circleCenter);
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
181
|
+
let { x: preX = 1, y: preY = 1 } = get(paths[i - 1], ["scale"]) || {};
|
|
182
|
+
let { x: nextX = 1, y: nextY = 1 } = get(paths[i + 1], ["scale"]) || {};
|
|
183
|
+
let { x = 1, y = 1 } = scale;
|
|
199
184
|
// 缩放值过渡计算
|
|
200
|
-
x =
|
|
201
|
-
y =
|
|
185
|
+
x = this.computerGradient([(preX + x) / 2, x, (x + nextX) / 2], ii / segments);
|
|
186
|
+
y = this.computerGradient([(preY + y) / 2, y, (y + nextY) / 2], ii / segments);
|
|
202
187
|
// 添加一个带矩阵的点
|
|
203
|
-
|
|
188
|
+
this.pointerWidthRadius.push({
|
|
204
189
|
vector3: ridiusP.toArray(),
|
|
205
|
-
matrix:
|
|
190
|
+
matrix: this.computerMatrix((v2Inv1Left ? circleCenter.toArray() : ridiusP.toArray()), (v2Inv1Left ? ridiusP.toArray() : circleCenter.toArray()), [1, y, x])
|
|
206
191
|
});
|
|
207
192
|
}
|
|
208
193
|
}
|
|
@@ -212,39 +197,41 @@ var ExtrudeMesh = /** @class */ (function (_super) {
|
|
|
212
197
|
if (i === paths.length - 1) {
|
|
213
198
|
// 如果是闭合的话 就把第一个点的位置加入最后后面
|
|
214
199
|
if (closed) {
|
|
215
|
-
|
|
200
|
+
this.pointerWidthRadius.push(first(this.pointerWidthRadius));
|
|
216
201
|
}
|
|
217
202
|
else {
|
|
218
203
|
// 如果路径未闭合并且遍历到最后一个时特殊处理
|
|
219
|
-
|
|
204
|
+
let lastPoint = last(this.pointerWidthRadius);
|
|
220
205
|
// 在没有闭合的情况下添加第一个点的位置
|
|
221
|
-
|
|
222
|
-
.set
|
|
206
|
+
let v = ExtrudeMesh.temp1Vector3
|
|
207
|
+
.set(...vector3)
|
|
208
|
+
.sub(ExtrudeMesh.temp3Vector3.set(...lastPoint.vector3))
|
|
223
209
|
.normalize();
|
|
224
|
-
|
|
210
|
+
let lookAtPoint = ExtrudeMesh.temp2Vector3
|
|
225
211
|
.set(v.z, 0, -v.x)
|
|
226
|
-
.add(
|
|
212
|
+
.add(ExtrudeMesh.temp3Vector3.set(...vector3))
|
|
227
213
|
.toArray();
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
vector3
|
|
231
|
-
matrix:
|
|
214
|
+
let { x = 1, y = 1 } = scale;
|
|
215
|
+
this.pointerWidthRadius.push({
|
|
216
|
+
vector3,
|
|
217
|
+
matrix: this.computerMatrix(vector3, lookAtPoint, [1, y, x])
|
|
232
218
|
});
|
|
233
219
|
}
|
|
234
220
|
}
|
|
235
221
|
else {
|
|
236
|
-
|
|
222
|
+
let { x = 1, y = 1 } = scale;
|
|
237
223
|
// 在没有闭合的情况下添加第一个点的位置
|
|
238
|
-
|
|
239
|
-
.set
|
|
224
|
+
let v2 = ExtrudeMesh.temp1Vector3
|
|
225
|
+
.set(...paths[i + 1].vector3)
|
|
226
|
+
.sub(ExtrudeMesh.temp2Vector3.set(...vector3))
|
|
240
227
|
.normalize();
|
|
241
|
-
|
|
228
|
+
let lookAtPoint = ExtrudeMesh.temp1Vector3
|
|
242
229
|
.set(v2.z, 0, -v2.x)
|
|
243
|
-
.add(
|
|
230
|
+
.add(ExtrudeMesh.temp2Vector3.set(...vector3))
|
|
244
231
|
.toArray();
|
|
245
|
-
|
|
246
|
-
vector3
|
|
247
|
-
matrix:
|
|
232
|
+
this.pointerWidthRadius.push({
|
|
233
|
+
vector3,
|
|
234
|
+
matrix: this.computerMatrix(vector3, lookAtPoint, [1, y, x])
|
|
248
235
|
});
|
|
249
236
|
}
|
|
250
237
|
} // else
|
|
@@ -261,22 +248,21 @@ var ExtrudeMesh = /** @class */ (function (_super) {
|
|
|
261
248
|
// this.pointerWidthRadius.splice(i, 1);
|
|
262
249
|
// }
|
|
263
250
|
// }
|
|
264
|
-
}
|
|
251
|
+
}
|
|
265
252
|
// 计算三维路径的总长度
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
points.map(
|
|
269
|
-
var _a, _b;
|
|
253
|
+
computerPathLength(points) {
|
|
254
|
+
let length = 0;
|
|
255
|
+
points.map((p, index) => {
|
|
270
256
|
if (index < points.length - 1) {
|
|
271
|
-
|
|
272
|
-
|
|
257
|
+
ExtrudeMesh.temp1Vector3.set(...p);
|
|
258
|
+
ExtrudeMesh.temp2Vector3.set(...points[index + 1]);
|
|
273
259
|
length += ExtrudeMesh.temp1Vector3.distanceTo(ExtrudeMesh.temp2Vector3);
|
|
274
260
|
}
|
|
275
261
|
});
|
|
276
262
|
return length;
|
|
277
|
-
}
|
|
263
|
+
}
|
|
278
264
|
// 通过一条线段计算挤出模型的各个顶点的位置和 uv坐标
|
|
279
|
-
|
|
265
|
+
setExtrudeMesh(startP, // 起点位置
|
|
280
266
|
startMatrix4, // 起点位置的矩阵
|
|
281
267
|
endP, // 终点位置
|
|
282
268
|
endMatrix4, // 终点位置的矩阵
|
|
@@ -284,17 +270,15 @@ var ExtrudeMesh = /** @class */ (function (_super) {
|
|
|
284
270
|
shapePath) {
|
|
285
271
|
// // 反转路径, 这样uv 坐标看起来习惯一些
|
|
286
272
|
// shapePath = cloneDeep(shapePath).reverse();
|
|
287
|
-
var _this = this;
|
|
288
273
|
// 计算二维路径的总长度 作为uv坐标的边长
|
|
289
|
-
|
|
274
|
+
let shapePathLength = this.computerPathLength(shapePath.map(p => [...p, 0]));
|
|
290
275
|
// 挤出长度
|
|
291
|
-
|
|
276
|
+
let extrudeLength = this.computerPathLength([startP, endP]);
|
|
292
277
|
// 网格模型每个点
|
|
293
|
-
|
|
278
|
+
let geometryPoint = [];
|
|
294
279
|
// 网格模型每个点对应的uv坐标
|
|
295
|
-
|
|
296
|
-
shapePath.map(
|
|
297
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
280
|
+
let uvPoint = [];
|
|
281
|
+
shapePath.map((P, index) => {
|
|
298
282
|
if (index < shapePath.length - 1) {
|
|
299
283
|
// 计算出矩形面的4个顶点
|
|
300
284
|
//[pa....Pd]
|
|
@@ -302,28 +286,28 @@ var ExtrudeMesh = /** @class */ (function (_super) {
|
|
|
302
286
|
//[. .]
|
|
303
287
|
//[. .]
|
|
304
288
|
//[Pb....Pc]
|
|
305
|
-
|
|
289
|
+
let Pa = ExtrudeMesh.tempVector3
|
|
306
290
|
.set(0, P[1], -P[0])
|
|
307
|
-
.applyMatrix4(
|
|
308
|
-
.add(
|
|
291
|
+
.applyMatrix4(ExtrudeMesh.temp1Matrix4.set(...startMatrix4))
|
|
292
|
+
.add(ExtrudeMesh.temp1Vector3.set(...startP))
|
|
309
293
|
.toArray();
|
|
310
|
-
|
|
294
|
+
let Pb = ExtrudeMesh.tempVector3
|
|
311
295
|
.set(0, shapePath[index + 1][1], -shapePath[index + 1][0])
|
|
312
|
-
.applyMatrix4(
|
|
313
|
-
.add(
|
|
296
|
+
.applyMatrix4(ExtrudeMesh.temp1Matrix4.set(...startMatrix4))
|
|
297
|
+
.add(ExtrudeMesh.temp1Vector3.set(...startP))
|
|
314
298
|
.toArray();
|
|
315
|
-
|
|
299
|
+
let Pc = ExtrudeMesh.tempVector3
|
|
316
300
|
.set(0, shapePath[index + 1][1], -shapePath[index + 1][0])
|
|
317
|
-
.applyMatrix4(
|
|
318
|
-
.add(
|
|
301
|
+
.applyMatrix4(ExtrudeMesh.temp1Matrix4.set(...endMatrix4))
|
|
302
|
+
.add(ExtrudeMesh.temp1Vector3.set(...endP))
|
|
319
303
|
.toArray();
|
|
320
|
-
|
|
304
|
+
let Pd = ExtrudeMesh.tempVector3
|
|
321
305
|
.set(0, P[1], -P[0])
|
|
322
|
-
.applyMatrix4(
|
|
323
|
-
.add(
|
|
306
|
+
.applyMatrix4(ExtrudeMesh.temp1Matrix4.set(...endMatrix4))
|
|
307
|
+
.add(ExtrudeMesh.temp1Vector3.set(...endP))
|
|
324
308
|
.toArray();
|
|
325
309
|
// 组成矩形的2个三角面
|
|
326
|
-
geometryPoint.push
|
|
310
|
+
geometryPoint.push(...Pa, ...Pb, ...Pc, ...Pa, ...Pc, ...Pd);
|
|
327
311
|
// 计算出矩形面的4个顶点的uv坐标
|
|
328
312
|
//[Pauv..Pcuv]
|
|
329
313
|
//[. .]
|
|
@@ -331,64 +315,49 @@ var ExtrudeMesh = /** @class */ (function (_super) {
|
|
|
331
315
|
//[. .]
|
|
332
316
|
//[Pbuv..Pduv]
|
|
333
317
|
// 当前位置的 uv.y 位置
|
|
334
|
-
|
|
318
|
+
let currentUvy = this.computerPathLength([first(shapePath), ...shapePath.slice(0, index + 1)].map(sP => [...sP, 0])) / shapePathLength;
|
|
335
319
|
// 下一个坐标的 uv.y 位置
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
uvPoint.push
|
|
320
|
+
let nextUvy = this.computerPathLength([first(shapePath), ...shapePath.slice(0, index + 2)].map(sP => [...sP, 0])) / shapePathLength;
|
|
321
|
+
let Pauv = [uvx / shapePathLength, currentUvy];
|
|
322
|
+
let Pbuv = [uvx / shapePathLength, nextUvy];
|
|
323
|
+
let Pcuv = [(uvx + extrudeLength) / shapePathLength, nextUvy];
|
|
324
|
+
let Pduv = [(uvx + extrudeLength) / shapePathLength, currentUvy];
|
|
325
|
+
uvPoint.push(...Pauv, ...Pbuv, ...Pcuv, ...Pauv, ...Pcuv, ...Pduv);
|
|
342
326
|
}
|
|
343
327
|
});
|
|
344
|
-
return { geometryPoint
|
|
345
|
-
}
|
|
328
|
+
return { geometryPoint, uvPoint };
|
|
329
|
+
}
|
|
346
330
|
//设置模型
|
|
347
|
-
|
|
348
|
-
|
|
331
|
+
updateGeometry(props) {
|
|
332
|
+
const { paths, shapePath, closed } = props;
|
|
349
333
|
// 计算圆角路径
|
|
350
334
|
this.computerPointerWidthRadius(paths, closed);
|
|
351
335
|
//网格模型的每个顶点位置
|
|
352
|
-
|
|
336
|
+
let geometryPoint = [];
|
|
353
337
|
// 网格模型每个点对应的uv坐标
|
|
354
|
-
|
|
355
|
-
for (
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
338
|
+
let uvPoint = [];
|
|
339
|
+
for (let i = 0; i < this.pointerWidthRadius.length - 1; i++) {
|
|
340
|
+
let Point1 = this.pointerWidthRadius[i];
|
|
341
|
+
let Point2 = this.pointerWidthRadius[i + 1];
|
|
342
|
+
let uvx = this.computerPathLength(this.pointerWidthRadius.slice(0, i + 1).map(p => p.vector3));
|
|
343
|
+
const { geometryPoint: geo, uvPoint: uv } = this.setExtrudeMesh(Point1.vector3, Point1.matrix, Point2.vector3, Point2.matrix, uvx, shapePath);
|
|
360
344
|
// 把挤出的网格模型的顶点收集起来
|
|
361
|
-
geometryPoint.push
|
|
345
|
+
geometryPoint.push(...geo);
|
|
362
346
|
// 把挤出的网格模型顶点的uv坐标收集起来
|
|
363
|
-
uvPoint.push
|
|
347
|
+
uvPoint.push(...uv);
|
|
364
348
|
}
|
|
365
|
-
|
|
349
|
+
let geometry = new BufferGeometry();
|
|
366
350
|
// 修改模型
|
|
367
|
-
|
|
368
|
-
|
|
351
|
+
let positionArray = new Float32Array(geometryPoint);
|
|
352
|
+
let position = new BufferAttribute(positionArray, 3, false);
|
|
369
353
|
geometry.setAttribute("position", position);
|
|
370
|
-
|
|
371
|
-
|
|
354
|
+
let uvArray = new Float32Array(uvPoint);
|
|
355
|
+
let uv = new BufferAttribute(uvArray, 2, false);
|
|
372
356
|
geometry.setAttribute("uv", uv);
|
|
373
357
|
// 计算顶点法线
|
|
374
358
|
geometry.computeVertexNormals();
|
|
375
359
|
this.geometry.dispose();
|
|
376
360
|
this.geometry = geometry;
|
|
377
361
|
this.dispatchEvent({ type: "loaded" });
|
|
378
|
-
}
|
|
379
|
-
|
|
380
|
-
ExtrudeMesh.temp1Vector2 = new Vector2();
|
|
381
|
-
ExtrudeMesh.temp2Vector2 = new Vector2();
|
|
382
|
-
ExtrudeMesh.temp3Vector2 = new Vector2();
|
|
383
|
-
// 临时使用的3维顶点对象
|
|
384
|
-
ExtrudeMesh.tempVector3 = new Vector3();
|
|
385
|
-
ExtrudeMesh.temp1Vector3 = new Vector3();
|
|
386
|
-
ExtrudeMesh.temp2Vector3 = new Vector3();
|
|
387
|
-
ExtrudeMesh.temp3Vector3 = new Vector3();
|
|
388
|
-
// 临时使用的矩阵
|
|
389
|
-
ExtrudeMesh.temp1Matrix4 = new Matrix4();
|
|
390
|
-
ExtrudeMesh.temp2Matrix4 = new Matrix4();
|
|
391
|
-
ExtrudeMesh.temp3Matrix4 = new Matrix4();
|
|
392
|
-
return ExtrudeMesh;
|
|
393
|
-
}(Mesh));
|
|
394
|
-
export default ExtrudeMesh;
|
|
362
|
+
}
|
|
363
|
+
}
|