three-base 1.0.80 → 1.0.82
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/lib/ApngTexture.js +107 -40
- package/lib/ApngTextureManage.js +100 -51
- package/lib/EventMesh.js +42 -22
- package/lib/ExtrudeMesh.js +178 -147
- package/lib/FPScontrol.js +133 -116
- package/lib/InstancedGroupMesh.js +45 -25
- package/lib/KeyFrameAnimation.js +54 -37
- package/lib/PlaneText.js +34 -14
- package/lib/PlaneWithHtml.js +126 -48
- package/lib/PointLight/PointLight.js +65 -45
- package/lib/Sky/Sky.js +30 -11
- package/lib/SpriteText2.js +166 -90
- package/lib/Text3D/Text3D.js +61 -40
- package/lib/Text3D/fontController.js +284 -149
- package/lib/ThreeBase.js +341 -204
- package/lib/ThreeMouse.js +203 -244
- package/lib/Transition.js +162 -96
- package/lib/Transition.ts +1 -1
- package/lib/keyContorls.js +102 -74
- package/lib/planeModal1/PlaneModal1.js +162 -90
- package/lib/shaders.js +36 -178
- package/lib/spriteModal1/SpriteModal1.js +165 -93
- package/lib/threeLoader.js +89 -66
- package/lib/threeUtils.js +84 -59
- package/package.json +1 -1
package/lib/FPScontrol.js
CHANGED
|
@@ -4,6 +4,21 @@
|
|
|
4
4
|
* @Last Modified by: xiaosihan
|
|
5
5
|
* @Last Modified time: 2022-06-06 13:32:08
|
|
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
|
+
})();
|
|
7
22
|
import { Clock, EventDispatcher, Vector3 } from "three";
|
|
8
23
|
import { Capsule } from "three/examples/jsm/math/Capsule";
|
|
9
24
|
import { Octree } from "three/examples/jsm/math/Octree";
|
|
@@ -15,34 +30,114 @@ import { clamp, degToRad } from "three/src/math/MathUtils";
|
|
|
15
30
|
* @class FPScontrol
|
|
16
31
|
* @extends {EventDispatcher}
|
|
17
32
|
*/
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
33
|
+
var FPScontrol = /** @class */ (function (_super) {
|
|
34
|
+
__extends(FPScontrol, _super);
|
|
35
|
+
function FPScontrol(camera, canvas) {
|
|
36
|
+
var _this = _super.call(this) || this;
|
|
37
|
+
// 是否启用
|
|
38
|
+
_this.enable = false;
|
|
39
|
+
_this.GRAVITY = 30; // 重力
|
|
40
|
+
_this.STEPS_PER_FRAME = 5; // 速度
|
|
41
|
+
// 世界八叉树对象
|
|
42
|
+
_this.worldOctree = new Octree();
|
|
43
|
+
// 用户自己的碰撞体积
|
|
44
|
+
_this.playerCollider = new Capsule(new Vector3(0, 0.35, 0), new Vector3(0, 1, 0), 0.35);
|
|
45
|
+
// 时钟对象
|
|
46
|
+
_this.clock = new Clock();
|
|
47
|
+
_this.playerVelocity = new Vector3();
|
|
48
|
+
_this.playerDirection = new Vector3();
|
|
49
|
+
_this.playerOnFloor = false;
|
|
50
|
+
_this.mouseTime = 0;
|
|
51
|
+
_this.isMousedown = false;
|
|
52
|
+
_this.keyStates = {};
|
|
53
|
+
_this.keydown = function (event) {
|
|
54
|
+
_this.keyStates[event.code] = true;
|
|
55
|
+
};
|
|
56
|
+
_this.keyup = function (event) {
|
|
57
|
+
_this.keyStates[event.code] = false;
|
|
58
|
+
};
|
|
59
|
+
_this.mousedown = function () {
|
|
60
|
+
_this.isMousedown = true;
|
|
61
|
+
_this.mouseTime = performance.now();
|
|
62
|
+
};
|
|
63
|
+
_this.mouseup = function () {
|
|
64
|
+
_this.isMousedown = false;
|
|
65
|
+
};
|
|
66
|
+
_this.mousemove = function (event) {
|
|
67
|
+
if (_this.enable && _this.isMousedown) {
|
|
68
|
+
_this.camera.rotation.y -= event.movementX / 500;
|
|
69
|
+
_this.camera.rotation.x -= event.movementY / 500;
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
// 获取前进的向量
|
|
73
|
+
_this.getForwardVector = function () {
|
|
74
|
+
_this.camera.getWorldDirection(_this.playerDirection);
|
|
75
|
+
_this.playerDirection.y = 0;
|
|
76
|
+
_this.playerDirection.normalize();
|
|
77
|
+
return _this.playerDirection;
|
|
78
|
+
};
|
|
79
|
+
// 获取 后退的向量
|
|
80
|
+
_this.getSideVector = function () {
|
|
81
|
+
_this.camera.getWorldDirection(_this.playerDirection);
|
|
82
|
+
_this.playerDirection.y = 0;
|
|
83
|
+
_this.playerDirection.normalize();
|
|
84
|
+
_this.playerDirection.cross(_this.camera.up);
|
|
85
|
+
return _this.playerDirection;
|
|
86
|
+
};
|
|
87
|
+
// 玩家移动控制器
|
|
88
|
+
_this.controls = function (deltaTime) {
|
|
89
|
+
var speedDelta = deltaTime * (_this.playerOnFloor ? 25 : 8);
|
|
90
|
+
if (_this.keyStates['KeyW']) {
|
|
91
|
+
_this.playerVelocity.add(_this.getForwardVector().multiplyScalar(speedDelta));
|
|
92
|
+
}
|
|
93
|
+
if (_this.keyStates['KeyS']) {
|
|
94
|
+
_this.playerVelocity.add(_this.getForwardVector().multiplyScalar(-speedDelta));
|
|
95
|
+
}
|
|
96
|
+
if (_this.keyStates['KeyA']) {
|
|
97
|
+
_this.playerVelocity.add(_this.getSideVector().multiplyScalar(-speedDelta));
|
|
98
|
+
}
|
|
99
|
+
if (_this.keyStates['KeyD']) {
|
|
100
|
+
_this.playerVelocity.add(_this.getSideVector().multiplyScalar(speedDelta));
|
|
101
|
+
}
|
|
102
|
+
if (_this.playerOnFloor) {
|
|
103
|
+
if (_this.keyStates['Space']) {
|
|
104
|
+
_this.playerVelocity.y = 15;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
// 更新玩家的位置
|
|
109
|
+
_this.updatePlayer = function (deltaTime) {
|
|
110
|
+
var damping = Math.exp(-4 * deltaTime) - 1;
|
|
111
|
+
if (!_this.playerOnFloor) {
|
|
112
|
+
_this.playerVelocity.y -= _this.GRAVITY * deltaTime;
|
|
113
|
+
damping *= 0.1;
|
|
114
|
+
}
|
|
115
|
+
_this.playerVelocity.addScaledVector(_this.playerVelocity, damping);
|
|
116
|
+
var deltaPosition = _this.playerVelocity.clone().multiplyScalar(deltaTime);
|
|
117
|
+
_this.playerCollider.translate(deltaPosition);
|
|
118
|
+
_this.playerCollisions();
|
|
119
|
+
_this.camera.position.copy(_this.playerCollider.end);
|
|
120
|
+
_this.camera.position.y += 1;
|
|
121
|
+
_this.camera.rotation.x = clamp(_this.camera.rotation.x, degToRad(-20), degToRad(20));
|
|
122
|
+
};
|
|
123
|
+
// 更新控制器的位置
|
|
124
|
+
_this.teleportPlayerIfOob = function () {
|
|
125
|
+
if (_this.camera.position.y <= -10) {
|
|
126
|
+
_this.playerCollider.start.set(0, 0.35, 0);
|
|
127
|
+
_this.playerCollider.end.set(0, 1, 10);
|
|
128
|
+
_this.playerCollider.radius = 0.35;
|
|
129
|
+
_this.camera.position.copy(_this.playerCollider.end);
|
|
130
|
+
// this.camera.position.set(0, 3, 0);
|
|
131
|
+
}
|
|
132
|
+
};
|
|
22
133
|
// 相机对象
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
134
|
+
_this.camera = camera;
|
|
135
|
+
_this.camera.rotation.order = 'YXZ';
|
|
136
|
+
_this.canvas = canvas;
|
|
137
|
+
_this.init(canvas);
|
|
138
|
+
return _this;
|
|
27
139
|
}
|
|
28
|
-
|
|
29
|
-
enable = false;
|
|
30
|
-
GRAVITY = 30; // 重力
|
|
31
|
-
STEPS_PER_FRAME = 5; // 速度
|
|
32
|
-
camera;
|
|
33
|
-
// 世界八叉树对象
|
|
34
|
-
worldOctree = new Octree();
|
|
35
|
-
// 用户自己的碰撞体积
|
|
36
|
-
playerCollider = new Capsule(new Vector3(0, 0.35, 0), new Vector3(0, 1, 0), 0.35);
|
|
37
|
-
// 时钟对象
|
|
38
|
-
clock = new Clock();
|
|
39
|
-
playerVelocity = new Vector3();
|
|
40
|
-
playerDirection = new Vector3();
|
|
41
|
-
playerOnFloor = false;
|
|
42
|
-
mouseTime = 0;
|
|
43
|
-
isMousedown = false;
|
|
44
|
-
keyStates = {};
|
|
45
|
-
init(canvas) {
|
|
140
|
+
FPScontrol.prototype.init = function (canvas) {
|
|
46
141
|
this.playerCollider.end.set(0, 1, 0);
|
|
47
142
|
document.addEventListener('keydown', this.keydown);
|
|
48
143
|
document.addEventListener('keyup', this.keyup);
|
|
@@ -50,84 +145,14 @@ export default class FPScontrol extends EventDispatcher {
|
|
|
50
145
|
document.addEventListener('pointerup', this.mouseup);
|
|
51
146
|
document.body.addEventListener('pointermove', this.mousemove);
|
|
52
147
|
this.enable = true;
|
|
53
|
-
}
|
|
54
|
-
keydown = (event) => {
|
|
55
|
-
this.keyStates[event.code] = true;
|
|
56
|
-
};
|
|
57
|
-
keyup = (event) => {
|
|
58
|
-
this.keyStates[event.code] = false;
|
|
59
|
-
};
|
|
60
|
-
mousedown = () => {
|
|
61
|
-
this.isMousedown = true;
|
|
62
|
-
this.mouseTime = performance.now();
|
|
63
|
-
};
|
|
64
|
-
mouseup = () => {
|
|
65
|
-
this.isMousedown = false;
|
|
66
|
-
};
|
|
67
|
-
mousemove = (event) => {
|
|
68
|
-
if (this.enable && this.isMousedown) {
|
|
69
|
-
this.camera.rotation.y -= event.movementX / 500;
|
|
70
|
-
this.camera.rotation.x -= event.movementY / 500;
|
|
71
|
-
}
|
|
72
148
|
};
|
|
73
149
|
// 设置 八叉树 节点
|
|
74
|
-
fromGraphNode(object3d) {
|
|
150
|
+
FPScontrol.prototype.fromGraphNode = function (object3d) {
|
|
75
151
|
this.worldOctree.fromGraphNode(object3d);
|
|
76
|
-
}
|
|
77
|
-
// 获取前进的向量
|
|
78
|
-
getForwardVector = () => {
|
|
79
|
-
this.camera.getWorldDirection(this.playerDirection);
|
|
80
|
-
this.playerDirection.y = 0;
|
|
81
|
-
this.playerDirection.normalize();
|
|
82
|
-
return this.playerDirection;
|
|
83
|
-
};
|
|
84
|
-
// 获取 后退的向量
|
|
85
|
-
getSideVector = () => {
|
|
86
|
-
this.camera.getWorldDirection(this.playerDirection);
|
|
87
|
-
this.playerDirection.y = 0;
|
|
88
|
-
this.playerDirection.normalize();
|
|
89
|
-
this.playerDirection.cross(this.camera.up);
|
|
90
|
-
return this.playerDirection;
|
|
91
|
-
};
|
|
92
|
-
// 玩家移动控制器
|
|
93
|
-
controls = (deltaTime) => {
|
|
94
|
-
const speedDelta = deltaTime * (this.playerOnFloor ? 25 : 8);
|
|
95
|
-
if (this.keyStates['KeyW']) {
|
|
96
|
-
this.playerVelocity.add(this.getForwardVector().multiplyScalar(speedDelta));
|
|
97
|
-
}
|
|
98
|
-
if (this.keyStates['KeyS']) {
|
|
99
|
-
this.playerVelocity.add(this.getForwardVector().multiplyScalar(-speedDelta));
|
|
100
|
-
}
|
|
101
|
-
if (this.keyStates['KeyA']) {
|
|
102
|
-
this.playerVelocity.add(this.getSideVector().multiplyScalar(-speedDelta));
|
|
103
|
-
}
|
|
104
|
-
if (this.keyStates['KeyD']) {
|
|
105
|
-
this.playerVelocity.add(this.getSideVector().multiplyScalar(speedDelta));
|
|
106
|
-
}
|
|
107
|
-
if (this.playerOnFloor) {
|
|
108
|
-
if (this.keyStates['Space']) {
|
|
109
|
-
this.playerVelocity.y = 15;
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
};
|
|
113
|
-
// 更新玩家的位置
|
|
114
|
-
updatePlayer = (deltaTime) => {
|
|
115
|
-
let damping = Math.exp(-4 * deltaTime) - 1;
|
|
116
|
-
if (!this.playerOnFloor) {
|
|
117
|
-
this.playerVelocity.y -= this.GRAVITY * deltaTime;
|
|
118
|
-
damping *= 0.1;
|
|
119
|
-
}
|
|
120
|
-
this.playerVelocity.addScaledVector(this.playerVelocity, damping);
|
|
121
|
-
const deltaPosition = this.playerVelocity.clone().multiplyScalar(deltaTime);
|
|
122
|
-
this.playerCollider.translate(deltaPosition);
|
|
123
|
-
this.playerCollisions();
|
|
124
|
-
this.camera.position.copy(this.playerCollider.end);
|
|
125
|
-
this.camera.position.y += 1;
|
|
126
|
-
this.camera.rotation.x = clamp(this.camera.rotation.x, degToRad(-20), degToRad(20));
|
|
127
152
|
};
|
|
128
153
|
// 玩家的碰撞检测
|
|
129
|
-
playerCollisions() {
|
|
130
|
-
|
|
154
|
+
FPScontrol.prototype.playerCollisions = function () {
|
|
155
|
+
var result = this.worldOctree.capsuleIntersect(this.playerCollider);
|
|
131
156
|
this.playerOnFloor = false;
|
|
132
157
|
if (result) {
|
|
133
158
|
this.playerOnFloor = result.normal.y > 0;
|
|
@@ -136,35 +161,27 @@ export default class FPScontrol extends EventDispatcher {
|
|
|
136
161
|
}
|
|
137
162
|
this.playerCollider.translate(result.normal.multiplyScalar(result.depth));
|
|
138
163
|
}
|
|
139
|
-
}
|
|
140
|
-
// 更新控制器的位置
|
|
141
|
-
teleportPlayerIfOob = () => {
|
|
142
|
-
if (this.camera.position.y <= -10) {
|
|
143
|
-
this.playerCollider.start.set(0, 0.35, 0);
|
|
144
|
-
this.playerCollider.end.set(0, 1, 10);
|
|
145
|
-
this.playerCollider.radius = 0.35;
|
|
146
|
-
this.camera.position.copy(this.playerCollider.end);
|
|
147
|
-
// this.camera.position.set(0, 3, 0);
|
|
148
|
-
}
|
|
149
164
|
};
|
|
150
165
|
// 更新
|
|
151
|
-
update() {
|
|
166
|
+
FPScontrol.prototype.update = function () {
|
|
152
167
|
if (this.enable) {
|
|
153
|
-
|
|
154
|
-
for (
|
|
168
|
+
var deltaTime = Math.min(0.05, this.clock.getDelta()) / this.STEPS_PER_FRAME;
|
|
169
|
+
for (var i = 0; i < this.STEPS_PER_FRAME; i++) {
|
|
155
170
|
this.controls(deltaTime);
|
|
156
171
|
this.updatePlayer(deltaTime);
|
|
157
172
|
this.teleportPlayerIfOob();
|
|
158
173
|
}
|
|
159
174
|
}
|
|
160
|
-
}
|
|
175
|
+
};
|
|
161
176
|
// 销毁事件
|
|
162
|
-
disposer() {
|
|
177
|
+
FPScontrol.prototype.disposer = function () {
|
|
163
178
|
this.enable = false;
|
|
164
179
|
document.removeEventListener('keydown', this.keydown);
|
|
165
180
|
document.removeEventListener('keyup', this.keyup);
|
|
166
181
|
this.canvas.removeEventListener('pointerdown', this.mousedown);
|
|
167
182
|
document.removeEventListener('pointerup', this.mouseup);
|
|
168
183
|
document.body.removeEventListener('pointermove', this.mousemove);
|
|
169
|
-
}
|
|
170
|
-
|
|
184
|
+
};
|
|
185
|
+
return FPScontrol;
|
|
186
|
+
}(EventDispatcher));
|
|
187
|
+
export default FPScontrol;
|
|
@@ -4,28 +4,43 @@
|
|
|
4
4
|
* @Last Modified by: xiaosihan
|
|
5
5
|
* @Last Modified time: 2023-02-26 14:42:21
|
|
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
|
+
})();
|
|
7
22
|
import * as THREE from 'three';
|
|
8
23
|
// 模型组转成 实例对象
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
count
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
24
|
+
var InstancedGroupMesh = /** @class */ (function (_super) {
|
|
25
|
+
__extends(InstancedGroupMesh, _super);
|
|
26
|
+
function InstancedGroupMesh(group, count) {
|
|
27
|
+
var _this = _super.call(this) || this;
|
|
28
|
+
_this.isInstancedGroupMesh = true;
|
|
29
|
+
_this.count = 0;
|
|
30
|
+
_this.meshCollect = {};
|
|
31
|
+
_this.instanceCollect = {};
|
|
32
|
+
_this.count = count;
|
|
33
|
+
var _a = _this, meshCollect = _a.meshCollect, instanceCollect = _a.instanceCollect;
|
|
19
34
|
group.updateMatrixWorld(true);
|
|
20
35
|
// collect all mesh counts, in case there are more than one copy of the same mesh in this group
|
|
21
|
-
group.traverse((obj)
|
|
22
|
-
|
|
36
|
+
group.traverse(function (obj) {
|
|
37
|
+
var mesh = obj;
|
|
23
38
|
if (mesh.isMesh) {
|
|
24
39
|
mesh.matrixWorld.decompose(mesh.position, mesh.quaternion, mesh.scale);
|
|
25
40
|
mesh.rotation.setFromQuaternion(mesh.quaternion);
|
|
26
41
|
mesh.updateMatrix();
|
|
27
42
|
// same geometry and same material consider as the same mesh
|
|
28
|
-
|
|
43
|
+
var uuid = mesh.geometry.uuid + '/' + mesh.material.uuid;
|
|
29
44
|
if (meshCollect[uuid]) {
|
|
30
45
|
meshCollect[uuid].push(mesh);
|
|
31
46
|
}
|
|
@@ -40,24 +55,29 @@ export default class InstancedGroupMesh extends THREE.Mesh {
|
|
|
40
55
|
}
|
|
41
56
|
});
|
|
42
57
|
// create all instances
|
|
43
|
-
Object.keys(meshCollect).forEach(uuid
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
58
|
+
Object.keys(meshCollect).forEach(function (uuid) {
|
|
59
|
+
var meshes = meshCollect[uuid];
|
|
60
|
+
var mesh = meshes[0];
|
|
61
|
+
var instancedMesh = new THREE.InstancedMesh(mesh.geometry, mesh.material, meshes.length * count);
|
|
47
62
|
instanceCollect[uuid] = instancedMesh;
|
|
48
|
-
|
|
63
|
+
_this.add(instancedMesh);
|
|
49
64
|
});
|
|
65
|
+
return _this;
|
|
50
66
|
}
|
|
51
|
-
setMatrixAt(index, matrix) {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
collect
|
|
67
|
+
InstancedGroupMesh.prototype.setMatrixAt = function (index, matrix) {
|
|
68
|
+
var _this = this;
|
|
69
|
+
Object.keys(this.meshCollect).forEach(function (uuid) {
|
|
70
|
+
var instancedMesh = _this.instanceCollect[uuid];
|
|
71
|
+
var collect = _this.meshCollect[uuid];
|
|
72
|
+
collect.forEach(function (mesh, i) {
|
|
56
73
|
InstancedGroupMesh.matrix.copy(mesh.matrix);
|
|
57
74
|
InstancedGroupMesh.matrix.premultiply(matrix);
|
|
58
75
|
instancedMesh.setMatrixAt(collect.length * index + i, InstancedGroupMesh.matrix);
|
|
59
76
|
instancedMesh.instanceMatrix.needsUpdate = true;
|
|
60
77
|
});
|
|
61
78
|
});
|
|
62
|
-
}
|
|
63
|
-
|
|
79
|
+
};
|
|
80
|
+
InstancedGroupMesh.matrix = new THREE.Matrix4();
|
|
81
|
+
return InstancedGroupMesh;
|
|
82
|
+
}(THREE.Mesh));
|
|
83
|
+
export default InstancedGroupMesh;
|
package/lib/KeyFrameAnimation.js
CHANGED
|
@@ -4,30 +4,45 @@
|
|
|
4
4
|
* @Last Modified by: xiaosihan
|
|
5
5
|
* @Last Modified time: 2023-02-16 19:08:55
|
|
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
|
+
})();
|
|
7
22
|
import { last } from "lodash";
|
|
8
23
|
import { BufferAttribute, Line, LineBasicMaterial, Object3D } from "three";
|
|
9
24
|
import threeUtils from "./threeUtils";
|
|
10
25
|
// 关键帧动画对象
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
26
|
+
var KeyframeAnimation = /** @class */ (function (_super) {
|
|
27
|
+
__extends(KeyframeAnimation, _super);
|
|
28
|
+
function KeyframeAnimation(props) {
|
|
29
|
+
var _this = _super.call(this) || this;
|
|
14
30
|
// 速度调整
|
|
15
|
-
|
|
31
|
+
_this.speedScale = 1;
|
|
32
|
+
//路径辅助线
|
|
33
|
+
_this.halperLine = new Line(undefined, new LineBasicMaterial({ color: "#f00" }));
|
|
34
|
+
// 关键帧数组
|
|
35
|
+
_this.keyframes = [];
|
|
36
|
+
// 速度调整
|
|
37
|
+
_this.speedScale = props.speedScale || 1;
|
|
16
38
|
// 设置关键帧对象数组
|
|
17
|
-
|
|
39
|
+
_this.setKeyframes(props.keyframes);
|
|
18
40
|
// 设置对象
|
|
19
|
-
|
|
41
|
+
_this.setObject3D(props.object3d);
|
|
42
|
+
return _this;
|
|
20
43
|
}
|
|
21
|
-
// 速度调整
|
|
22
|
-
speedScale = 1;
|
|
23
|
-
// 需要需要移动的对象
|
|
24
|
-
object3d;
|
|
25
|
-
//路径辅助线
|
|
26
|
-
halperLine = new Line(undefined, new LineBasicMaterial({ color: "#f00" }));
|
|
27
|
-
// 关键帧数组
|
|
28
|
-
keyframes = [];
|
|
29
44
|
// 设置需要移动的对象
|
|
30
|
-
setObject3D(object3d) {
|
|
45
|
+
KeyframeAnimation.prototype.setObject3D = function (object3d) {
|
|
31
46
|
this.object3d = object3d;
|
|
32
47
|
if (threeUtils.isDev) {
|
|
33
48
|
this.children = [object3d, this.halperLine];
|
|
@@ -35,44 +50,46 @@ export default class KeyframeAnimation extends Object3D {
|
|
|
35
50
|
else {
|
|
36
51
|
this.children = [object3d];
|
|
37
52
|
}
|
|
38
|
-
}
|
|
53
|
+
};
|
|
39
54
|
// 获取单个关键帧
|
|
40
|
-
getKeyframe(i) {
|
|
55
|
+
KeyframeAnimation.prototype.getKeyframe = function (i) {
|
|
41
56
|
return this.keyframes[i];
|
|
42
|
-
}
|
|
57
|
+
};
|
|
43
58
|
// 设置单个关键帧
|
|
44
|
-
setKeyframe(i, keyframe) {
|
|
59
|
+
KeyframeAnimation.prototype.setKeyframe = function (i, keyframe) {
|
|
45
60
|
this.keyframes[i] = keyframe;
|
|
46
61
|
this.setKeyframes(this.keyframes);
|
|
47
|
-
}
|
|
62
|
+
};
|
|
48
63
|
//设置全部关键帧
|
|
49
|
-
setKeyframes(keyframes) {
|
|
64
|
+
KeyframeAnimation.prototype.setKeyframes = function (keyframes) {
|
|
50
65
|
this.keyframes = keyframes;
|
|
51
|
-
|
|
52
|
-
keyframes.map(k
|
|
66
|
+
var position = [];
|
|
67
|
+
keyframes.map(function (k) {
|
|
53
68
|
position.push(k.position.x);
|
|
54
69
|
position.push(k.position.y);
|
|
55
70
|
position.push(k.position.z);
|
|
56
71
|
});
|
|
57
72
|
this.halperLine.geometry.setAttribute("position", new BufferAttribute(new Float32Array(position), 3, false));
|
|
58
|
-
}
|
|
73
|
+
};
|
|
59
74
|
// 更具关键帧的信息更新 对象的位置
|
|
60
|
-
update() {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
75
|
+
KeyframeAnimation.prototype.update = function () {
|
|
76
|
+
var _timeTemp = threeUtils._timeTemp;
|
|
77
|
+
var maxtimetemp = last(this.keyframes).timeTemp;
|
|
78
|
+
var currentTime = _timeTemp % maxtimetemp;
|
|
79
|
+
var currentKeyframeIndex = this.keyframes.findIndex(function (k) { return currentTime < k.timeTemp; });
|
|
80
|
+
var startKeyframe = this.keyframes[currentKeyframeIndex - 1];
|
|
81
|
+
var endKeyframe = this.keyframes[currentKeyframeIndex];
|
|
82
|
+
var progress = (currentTime - startKeyframe.timeTemp) / (endKeyframe.timeTemp - startKeyframe.timeTemp);
|
|
68
83
|
this.object3d.position.copy(endKeyframe.position).sub(startKeyframe.position).multiplyScalar(progress).add(startKeyframe.position);
|
|
69
84
|
this.object3d.scale.copy(endKeyframe.scale).sub(startKeyframe.scale).multiplyScalar(progress).add(startKeyframe.scale);
|
|
70
85
|
this.object3d.rotation.set((endKeyframe.rotation.x - startKeyframe.rotation.x) * progress + startKeyframe.rotation.x, (endKeyframe.rotation.y - startKeyframe.rotation.y) * progress + startKeyframe.rotation.y, (endKeyframe.rotation.z - startKeyframe.rotation.z) * progress + startKeyframe.rotation.z);
|
|
71
86
|
this.dispatchEvent({ type: "update" });
|
|
72
|
-
}
|
|
87
|
+
};
|
|
73
88
|
//更新关键帧的实例矩阵
|
|
74
|
-
updateMatrix() {
|
|
89
|
+
KeyframeAnimation.prototype.updateMatrix = function () {
|
|
75
90
|
this.update();
|
|
76
|
-
|
|
77
|
-
}
|
|
78
|
-
|
|
91
|
+
_super.prototype.updateMatrix.call(this);
|
|
92
|
+
};
|
|
93
|
+
return KeyframeAnimation;
|
|
94
|
+
}(Object3D));
|
|
95
|
+
export default KeyframeAnimation;
|
package/lib/PlaneText.js
CHANGED
|
@@ -4,27 +4,47 @@
|
|
|
4
4
|
* @Last Modified by: xiaosihan
|
|
5
5
|
* @Last Modified time: 2022-05-23 19:38:24
|
|
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
|
+
})();
|
|
7
22
|
import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three";
|
|
8
23
|
import SpriteText from "three-spritetext";
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
24
|
+
var PlaneText = /** @class */ (function (_super) {
|
|
25
|
+
__extends(PlaneText, _super);
|
|
26
|
+
function PlaneText(text) {
|
|
27
|
+
if (text === void 0) { text = "planeText"; }
|
|
28
|
+
var _this = _super.call(this, PlaneText.geometry) || this;
|
|
29
|
+
_this.type = "PlaneText";
|
|
30
|
+
_this.spriteText = new SpriteText("");
|
|
31
|
+
_this.material = new MeshBasicMaterial({ transparent: true, side: DoubleSide, map: _this.spriteText.material.map });
|
|
32
|
+
_this.set({ text: text });
|
|
33
|
+
return _this;
|
|
13
34
|
}
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
spriteText = new SpriteText("");
|
|
17
|
-
material = new MeshBasicMaterial({ transparent: true, side: DoubleSide, map: this.spriteText.material.map });
|
|
18
|
-
set(parame) {
|
|
19
|
-
for (let key in parame) {
|
|
35
|
+
PlaneText.prototype.set = function (parame) {
|
|
36
|
+
for (var key in parame) {
|
|
20
37
|
//@ts-ignore
|
|
21
38
|
this.spriteText[key] = parame[key];
|
|
22
39
|
}
|
|
23
40
|
this.scale.copy(this.spriteText.scale);
|
|
24
41
|
this.scale.max(new Vector3(1, 1, 1));
|
|
25
42
|
this.material.map = this.spriteText.material.map;
|
|
26
|
-
}
|
|
27
|
-
get(prop) {
|
|
43
|
+
};
|
|
44
|
+
PlaneText.prototype.get = function (prop) {
|
|
28
45
|
return this.spriteText[prop];
|
|
29
|
-
}
|
|
30
|
-
|
|
46
|
+
};
|
|
47
|
+
PlaneText.geometry = new PlaneGeometry(1, 1, 1, 1);
|
|
48
|
+
return PlaneText;
|
|
49
|
+
}(Mesh));
|
|
50
|
+
export default PlaneText;
|