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/ThreeBase.js
CHANGED
|
@@ -4,6 +4,66 @@
|
|
|
4
4
|
* @Last Modified by: xiaosihan
|
|
5
5
|
* @Last Modified time: 2023-03-16 14:31:32
|
|
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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
23
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
24
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
25
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
26
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
27
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
28
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
29
|
+
});
|
|
30
|
+
};
|
|
31
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
32
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
33
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
34
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
35
|
+
function step(op) {
|
|
36
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
37
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
38
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
39
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
40
|
+
switch (op[0]) {
|
|
41
|
+
case 0: case 1: t = op; break;
|
|
42
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
43
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
44
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
45
|
+
default:
|
|
46
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
47
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
48
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
49
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
50
|
+
if (t[2]) _.ops.pop();
|
|
51
|
+
_.trys.pop(); continue;
|
|
52
|
+
}
|
|
53
|
+
op = body.call(thisArg, _);
|
|
54
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
55
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
59
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
60
|
+
if (ar || !(i in from)) {
|
|
61
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
62
|
+
ar[i] = from[i];
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
66
|
+
};
|
|
7
67
|
import { round } from "lodash";
|
|
8
68
|
import { AxesHelper, EventDispatcher, GridHelper, LinearFilter, Mesh, MOUSE, NoBlending, NormalBlending, PerspectiveCamera, RGBAFormat, Scene, TOUCH, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
|
|
9
69
|
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
|
|
@@ -14,79 +74,128 @@ import ThreeMouse from "./ThreeMouse";
|
|
|
14
74
|
import threeUtils from "./threeUtils";
|
|
15
75
|
import Transition from "./Transition";
|
|
16
76
|
// three.js 的基础对象
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
77
|
+
var ThreeBase = /** @class */ (function (_super) {
|
|
78
|
+
__extends(ThreeBase, _super);
|
|
79
|
+
function ThreeBase() {
|
|
80
|
+
var _this = _super.call(this) || this;
|
|
81
|
+
// 公用渲染目标1
|
|
82
|
+
_this.renderTarget = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
|
|
83
|
+
// 渲染目标2
|
|
84
|
+
_this.renderTarget2 = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
|
|
85
|
+
// 公用二维向量
|
|
86
|
+
_this.tempVector2 = new Vector2();
|
|
87
|
+
// 公用的三维向量
|
|
88
|
+
_this.tempVector3 = new Vector3();
|
|
89
|
+
//渲染器的尺寸
|
|
90
|
+
_this.size = new Vector2(0, 0);
|
|
91
|
+
// 渲染器对象
|
|
92
|
+
_this.renderer = (function () {
|
|
93
|
+
var renderer = new WebGLRenderer({
|
|
94
|
+
alpha: true,
|
|
95
|
+
antialias: true,
|
|
96
|
+
precision: "highp",
|
|
97
|
+
logarithmicDepthBuffer: true,
|
|
98
|
+
preserveDrawingBuffer: false,
|
|
99
|
+
stencil: false, // 模版
|
|
100
|
+
});
|
|
101
|
+
renderer.domElement.id = generateUUID();
|
|
102
|
+
renderer.localClippingEnabled = true;
|
|
103
|
+
renderer.setPixelRatio(window.devicePixelRatio);
|
|
104
|
+
renderer.autoClear = false;
|
|
105
|
+
threeLoader.setAnisotropy(renderer.capabilities.getMaxAnisotropy());
|
|
106
|
+
return renderer;
|
|
107
|
+
})();
|
|
108
|
+
//透视相机
|
|
109
|
+
_this.camera = new PerspectiveCamera(45, 1, 0.0001, 10000);
|
|
110
|
+
// 场景对象
|
|
111
|
+
_this.scene = new Scene();
|
|
112
|
+
///鼠标事件对象
|
|
113
|
+
_this.threeMouse = new ThreeMouse(_this.renderer, _this.camera, _this.scene);
|
|
114
|
+
// 轨道控制器
|
|
115
|
+
_this.controls = (function () {
|
|
116
|
+
var controls = new OrbitControls(_this.camera, _this.renderer.domElement);
|
|
117
|
+
controls.addEventListener("change", function () {
|
|
118
|
+
_this.needRender = true;
|
|
119
|
+
});
|
|
120
|
+
controls.rotateSpeed = 0.2;
|
|
121
|
+
controls.maxPolarAngle = Math.PI;
|
|
122
|
+
controls.enableDamping = true;
|
|
123
|
+
controls.dampingFactor = 0.1;
|
|
124
|
+
controls.screenSpacePanning = true;
|
|
125
|
+
return controls;
|
|
126
|
+
})();
|
|
127
|
+
// 上下文是否被销毁了
|
|
128
|
+
_this.isRendererContextLost = false;
|
|
129
|
+
// 控制器的位置缓动的计算的顶点对象
|
|
130
|
+
_this.controlsPosition = (function () {
|
|
131
|
+
var controlsPosition = new Transition({ x: 100, y: 100, z: 100 });
|
|
132
|
+
controlsPosition.setDuration(1000);
|
|
133
|
+
controlsPosition.onChange(function (_a) {
|
|
134
|
+
var x = _a.x, y = _a.y, z = _a.z;
|
|
135
|
+
_this.camera.position.set(x, y, z);
|
|
136
|
+
_this.camera.lookAt(_this.controls.target);
|
|
137
|
+
_this.needRender = true;
|
|
138
|
+
});
|
|
139
|
+
return controlsPosition;
|
|
140
|
+
})();
|
|
141
|
+
// 控制器的 朝向带缓动的计算的顶点对象
|
|
142
|
+
_this.controlsCenter = (function () {
|
|
143
|
+
var controlsCenter = new Transition({ x: 0, y: 0, z: 0 });
|
|
144
|
+
controlsCenter.setDuration(1000);
|
|
145
|
+
controlsCenter.onChange(function (_a) {
|
|
146
|
+
var x = _a.x, y = _a.y, z = _a.z;
|
|
147
|
+
_this.controls.target.set(x, y, z);
|
|
148
|
+
_this.camera.lookAt(_this.controls.target);
|
|
149
|
+
_this.needRender = true;
|
|
150
|
+
});
|
|
151
|
+
return controlsCenter;
|
|
152
|
+
})();
|
|
153
|
+
// 控制器类型
|
|
154
|
+
_this.controlType = "OrbitControls";
|
|
155
|
+
// 记录一下空间平移方式 在切换控制器的时候保留一下平移方式
|
|
156
|
+
_this.originScreenSpacePanning = false;
|
|
157
|
+
// 是否自动渲染
|
|
158
|
+
_this.autoRender = true;
|
|
159
|
+
//是否需要渲染, 当autoRender=false的时候就需要 手动触发渲染
|
|
160
|
+
_this.needRender = false;
|
|
161
|
+
_this.renderBindThis = _this.render.bind(_this);
|
|
162
|
+
_this._preMesh = new Mesh();
|
|
163
|
+
_this._preRT = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
|
|
164
|
+
_this.init();
|
|
165
|
+
return _this;
|
|
21
166
|
}
|
|
22
|
-
// 公用渲染目标1
|
|
23
|
-
renderTarget = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
|
|
24
|
-
// 渲染目标2
|
|
25
|
-
renderTarget2 = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
|
|
26
|
-
// 公用二维向量
|
|
27
|
-
tempVector2 = new Vector2();
|
|
28
|
-
// 公用的三维向量
|
|
29
|
-
tempVector3 = new Vector3();
|
|
30
|
-
//渲染器的尺寸
|
|
31
|
-
size = new Vector2(0, 0);
|
|
32
|
-
// 渲染器对象
|
|
33
|
-
renderer = (() => {
|
|
34
|
-
const renderer = new WebGLRenderer({
|
|
35
|
-
alpha: true,
|
|
36
|
-
antialias: true,
|
|
37
|
-
precision: "highp",
|
|
38
|
-
logarithmicDepthBuffer: true,
|
|
39
|
-
preserveDrawingBuffer: false,
|
|
40
|
-
stencil: false, // 模版
|
|
41
|
-
});
|
|
42
|
-
renderer.domElement.id = generateUUID();
|
|
43
|
-
renderer.localClippingEnabled = true;
|
|
44
|
-
renderer.setPixelRatio(window.devicePixelRatio);
|
|
45
|
-
renderer.autoClear = false;
|
|
46
|
-
threeLoader.setAnisotropy(renderer.capabilities.getMaxAnisotropy());
|
|
47
|
-
return renderer;
|
|
48
|
-
})();
|
|
49
|
-
//透视相机
|
|
50
|
-
camera = new PerspectiveCamera(45, 1, 0.0001, 10000);
|
|
51
|
-
// 场景对象
|
|
52
|
-
scene = new Scene();
|
|
53
|
-
///鼠标事件对象
|
|
54
|
-
threeMouse = new ThreeMouse(this.renderer, this.camera, this.scene);
|
|
55
|
-
// 轨道控制器
|
|
56
|
-
controls = (() => {
|
|
57
|
-
const controls = new OrbitControls(this.camera, this.renderer.domElement);
|
|
58
|
-
controls.addEventListener("change", () => {
|
|
59
|
-
this.needRender = true;
|
|
60
|
-
});
|
|
61
|
-
controls.rotateSpeed = 0.2;
|
|
62
|
-
controls.maxPolarAngle = Math.PI;
|
|
63
|
-
controls.enableDamping = true;
|
|
64
|
-
controls.dampingFactor = 0.1;
|
|
65
|
-
controls.screenSpacePanning = true;
|
|
66
|
-
return controls;
|
|
67
|
-
})();
|
|
68
|
-
// 上下文是否被销毁了
|
|
69
|
-
isRendererContextLost = false;
|
|
70
167
|
// 设置 dom 容器
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
168
|
+
ThreeBase.prototype.setContainer = function (div) {
|
|
169
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
170
|
+
return __generator(this, function (_a) {
|
|
171
|
+
switch (_a.label) {
|
|
172
|
+
case 0:
|
|
173
|
+
if (!div) return [3 /*break*/, 4];
|
|
174
|
+
div.innerHTML = "";
|
|
175
|
+
div.append(this.renderer.domElement);
|
|
176
|
+
if (!this.isRendererContextLost) return [3 /*break*/, 3];
|
|
177
|
+
this.renderer.forceContextRestore();
|
|
178
|
+
return [4 /*yield*/, new Promise(function (resolve) { return requestAnimationFrame(resolve); })];
|
|
179
|
+
case 1:
|
|
180
|
+
_a.sent();
|
|
181
|
+
return [4 /*yield*/, new Promise(function (resolve) { return requestAnimationFrame(resolve); })];
|
|
182
|
+
case 2:
|
|
183
|
+
_a.sent();
|
|
184
|
+
this.renderer.domElement.style.opacity = "1";
|
|
185
|
+
_a.label = 3;
|
|
186
|
+
case 3:
|
|
187
|
+
this.setsize(div.clientWidth, div.clientHeight);
|
|
188
|
+
// 开启时时渲染
|
|
189
|
+
threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
|
|
190
|
+
threeUtils.addEventListener("requestAnimationFrame", this.renderBindThis);
|
|
191
|
+
_a.label = 4;
|
|
192
|
+
case 4: return [2 /*return*/];
|
|
193
|
+
}
|
|
194
|
+
});
|
|
195
|
+
});
|
|
196
|
+
};
|
|
88
197
|
// 修改尺寸
|
|
89
|
-
setsize(width, height) {
|
|
198
|
+
ThreeBase.prototype.setsize = function (width, height) {
|
|
90
199
|
if (this.camera instanceof PerspectiveCamera) {
|
|
91
200
|
this.camera.aspect = width / height;
|
|
92
201
|
this.camera.updateProjectionMatrix();
|
|
@@ -97,45 +206,25 @@ export default class ThreeBase extends EventDispatcher {
|
|
|
97
206
|
// 渲染场景
|
|
98
207
|
this.renderer.clear();
|
|
99
208
|
this.renderer.render(this.scene, this.camera);
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
const controlsPosition = new Transition({ x: 100, y: 100, z: 100 });
|
|
104
|
-
controlsPosition.setDuration(1000);
|
|
105
|
-
controlsPosition.onChange(({ x, y, z }) => {
|
|
106
|
-
this.camera.position.set(x, y, z);
|
|
107
|
-
this.camera.lookAt(this.controls.target);
|
|
108
|
-
this.needRender = true;
|
|
109
|
-
});
|
|
110
|
-
return controlsPosition;
|
|
111
|
-
})();
|
|
112
|
-
// 控制器的 朝向带缓动的计算的顶点对象
|
|
113
|
-
controlsCenter = (() => {
|
|
114
|
-
const controlsCenter = new Transition({ x: 0, y: 0, z: 0 });
|
|
115
|
-
controlsCenter.setDuration(1000);
|
|
116
|
-
controlsCenter.onChange(({ x, y, z }) => {
|
|
117
|
-
this.controls.target.set(x, y, z);
|
|
118
|
-
this.camera.lookAt(this.controls.target);
|
|
119
|
-
this.needRender = true;
|
|
120
|
-
});
|
|
121
|
-
return controlsCenter;
|
|
122
|
-
})();
|
|
123
|
-
init() {
|
|
209
|
+
};
|
|
210
|
+
ThreeBase.prototype.init = function () {
|
|
211
|
+
var _this = this;
|
|
124
212
|
// 非开发模式添加网格辅助线
|
|
125
213
|
if (threeUtils.isDev) {
|
|
126
|
-
|
|
214
|
+
var gridHelper = new GridHelper(1000, 100, 0x303030, 0x303030);
|
|
127
215
|
gridHelper.position.set(0, -0.001, 0);
|
|
128
216
|
this.scene.add(gridHelper);
|
|
129
|
-
|
|
217
|
+
var axesHelper = new AxesHelper(10000);
|
|
130
218
|
this.scene.add(axesHelper);
|
|
131
219
|
}
|
|
132
220
|
// 资源加载进度有更新时, 需要渲染
|
|
133
|
-
threeLoader.addEventListener("progress", ()
|
|
134
|
-
|
|
221
|
+
threeLoader.addEventListener("progress", function () {
|
|
222
|
+
_this.needRender = true;
|
|
135
223
|
});
|
|
136
|
-
}
|
|
224
|
+
};
|
|
137
225
|
// 重置控制器的位置
|
|
138
|
-
resetLookAt
|
|
226
|
+
ThreeBase.prototype.resetLookAt = function (_a) {
|
|
227
|
+
var position = _a.position, center = _a.center;
|
|
139
228
|
// 停止控制器的惯性
|
|
140
229
|
this.controls.enableDamping = false;
|
|
141
230
|
this.controls.saveState();
|
|
@@ -145,57 +234,85 @@ export default class ThreeBase extends EventDispatcher {
|
|
|
145
234
|
position && this.controlsPosition.reset({ x: position.x, y: position.y, z: position.z });
|
|
146
235
|
center && this.controlsCenter.reset({ x: center.x, y: center.y, z: center.z });
|
|
147
236
|
this.needRender = true;
|
|
148
|
-
}
|
|
237
|
+
};
|
|
149
238
|
// 设置控制器的位置 以动画的方式移动控制器
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
this
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
239
|
+
ThreeBase.prototype.setLookAt = function (_a) {
|
|
240
|
+
var position = _a.position, center = _a.center, _b = _a.duration, duration = _b === void 0 ? 1000 : _b;
|
|
241
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
242
|
+
var currentPosition, currentCenter;
|
|
243
|
+
var _this = this;
|
|
244
|
+
return __generator(this, function (_c) {
|
|
245
|
+
switch (_c.label) {
|
|
246
|
+
case 0:
|
|
247
|
+
// 停止控制器的惯性
|
|
248
|
+
this.controls.enableDamping = false;
|
|
249
|
+
this.controls.saveState();
|
|
250
|
+
this.controls.update();
|
|
251
|
+
this.controls.reset();
|
|
252
|
+
this.controls.enableDamping = true;
|
|
253
|
+
currentPosition = this.camera.position.clone();
|
|
254
|
+
currentCenter = this.controls.target.clone();
|
|
255
|
+
// 等待动画执行完成
|
|
256
|
+
return [4 /*yield*/, Promise.all([
|
|
257
|
+
new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
|
|
258
|
+
return __generator(this, function (_a) {
|
|
259
|
+
switch (_a.label) {
|
|
260
|
+
case 0:
|
|
261
|
+
if (!position) return [3 /*break*/, 2];
|
|
262
|
+
this.controlsPosition.setDuration(duration).reset({ x: currentPosition.x, y: currentPosition.y, z: currentPosition.z });
|
|
263
|
+
return [4 /*yield*/, this.controlsPosition.set({ x: position.x, y: position.y, z: position.z })];
|
|
264
|
+
case 1:
|
|
265
|
+
_a.sent();
|
|
266
|
+
_a.label = 2;
|
|
267
|
+
case 2:
|
|
268
|
+
resolve();
|
|
269
|
+
return [2 /*return*/];
|
|
270
|
+
}
|
|
271
|
+
});
|
|
272
|
+
}); }),
|
|
273
|
+
new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
|
|
274
|
+
return __generator(this, function (_a) {
|
|
275
|
+
switch (_a.label) {
|
|
276
|
+
case 0:
|
|
277
|
+
if (!center) return [3 /*break*/, 2];
|
|
278
|
+
this.controlsCenter.setDuration(duration).reset({ x: currentCenter.x, y: currentCenter.y, z: currentCenter.z });
|
|
279
|
+
return [4 /*yield*/, this.controlsCenter.set({ x: center.x, y: center.y, z: center.z })];
|
|
280
|
+
case 1:
|
|
281
|
+
_a.sent();
|
|
282
|
+
_a.label = 2;
|
|
283
|
+
case 2:
|
|
284
|
+
resolve();
|
|
285
|
+
return [2 /*return*/];
|
|
286
|
+
}
|
|
287
|
+
});
|
|
288
|
+
}); }),
|
|
289
|
+
])];
|
|
290
|
+
case 1:
|
|
291
|
+
// 等待动画执行完成
|
|
292
|
+
_c.sent();
|
|
293
|
+
return [2 /*return*/];
|
|
165
294
|
}
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
if (center) {
|
|
170
|
-
this.controlsCenter.setDuration(duration).reset({ x: currentCenter.x, y: currentCenter.y, z: currentCenter.z });
|
|
171
|
-
await this.controlsCenter.set({ x: center.x, y: center.y, z: center.z });
|
|
172
|
-
}
|
|
173
|
-
resolve();
|
|
174
|
-
}),
|
|
175
|
-
]);
|
|
176
|
-
}
|
|
295
|
+
});
|
|
296
|
+
});
|
|
297
|
+
};
|
|
177
298
|
// 获取控制的位置和朝向 保留3位小数
|
|
178
|
-
getLookAt() {
|
|
179
|
-
|
|
180
|
-
|
|
299
|
+
ThreeBase.prototype.getLookAt = function () {
|
|
300
|
+
var position = this.camera.position.toArray().map(function (v) { return round(v, 3); });
|
|
301
|
+
var center = this.controls.target.toArray().map(function (v) { return round(v, 3); });
|
|
181
302
|
return {
|
|
182
|
-
center: new Vector3(
|
|
183
|
-
position: new Vector3(
|
|
184
|
-
centerPosition:
|
|
303
|
+
center: new (Vector3.bind.apply(Vector3, __spreadArray([void 0], center, false)))(),
|
|
304
|
+
position: new (Vector3.bind.apply(Vector3, __spreadArray([void 0], position, false)))(),
|
|
305
|
+
centerPosition: "center: new Vector3(".concat(center.join(","), "),position: new Vector3(").concat(position.join(","), ")")
|
|
185
306
|
};
|
|
186
|
-
}
|
|
307
|
+
};
|
|
187
308
|
// 三维向量转化成屏幕上的2维向量
|
|
188
|
-
v3tov2(v3) {
|
|
309
|
+
ThreeBase.prototype.v3tov2 = function (v3) {
|
|
189
310
|
v3.project(this.camera);
|
|
190
|
-
|
|
311
|
+
var v2 = new Vector2((v3.x + 1) * this.size.x * 0.5, (-v3.y + 1) * this.size.y * 0.5);
|
|
191
312
|
return v2;
|
|
192
|
-
}
|
|
193
|
-
// 控制器类型
|
|
194
|
-
controlType = "OrbitControls";
|
|
195
|
-
// 记录一下空间平移方式 在切换控制器的时候保留一下平移方式
|
|
196
|
-
originScreenSpacePanning = false;
|
|
313
|
+
};
|
|
197
314
|
//改变控制器的类型
|
|
198
|
-
setControlType(controlType) {
|
|
315
|
+
ThreeBase.prototype.setControlType = function (controlType) {
|
|
199
316
|
if (controlType === "OrbitControls") {
|
|
200
317
|
this.controls.screenSpacePanning = this.originScreenSpacePanning;
|
|
201
318
|
this.controls.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
|
|
@@ -210,22 +327,18 @@ export default class ThreeBase extends EventDispatcher {
|
|
|
210
327
|
this.controls.touches.ONE = TOUCH.PAN;
|
|
211
328
|
this.controls.touches.TWO = TOUCH.DOLLY_ROTATE;
|
|
212
329
|
}
|
|
213
|
-
}
|
|
214
|
-
// 是否自动渲染
|
|
215
|
-
autoRender = true;
|
|
216
|
-
//是否需要渲染, 当autoRender=false的时候就需要 手动触发渲染
|
|
217
|
-
needRender = false;
|
|
330
|
+
};
|
|
218
331
|
// 停止渲染
|
|
219
|
-
stopRender() {
|
|
332
|
+
ThreeBase.prototype.stopRender = function () {
|
|
220
333
|
threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
|
|
221
334
|
this.renderer.forceContextLoss();
|
|
222
335
|
// 标记上下文被销毁了
|
|
223
336
|
this.isRendererContextLost = true;
|
|
224
337
|
this.setsize(100, 100);
|
|
225
338
|
this.renderer.domElement.style.opacity = "0";
|
|
226
|
-
}
|
|
339
|
+
};
|
|
227
340
|
// 渲染场景
|
|
228
|
-
render() {
|
|
341
|
+
ThreeBase.prototype.render = function () {
|
|
229
342
|
// 控制器在移动时鼠标不能操作
|
|
230
343
|
this.controls.enabled = (this.controlsPosition.isDone() || this.controlsCenter.isDone());
|
|
231
344
|
// canvas 没有在页面上面的话 就跳过渲染
|
|
@@ -234,7 +347,7 @@ export default class ThreeBase extends EventDispatcher {
|
|
|
234
347
|
return;
|
|
235
348
|
}
|
|
236
349
|
//判断尺寸发生改变时重置尺寸
|
|
237
|
-
|
|
350
|
+
var parentNode = this.renderer.domElement.parentNode;
|
|
238
351
|
if (parentNode.clientWidth !== this.size.x || parentNode.clientHeight !== this.size.y) {
|
|
239
352
|
this.setsize(parentNode.clientWidth, parentNode.clientHeight);
|
|
240
353
|
}
|
|
@@ -253,58 +366,79 @@ export default class ThreeBase extends EventDispatcher {
|
|
|
253
366
|
this.dispatchEvent({ type: "beforeRender" });
|
|
254
367
|
this.renderer.render(this.scene, this.camera);
|
|
255
368
|
this.dispatchEvent({ type: "afterRender" });
|
|
256
|
-
}
|
|
257
|
-
renderBindThis = this.render.bind(this);
|
|
369
|
+
};
|
|
258
370
|
// 下载渲染图
|
|
259
|
-
download
|
|
371
|
+
ThreeBase.prototype.download = function (fileName) {
|
|
372
|
+
if (fileName === void 0) { fileName = "download"; }
|
|
260
373
|
this.render();
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
saveLink.download =
|
|
374
|
+
var base64 = this.renderer.domElement.toDataURL('image/png');
|
|
375
|
+
var saveLink = document.createElement("a");
|
|
376
|
+
saveLink.download = "".concat(fileName, ".png");
|
|
264
377
|
saveLink.href = base64;
|
|
265
378
|
document.body.append(saveLink);
|
|
266
379
|
saveLink.click();
|
|
267
|
-
}
|
|
268
|
-
_preMesh = new Mesh();
|
|
269
|
-
_preRT = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
|
|
380
|
+
};
|
|
270
381
|
//预加载纹理图片
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
382
|
+
ThreeBase.prototype.preloadTexture = function (src) {
|
|
383
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
384
|
+
var texture;
|
|
385
|
+
var _this = this;
|
|
386
|
+
return __generator(this, function (_a) {
|
|
387
|
+
switch (_a.label) {
|
|
388
|
+
case 0:
|
|
389
|
+
texture = threeLoader.getTexture(src);
|
|
390
|
+
_a.label = 1;
|
|
391
|
+
case 1:
|
|
392
|
+
if (!(texture && !texture.image || !texture.image.complete)) return [3 /*break*/, 3];
|
|
393
|
+
return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 50); })];
|
|
394
|
+
case 2:
|
|
395
|
+
_a.sent();
|
|
396
|
+
return [3 /*break*/, 1];
|
|
397
|
+
case 3:
|
|
398
|
+
// 添加到计划任务中去
|
|
399
|
+
threeUtils.addWork(function () {
|
|
400
|
+
var originRenderTarget = _this.renderer.getRenderTarget();
|
|
401
|
+
_this.renderer.setRenderTarget(_this._preRT);
|
|
402
|
+
_this._preMesh.material.map = texture;
|
|
403
|
+
_this.renderer.render(_this._preMesh, _this.camera);
|
|
404
|
+
_this.renderer.setRenderTarget(originRenderTarget);
|
|
405
|
+
});
|
|
406
|
+
return [2 /*return*/];
|
|
407
|
+
}
|
|
408
|
+
});
|
|
283
409
|
});
|
|
284
|
-
}
|
|
410
|
+
};
|
|
285
411
|
//预加载网格
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
412
|
+
ThreeBase.prototype.preloadGeometry = function (geometry) {
|
|
413
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
414
|
+
var _this = this;
|
|
415
|
+
return __generator(this, function (_a) {
|
|
416
|
+
// 添加到计划任务中去
|
|
417
|
+
threeUtils.addWork(function () {
|
|
418
|
+
var originRenderTarget = _this.renderer.getRenderTarget();
|
|
419
|
+
_this.renderer.setRenderTarget(_this._preRT);
|
|
420
|
+
_this._preMesh.geometry = geometry;
|
|
421
|
+
_this.renderer.render(_this._preMesh, _this.camera);
|
|
422
|
+
_this.renderer.setRenderTarget(originRenderTarget);
|
|
423
|
+
});
|
|
424
|
+
return [2 /*return*/];
|
|
425
|
+
});
|
|
294
426
|
});
|
|
295
|
-
}
|
|
427
|
+
};
|
|
296
428
|
// 清理渲染目标
|
|
297
|
-
clearRendererTargte(rendererTarget) {
|
|
298
|
-
|
|
429
|
+
ThreeBase.prototype.clearRendererTargte = function (rendererTarget) {
|
|
430
|
+
var originTarget = this.renderer.getRenderTarget();
|
|
299
431
|
this.renderer.setRenderTarget(rendererTarget);
|
|
300
432
|
fullScreenMesh.material = clearShader;
|
|
301
433
|
fullScreenMesh.render(this.renderer);
|
|
302
434
|
this.renderer.clearDepth();
|
|
303
435
|
this.renderer.setRenderTarget(originTarget);
|
|
304
|
-
}
|
|
436
|
+
};
|
|
305
437
|
// 拷贝纹理到渲染目标
|
|
306
|
-
copyTextureToRenderTarget(texture, rendererTarget, alpha
|
|
307
|
-
|
|
438
|
+
ThreeBase.prototype.copyTextureToRenderTarget = function (texture, rendererTarget, alpha, opactity) {
|
|
439
|
+
if (alpha === void 0) { alpha = false; }
|
|
440
|
+
if (opactity === void 0) { opactity = 1; }
|
|
441
|
+
var originTarget = this.renderer.getRenderTarget();
|
|
308
442
|
if (rendererTarget) {
|
|
309
443
|
this.renderer.getSize(this.tempVector2);
|
|
310
444
|
rendererTarget.setSize(this.tempVector2.x, this.tempVector2.y);
|
|
@@ -316,20 +450,20 @@ export default class ThreeBase extends EventDispatcher {
|
|
|
316
450
|
coptyShader.blending = alpha ? NoBlending : NormalBlending;
|
|
317
451
|
fullScreenMesh.render(this.renderer);
|
|
318
452
|
this.renderer.setRenderTarget(originTarget);
|
|
319
|
-
}
|
|
453
|
+
};
|
|
320
454
|
// 把对象绘制到渲染目标中
|
|
321
|
-
object3dToRendererTarget(obj, rendererTarget) {
|
|
455
|
+
ThreeBase.prototype.object3dToRendererTarget = function (obj, rendererTarget) {
|
|
322
456
|
this.clearRendererTargte(rendererTarget);
|
|
323
|
-
|
|
457
|
+
var originTarget = this.renderer.getRenderTarget();
|
|
324
458
|
this.renderer.setRenderTarget(rendererTarget);
|
|
325
459
|
this.renderer.getSize(this.tempVector2);
|
|
326
460
|
rendererTarget.setSize(this.tempVector2.x, this.tempVector2.y);
|
|
327
461
|
this.renderer.render(obj, this.camera);
|
|
328
462
|
this.renderer.setRenderTarget(originTarget);
|
|
329
|
-
}
|
|
463
|
+
};
|
|
330
464
|
// 给渲染目标的内容加描边
|
|
331
|
-
rendererTagetAddStroke(rendererTarget, strockWidth, color, opacity) {
|
|
332
|
-
|
|
465
|
+
ThreeBase.prototype.rendererTagetAddStroke = function (rendererTarget, strockWidth, color, opacity) {
|
|
466
|
+
var originTarget = this.renderer.getRenderTarget();
|
|
333
467
|
this.clearRendererTargte(this.renderTarget2);
|
|
334
468
|
this.renderer.setRenderTarget(this.renderTarget2);
|
|
335
469
|
this.renderer.getSize(this.tempVector2);
|
|
@@ -343,16 +477,16 @@ export default class ThreeBase extends EventDispatcher {
|
|
|
343
477
|
fullScreenMesh.render(this.renderer);
|
|
344
478
|
this.copyTextureToRenderTarget(this.renderTarget2.texture, rendererTarget, true);
|
|
345
479
|
this.renderer.setRenderTarget(originTarget);
|
|
346
|
-
}
|
|
480
|
+
};
|
|
347
481
|
// 渲染对象的描边
|
|
348
|
-
renderObject3dStroke(obj, strockWidth, color, opacity) {
|
|
482
|
+
ThreeBase.prototype.renderObject3dStroke = function (obj, strockWidth, color, opacity) {
|
|
349
483
|
this.object3dToRendererTarget(obj, this.renderTarget);
|
|
350
484
|
this.rendererTagetAddStroke(this.renderTarget, strockWidth, color, opacity);
|
|
351
485
|
this.copyTextureToRenderTarget(this.renderTarget.texture, null);
|
|
352
|
-
}
|
|
486
|
+
};
|
|
353
487
|
//给渲染目标加上高斯模糊计算
|
|
354
|
-
renderTargetgaussBlur(rendererTarget, radius, opacity) {
|
|
355
|
-
|
|
488
|
+
ThreeBase.prototype.renderTargetgaussBlur = function (rendererTarget, radius, opacity) {
|
|
489
|
+
var originTarget = this.renderer.getRenderTarget();
|
|
356
490
|
this.clearRendererTargte(this.renderTarget2);
|
|
357
491
|
this.renderer.setRenderTarget(this.renderTarget2);
|
|
358
492
|
this.renderer.getSize(this.tempVector2);
|
|
@@ -365,22 +499,25 @@ export default class ThreeBase extends EventDispatcher {
|
|
|
365
499
|
fullScreenMesh.render(this.renderer);
|
|
366
500
|
this.copyTextureToRenderTarget(this.renderTarget2.texture, rendererTarget, true);
|
|
367
501
|
this.renderer.setRenderTarget(originTarget);
|
|
368
|
-
}
|
|
502
|
+
};
|
|
369
503
|
// 渲染目标上的纹理添加辉光效果
|
|
370
|
-
renderTargetAddGlow(renderTarget, width, color) {
|
|
504
|
+
ThreeBase.prototype.renderTargetAddGlow = function (renderTarget, width, color) {
|
|
371
505
|
this.rendererTagetAddStroke(renderTarget, 1 * width, color, 0.3);
|
|
372
506
|
this.rendererTagetAddStroke(renderTarget, 2 * width, color, 0.2);
|
|
373
507
|
this.rendererTagetAddStroke(renderTarget, 3 * width, color, 0.05);
|
|
374
508
|
this.renderTargetgaussBlur(renderTarget, 1, 1);
|
|
375
509
|
this.renderTargetgaussBlur(renderTarget, 1, 1);
|
|
376
510
|
this.renderTargetgaussBlur(renderTarget, 1, 1);
|
|
377
|
-
}
|
|
511
|
+
};
|
|
378
512
|
// 渲染 渲染目标
|
|
379
|
-
renderRendererTarget(renderTarget, alpha
|
|
513
|
+
ThreeBase.prototype.renderRendererTarget = function (renderTarget, alpha) {
|
|
514
|
+
if (alpha === void 0) { alpha = false; }
|
|
380
515
|
coptyShader.uniforms.map.value = renderTarget.texture;
|
|
381
516
|
coptyShader.uniforms.opacity.value = 1.0;
|
|
382
517
|
fullScreenMesh.material = coptyShader;
|
|
383
518
|
coptyShader.blending = alpha ? NoBlending : NormalBlending;
|
|
384
519
|
fullScreenMesh.render(this.renderer);
|
|
385
|
-
}
|
|
386
|
-
|
|
520
|
+
};
|
|
521
|
+
return ThreeBase;
|
|
522
|
+
}(EventDispatcher));
|
|
523
|
+
export default ThreeBase;
|