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/FPScontrol.js
CHANGED
|
@@ -4,21 +4,6 @@
|
|
|
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
|
-
})();
|
|
22
7
|
import { Clock, EventDispatcher, Vector3 } from "three";
|
|
23
8
|
import { Capsule } from "three/examples/jsm/math/Capsule";
|
|
24
9
|
import { Octree } from "three/examples/jsm/math/Octree";
|
|
@@ -30,114 +15,34 @@ import { clamp, degToRad } from "three/src/math/MathUtils";
|
|
|
30
15
|
* @class FPScontrol
|
|
31
16
|
* @extends {EventDispatcher}
|
|
32
17
|
*/
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
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
|
-
};
|
|
18
|
+
export default class FPScontrol extends EventDispatcher {
|
|
19
|
+
canvas;
|
|
20
|
+
constructor(camera, canvas) {
|
|
21
|
+
super();
|
|
133
22
|
// 相机对象
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
return _this;
|
|
23
|
+
this.camera = camera;
|
|
24
|
+
this.camera.rotation.order = 'YXZ';
|
|
25
|
+
this.canvas = canvas;
|
|
26
|
+
this.init(canvas);
|
|
139
27
|
}
|
|
140
|
-
|
|
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) {
|
|
141
46
|
this.playerCollider.end.set(0, 1, 0);
|
|
142
47
|
document.addEventListener('keydown', this.keydown);
|
|
143
48
|
document.addEventListener('keyup', this.keyup);
|
|
@@ -145,14 +50,84 @@ var FPScontrol = /** @class */ (function (_super) {
|
|
|
145
50
|
document.addEventListener('pointerup', this.mouseup);
|
|
146
51
|
document.body.addEventListener('pointermove', this.mousemove);
|
|
147
52
|
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
|
+
}
|
|
148
72
|
};
|
|
149
73
|
// 设置 八叉树 节点
|
|
150
|
-
|
|
74
|
+
fromGraphNode(object3d) {
|
|
151
75
|
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));
|
|
152
127
|
};
|
|
153
128
|
// 玩家的碰撞检测
|
|
154
|
-
|
|
155
|
-
|
|
129
|
+
playerCollisions() {
|
|
130
|
+
const result = this.worldOctree.capsuleIntersect(this.playerCollider);
|
|
156
131
|
this.playerOnFloor = false;
|
|
157
132
|
if (result) {
|
|
158
133
|
this.playerOnFloor = result.normal.y > 0;
|
|
@@ -161,27 +136,35 @@ var FPScontrol = /** @class */ (function (_super) {
|
|
|
161
136
|
}
|
|
162
137
|
this.playerCollider.translate(result.normal.multiplyScalar(result.depth));
|
|
163
138
|
}
|
|
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
|
+
}
|
|
164
149
|
};
|
|
165
150
|
// 更新
|
|
166
|
-
|
|
151
|
+
update() {
|
|
167
152
|
if (this.enable) {
|
|
168
|
-
|
|
169
|
-
for (
|
|
153
|
+
const deltaTime = Math.min(0.05, this.clock.getDelta()) / this.STEPS_PER_FRAME;
|
|
154
|
+
for (let i = 0; i < this.STEPS_PER_FRAME; i++) {
|
|
170
155
|
this.controls(deltaTime);
|
|
171
156
|
this.updatePlayer(deltaTime);
|
|
172
157
|
this.teleportPlayerIfOob();
|
|
173
158
|
}
|
|
174
159
|
}
|
|
175
|
-
}
|
|
160
|
+
}
|
|
176
161
|
// 销毁事件
|
|
177
|
-
|
|
162
|
+
disposer() {
|
|
178
163
|
this.enable = false;
|
|
179
164
|
document.removeEventListener('keydown', this.keydown);
|
|
180
165
|
document.removeEventListener('keyup', this.keyup);
|
|
181
166
|
this.canvas.removeEventListener('pointerdown', this.mousedown);
|
|
182
167
|
document.removeEventListener('pointerup', this.mouseup);
|
|
183
168
|
document.body.removeEventListener('pointermove', this.mousemove);
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
}(EventDispatcher));
|
|
187
|
-
export default FPScontrol;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
@@ -4,43 +4,28 @@
|
|
|
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
|
-
})();
|
|
22
7
|
import * as THREE from 'three';
|
|
23
8
|
// 模型组转成 实例对象
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
9
|
+
export default class InstancedGroupMesh extends THREE.Mesh {
|
|
10
|
+
isInstancedGroupMesh = true;
|
|
11
|
+
count = 0;
|
|
12
|
+
meshCollect = {};
|
|
13
|
+
instanceCollect = {};
|
|
14
|
+
static matrix = new THREE.Matrix4();
|
|
15
|
+
constructor(group, count) {
|
|
16
|
+
super();
|
|
17
|
+
this.count = count;
|
|
18
|
+
const { meshCollect, instanceCollect } = this;
|
|
34
19
|
group.updateMatrixWorld(true);
|
|
35
20
|
// collect all mesh counts, in case there are more than one copy of the same mesh in this group
|
|
36
|
-
group.traverse(
|
|
37
|
-
|
|
21
|
+
group.traverse((obj) => {
|
|
22
|
+
const mesh = obj;
|
|
38
23
|
if (mesh.isMesh) {
|
|
39
24
|
mesh.matrixWorld.decompose(mesh.position, mesh.quaternion, mesh.scale);
|
|
40
25
|
mesh.rotation.setFromQuaternion(mesh.quaternion);
|
|
41
26
|
mesh.updateMatrix();
|
|
42
27
|
// same geometry and same material consider as the same mesh
|
|
43
|
-
|
|
28
|
+
const uuid = mesh.geometry.uuid + '/' + mesh.material.uuid;
|
|
44
29
|
if (meshCollect[uuid]) {
|
|
45
30
|
meshCollect[uuid].push(mesh);
|
|
46
31
|
}
|
|
@@ -55,29 +40,24 @@ var InstancedGroupMesh = /** @class */ (function (_super) {
|
|
|
55
40
|
}
|
|
56
41
|
});
|
|
57
42
|
// create all instances
|
|
58
|
-
Object.keys(meshCollect).forEach(
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
43
|
+
Object.keys(meshCollect).forEach(uuid => {
|
|
44
|
+
const meshes = meshCollect[uuid];
|
|
45
|
+
const mesh = meshes[0];
|
|
46
|
+
const instancedMesh = new THREE.InstancedMesh(mesh.geometry, mesh.material, meshes.length * count);
|
|
62
47
|
instanceCollect[uuid] = instancedMesh;
|
|
63
|
-
|
|
48
|
+
this.add(instancedMesh);
|
|
64
49
|
});
|
|
65
|
-
return _this;
|
|
66
50
|
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
collect.forEach(function (mesh, i) {
|
|
51
|
+
setMatrixAt(index, matrix) {
|
|
52
|
+
Object.keys(this.meshCollect).forEach(uuid => {
|
|
53
|
+
const instancedMesh = this.instanceCollect[uuid];
|
|
54
|
+
const collect = this.meshCollect[uuid];
|
|
55
|
+
collect.forEach((mesh, i) => {
|
|
73
56
|
InstancedGroupMesh.matrix.copy(mesh.matrix);
|
|
74
57
|
InstancedGroupMesh.matrix.premultiply(matrix);
|
|
75
58
|
instancedMesh.setMatrixAt(collect.length * index + i, InstancedGroupMesh.matrix);
|
|
76
59
|
instancedMesh.instanceMatrix.needsUpdate = true;
|
|
77
60
|
});
|
|
78
61
|
});
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
return InstancedGroupMesh;
|
|
82
|
-
}(THREE.Mesh));
|
|
83
|
-
export default InstancedGroupMesh;
|
|
62
|
+
}
|
|
63
|
+
}
|
package/lib/KeyFrameAnimation.js
CHANGED
|
@@ -4,45 +4,30 @@
|
|
|
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
|
-
})();
|
|
22
7
|
import { last } from "lodash";
|
|
23
8
|
import { BufferAttribute, Line, LineBasicMaterial, Object3D } from "three";
|
|
24
9
|
import threeUtils from "./threeUtils";
|
|
25
10
|
// 关键帧动画对象
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
var _this = _super.call(this) || this;
|
|
11
|
+
export default class KeyframeAnimation extends Object3D {
|
|
12
|
+
constructor(props) {
|
|
13
|
+
super();
|
|
30
14
|
// 速度调整
|
|
31
|
-
|
|
32
|
-
//路径辅助线
|
|
33
|
-
_this.halperLine = new Line(undefined, new LineBasicMaterial({ color: "#f00" }));
|
|
34
|
-
// 关键帧数组
|
|
35
|
-
_this.keyframes = [];
|
|
36
|
-
// 速度调整
|
|
37
|
-
_this.speedScale = props.speedScale || 1;
|
|
15
|
+
this.speedScale = props.speedScale || 1;
|
|
38
16
|
// 设置关键帧对象数组
|
|
39
|
-
|
|
17
|
+
this.setKeyframes(props.keyframes);
|
|
40
18
|
// 设置对象
|
|
41
|
-
|
|
42
|
-
return _this;
|
|
19
|
+
this.setObject3D(props.object3d);
|
|
43
20
|
}
|
|
21
|
+
// 速度调整
|
|
22
|
+
speedScale = 1;
|
|
23
|
+
// 需要需要移动的对象
|
|
24
|
+
object3d;
|
|
25
|
+
//路径辅助线
|
|
26
|
+
halperLine = new Line(undefined, new LineBasicMaterial({ color: "#f00" }));
|
|
27
|
+
// 关键帧数组
|
|
28
|
+
keyframes = [];
|
|
44
29
|
// 设置需要移动的对象
|
|
45
|
-
|
|
30
|
+
setObject3D(object3d) {
|
|
46
31
|
this.object3d = object3d;
|
|
47
32
|
if (threeUtils.isDev) {
|
|
48
33
|
this.children = [object3d, this.halperLine];
|
|
@@ -50,46 +35,44 @@ var KeyframeAnimation = /** @class */ (function (_super) {
|
|
|
50
35
|
else {
|
|
51
36
|
this.children = [object3d];
|
|
52
37
|
}
|
|
53
|
-
}
|
|
38
|
+
}
|
|
54
39
|
// 获取单个关键帧
|
|
55
|
-
|
|
40
|
+
getKeyframe(i) {
|
|
56
41
|
return this.keyframes[i];
|
|
57
|
-
}
|
|
42
|
+
}
|
|
58
43
|
// 设置单个关键帧
|
|
59
|
-
|
|
44
|
+
setKeyframe(i, keyframe) {
|
|
60
45
|
this.keyframes[i] = keyframe;
|
|
61
46
|
this.setKeyframes(this.keyframes);
|
|
62
|
-
}
|
|
47
|
+
}
|
|
63
48
|
//设置全部关键帧
|
|
64
|
-
|
|
49
|
+
setKeyframes(keyframes) {
|
|
65
50
|
this.keyframes = keyframes;
|
|
66
|
-
|
|
67
|
-
keyframes.map(
|
|
51
|
+
const position = [];
|
|
52
|
+
keyframes.map(k => {
|
|
68
53
|
position.push(k.position.x);
|
|
69
54
|
position.push(k.position.y);
|
|
70
55
|
position.push(k.position.z);
|
|
71
56
|
});
|
|
72
57
|
this.halperLine.geometry.setAttribute("position", new BufferAttribute(new Float32Array(position), 3, false));
|
|
73
|
-
}
|
|
58
|
+
}
|
|
74
59
|
// 更具关键帧的信息更新 对象的位置
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
60
|
+
update() {
|
|
61
|
+
const { _timeTemp } = threeUtils;
|
|
62
|
+
const maxtimetemp = last(this.keyframes).timeTemp;
|
|
63
|
+
const currentTime = _timeTemp % maxtimetemp;
|
|
64
|
+
const currentKeyframeIndex = this.keyframes.findIndex(k => currentTime < k.timeTemp);
|
|
65
|
+
const startKeyframe = this.keyframes[currentKeyframeIndex - 1];
|
|
66
|
+
const endKeyframe = this.keyframes[currentKeyframeIndex];
|
|
67
|
+
const progress = (currentTime - startKeyframe.timeTemp) / (endKeyframe.timeTemp - startKeyframe.timeTemp);
|
|
83
68
|
this.object3d.position.copy(endKeyframe.position).sub(startKeyframe.position).multiplyScalar(progress).add(startKeyframe.position);
|
|
84
69
|
this.object3d.scale.copy(endKeyframe.scale).sub(startKeyframe.scale).multiplyScalar(progress).add(startKeyframe.scale);
|
|
85
70
|
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);
|
|
86
71
|
this.dispatchEvent({ type: "update" });
|
|
87
|
-
}
|
|
72
|
+
}
|
|
88
73
|
//更新关键帧的实例矩阵
|
|
89
|
-
|
|
74
|
+
updateMatrix() {
|
|
90
75
|
this.update();
|
|
91
|
-
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
}(Object3D));
|
|
95
|
-
export default KeyframeAnimation;
|
|
76
|
+
super.updateMatrix();
|
|
77
|
+
}
|
|
78
|
+
}
|
package/lib/PlaneText.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three";
|
|
2
|
-
import SpriteText from "
|
|
2
|
+
import SpriteText from "./SpriteText";
|
|
3
3
|
type Props = {
|
|
4
4
|
text?: string;
|
|
5
5
|
textHeight?: number;
|
|
@@ -32,6 +32,6 @@ export default class PlaneText extends Mesh {
|
|
|
32
32
|
materials: any;
|
|
33
33
|
textures: any;
|
|
34
34
|
images: any;
|
|
35
|
-
}) => any) | ((event: import("three").Event) => void) | import("three").Vector2 | import("three").SpriteMaterial | ((raycaster: import("three").Raycaster, intersects: import("three").Intersection<import("three").Object3D<import("three").Event>>[]) => void) | ((quaternion: import("three").Quaternion) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((axis: Vector3, distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((...object: import("three").Object3D<import("three").Event>[]) => SpriteText) | ((...object: import("three").Object3D<import("three").Event>[]) => SpriteText) | (() => SpriteText) | (() => SpriteText) | ((object: import("three").Object3D<import("three").Event>) => SpriteText) | ((recursive?: boolean) => SpriteText) | ((source: SpriteText) => SpriteText) | (<T extends string>(type: T, listener: import("three").EventListener<import("three").Event, T, SpriteText>) => void) | (<T_1 extends string>(type: T_1, listener: import("three").EventListener<import("three").Event, T_1, SpriteText>) => boolean) | (<T_2 extends string>(type: T_2, listener: import("three").EventListener<import("three").Event, T_2, SpriteText>) => void);
|
|
35
|
+
}) => any) | ((event: import("three").Event) => void) | import("three").Vector2 | HTMLCanvasElement | import("three").SpriteMaterial | ((raycaster: import("three").Raycaster, intersects: import("three").Intersection<import("three").Object3D<import("three").Event>>[]) => void) | ((quaternion: import("three").Quaternion) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((axis: Vector3, distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((...object: import("three").Object3D<import("three").Event>[]) => SpriteText) | ((...object: import("three").Object3D<import("three").Event>[]) => SpriteText) | (() => SpriteText) | (() => SpriteText) | ((object: import("three").Object3D<import("three").Event>) => SpriteText) | ((recursive?: boolean) => SpriteText) | ((source: SpriteText) => SpriteText) | (<T extends string>(type: T, listener: import("three").EventListener<import("three").Event, T, SpriteText>) => void) | (<T_1 extends string>(type: T_1, listener: import("three").EventListener<import("three").Event, T_1, SpriteText>) => boolean) | (<T_2 extends string>(type: T_2, listener: import("three").EventListener<import("three").Event, T_2, SpriteText>) => void) | (() => void);
|
|
36
36
|
}
|
|
37
37
|
export {};
|
package/lib/PlaneText.js
CHANGED
|
@@ -2,49 +2,29 @@
|
|
|
2
2
|
* @Author: xiaosihan
|
|
3
3
|
* @Date: 2022-05-23 13:53:06
|
|
4
4
|
* @Last Modified by: xiaosihan
|
|
5
|
-
* @Last Modified time:
|
|
5
|
+
* @Last Modified time: 2023-05-03 02:54:52
|
|
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
7
|
import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three";
|
|
23
|
-
import SpriteText from "
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
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;
|
|
8
|
+
import SpriteText from "./SpriteText";
|
|
9
|
+
export default class PlaneText extends Mesh {
|
|
10
|
+
constructor(text = "planeText") {
|
|
11
|
+
super(PlaneText.geometry);
|
|
12
|
+
this.set({ text });
|
|
34
13
|
}
|
|
35
|
-
|
|
36
|
-
|
|
14
|
+
type = "PlaneText";
|
|
15
|
+
static geometry = new PlaneGeometry(1, 1, 1, 1);
|
|
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) {
|
|
37
20
|
//@ts-ignore
|
|
38
21
|
this.spriteText[key] = parame[key];
|
|
39
22
|
}
|
|
40
23
|
this.scale.copy(this.spriteText.scale);
|
|
41
24
|
this.scale.max(new Vector3(1, 1, 1));
|
|
42
25
|
this.material.map = this.spriteText.material.map;
|
|
43
|
-
}
|
|
44
|
-
|
|
26
|
+
}
|
|
27
|
+
get(prop) {
|
|
45
28
|
return this.spriteText[prop];
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
return PlaneText;
|
|
49
|
-
}(Mesh));
|
|
50
|
-
export default PlaneText;
|
|
29
|
+
}
|
|
30
|
+
}
|
package/lib/PlaneText.ts
CHANGED
|
@@ -2,12 +2,11 @@
|
|
|
2
2
|
* @Author: xiaosihan
|
|
3
3
|
* @Date: 2022-05-23 13:53:06
|
|
4
4
|
* @Last Modified by: xiaosihan
|
|
5
|
-
* @Last Modified time:
|
|
5
|
+
* @Last Modified time: 2023-05-03 02:54:52
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three";
|
|
9
|
-
import SpriteText from "
|
|
10
|
-
|
|
9
|
+
import SpriteText from "./SpriteText";
|
|
11
10
|
|
|
12
11
|
|
|
13
12
|
type Props = {
|