three-base 1.0.81 → 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/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
- export default class ThreeBase extends EventDispatcher {
18
- constructor() {
19
- super();
20
- this.init();
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
- async setContainer(div) {
72
- if (div) {
73
- div.innerHTML = "";
74
- div.append(this.renderer.domElement);
75
- // 如果上下文被销毁了, 就恢复上下文
76
- if (this.isRendererContextLost) {
77
- this.renderer.forceContextRestore();
78
- await new Promise(resolve => requestAnimationFrame(resolve));
79
- await new Promise(resolve => requestAnimationFrame(resolve));
80
- this.renderer.domElement.style.opacity = "1";
81
- }
82
- this.setsize(div.clientWidth, div.clientHeight);
83
- // 开启时时渲染
84
- threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
85
- threeUtils.addEventListener("requestAnimationFrame", this.renderBindThis);
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
- controlsPosition = (() => {
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
- const gridHelper = new GridHelper(1000, 100, 0x303030, 0x303030);
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
- const axesHelper = new AxesHelper(10000);
217
+ var axesHelper = new AxesHelper(10000);
130
218
  this.scene.add(axesHelper);
131
219
  }
132
220
  // 资源加载进度有更新时, 需要渲染
133
- threeLoader.addEventListener("progress", () => {
134
- this.needRender = true;
221
+ threeLoader.addEventListener("progress", function () {
222
+ _this.needRender = true;
135
223
  });
136
- }
224
+ };
137
225
  // 重置控制器的位置
138
- resetLookAt({ position, center, }) {
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
- async setLookAt({ position, center, duration = 1000 }) {
151
- // 停止控制器的惯性
152
- this.controls.enableDamping = false;
153
- this.controls.saveState();
154
- this.controls.update();
155
- this.controls.reset();
156
- this.controls.enableDamping = true;
157
- let currentPosition = this.camera.position.clone();
158
- let currentCenter = this.controls.target.clone();
159
- // 等待动画执行完成
160
- await Promise.all([
161
- new Promise(async (resolve, reject) => {
162
- if (position) {
163
- this.controlsPosition.setDuration(duration).reset({ x: currentPosition.x, y: currentPosition.y, z: currentPosition.z });
164
- await this.controlsPosition.set({ x: position.x, y: position.y, z: position.z });
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
- resolve();
167
- }),
168
- new Promise(async (resolve, reject) => {
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
- const position = this.camera.position.toArray().map(v => round(v, 3));
180
- const center = this.controls.target.toArray().map(v => round(v, 3));
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(...center),
183
- position: new Vector3(...position),
184
- centerPosition: `center: new Vector3(${center.join(",")}),position: new Vector3(${position.join(",")})`
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
- const v2 = new Vector2((v3.x + 1) * this.size.x * 0.5, (-v3.y + 1) * this.size.y * 0.5);
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
- const parentNode = this.renderer.domElement.parentNode;
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(fileName = "download") {
371
+ ThreeBase.prototype.download = function (fileName) {
372
+ if (fileName === void 0) { fileName = "download"; }
260
373
  this.render();
261
- const base64 = this.renderer.domElement.toDataURL('image/png');
262
- let saveLink = document.createElement("a");
263
- saveLink.download = `${fileName}.png`;
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
- async preloadTexture(src) {
272
- const texture = threeLoader.getTexture(src);
273
- while (texture && !texture.image || !texture.image.complete) {
274
- await new Promise(resolve => setTimeout(resolve, 50));
275
- }
276
- // 添加到计划任务中去
277
- threeUtils.addWork(() => {
278
- const originRenderTarget = this.renderer.getRenderTarget();
279
- this.renderer.setRenderTarget(this._preRT);
280
- this._preMesh.material.map = texture;
281
- this.renderer.render(this._preMesh, this.camera);
282
- this.renderer.setRenderTarget(originRenderTarget);
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
- async preloadGeometry(geometry) {
287
- // 添加到计划任务中去
288
- threeUtils.addWork(() => {
289
- const originRenderTarget = this.renderer.getRenderTarget();
290
- this.renderer.setRenderTarget(this._preRT);
291
- this._preMesh.geometry = geometry;
292
- this.renderer.render(this._preMesh, this.camera);
293
- this.renderer.setRenderTarget(originRenderTarget);
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
- const originTarget = this.renderer.getRenderTarget();
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 = false, opactity = 1) {
307
- const originTarget = this.renderer.getRenderTarget();
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
- const originTarget = this.renderer.getRenderTarget();
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
- const originTarget = this.renderer.getRenderTarget();
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
- const originTarget = this.renderer.getRenderTarget();
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 = false) {
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;