three-base 1.129.14 → 1.129.15

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.
Files changed (46) hide show
  1. package/index.js +6 -2
  2. package/index.ts +9 -3
  3. package/lib/ExtrudeMesh.js +1 -0
  4. package/lib/ExtrudeMesh.ts +2 -0
  5. package/lib/PlaneText.d.ts +2 -2
  6. package/lib/PlaneText.js +2 -2
  7. package/lib/PlaneText.ts +2 -3
  8. package/lib/PlaneWithHtml.d.ts +11 -0
  9. package/lib/PlaneWithHtml.js +67 -0
  10. package/lib/PlaneWithHtml.ts +84 -0
  11. package/lib/{PointLight.d.ts → PointLight/PointLight.d.ts} +4 -4
  12. package/lib/PointLight/PointLight.js +63 -0
  13. package/lib/PointLight/PointLight.ts +74 -0
  14. package/lib/PointLight/pointLight_map.png +0 -0
  15. package/lib/SpriteText.d.ts +45 -0
  16. package/lib/SpriteText.js +162 -0
  17. package/lib/SpriteText.ts +189 -0
  18. package/lib/SpriteText2.d.ts +47 -0
  19. package/lib/SpriteText2.js +197 -0
  20. package/lib/SpriteText2.ts +236 -0
  21. package/lib/Text3D/Text3D.js +2 -1
  22. package/lib/Text3D/Text3D.ts +2 -1
  23. package/lib/Text3D/fontController.ts +1 -1
  24. package/lib/ThreeBase.d.ts +3 -3
  25. package/lib/ThreeBase.js +14 -7
  26. package/lib/ThreeBase.ts +20 -9
  27. package/lib/Transition.d.ts +1 -3
  28. package/lib/Transition.js +8 -5
  29. package/lib/Transition.ts +10 -6
  30. package/lib/planeModal1/PlaneModal1.d.ts +0 -1
  31. package/lib/planeModal1/PlaneModal1.js +1 -1
  32. package/lib/planeModal1/PlaneModal1.ts +1 -2
  33. package/lib/spriteModal1/SpriteModal1.d.ts +0 -1
  34. package/lib/spriteModal1/SpriteModal1.js +1 -1
  35. package/lib/spriteModal1/SpriteModal1.ts +1 -2
  36. package/lib/stroke_pass/FullScreenQuad.d.ts +7 -0
  37. package/lib/stroke_pass/FullScreenQuad.js +25 -0
  38. package/lib/stroke_pass/FullScreenQuad.ts +33 -0
  39. package/lib/stroke_pass/stroke_pass.d.ts +2 -0
  40. package/lib/stroke_pass/stroke_pass.js +190 -0
  41. package/lib/stroke_pass/stroke_pass.ts +211 -0
  42. package/lib/threeUtils.js +5 -5
  43. package/lib/threeUtils.ts +6 -5
  44. package/package.json +7 -9
  45. package/lib/PointLight.js +0 -64
  46. package/lib/PointLight.ts +0 -78
@@ -2,7 +2,7 @@
2
2
  * @Author: xiaosihan
3
3
  * @Date: 2022-06-14 09:48:00
4
4
  * @Last Modified by: xiaosihan
5
- * @Last Modified time: 2023-04-04 19:26:36
5
+ * @Last Modified time: 2023-04-07 21:52:03
6
6
  */
7
7
  import { Mesh, MeshStandardMaterial, TextGeometry } from "three";
8
8
  import fontContorller from "./fontController";
@@ -53,6 +53,7 @@ export default class Text3D extends Mesh {
53
53
  bevelSegments: this._config.bevelSegments, //斜角分段
54
54
  });
55
55
  this.geometry.center();
56
+ this.dispatchEvent({ type: "loaded" });
56
57
  }
57
58
  });
58
59
  }
@@ -2,7 +2,7 @@
2
2
  * @Author: xiaosihan
3
3
  * @Date: 2022-06-14 09:48:00
4
4
  * @Last Modified by: xiaosihan
5
- * @Last Modified time: 2023-04-04 19:26:36
5
+ * @Last Modified time: 2023-04-07 21:52:03
6
6
  */
7
7
 
8
8
  import { Mesh, MeshStandardMaterial, TextGeometry } from "three";
@@ -80,6 +80,7 @@ export default class Text3D extends Mesh {
80
80
  bevelSegments: this._config.bevelSegments,//斜角分段
81
81
  });
82
82
  this.geometry.center();
83
+ this.dispatchEvent({ type: "loaded" });
83
84
  }
84
85
  })
85
86
 
@@ -6,7 +6,7 @@
6
6
  */
7
7
 
8
8
  import Dexie, { Table } from "dexie";
9
- import _, { filter, first, isEmpty } from "lodash";
9
+ import { filter, first, isEmpty } from "lodash";
10
10
  import { Font } from "three";
11
11
  import threeUtils from "../threeUtils";
12
12
  import gentilisJSON from "./gentilis.json";
@@ -1,4 +1,4 @@
1
- import { BufferGeometry, EventDispatcher, Object3D, PerspectiveCamera, Scene, Texture, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
1
+ import { BufferGeometry, Camera, EventDispatcher, Object3D, Scene, Texture, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
2
2
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
3
3
  import ThreeMouse from "./ThreeMouse";
4
4
  import Transition from "./Transition";
@@ -10,7 +10,7 @@ export default class ThreeBase extends EventDispatcher {
10
10
  tempVector3: Vector3;
11
11
  size: Vector2;
12
12
  renderer: WebGLRenderer;
13
- camera: PerspectiveCamera;
13
+ camera: Camera;
14
14
  scene: Scene;
15
15
  threeMouse: ThreeMouse;
16
16
  controls: OrbitControls;
@@ -42,7 +42,7 @@ export default class ThreeBase extends EventDispatcher {
42
42
  needRender: boolean;
43
43
  stopRender(): void;
44
44
  render(): void;
45
- renderBindThis: any;
45
+ private renderBindThis;
46
46
  download(fileName?: string): void;
47
47
  private _preMesh;
48
48
  private _preRT;
package/lib/ThreeBase.js CHANGED
@@ -2,7 +2,7 @@
2
2
  * @Author: xiaosihan
3
3
  * @Date: 2021-12-20 13:38:22
4
4
  * @Last Modified by: xiaosihan
5
- * @Last Modified time: 2023-03-30 11:00:20
5
+ * @Last Modified time: 2023-05-09 01:11:17
6
6
  */
7
7
  import { round } from "lodash";
8
8
  import { AxesHelper, EventDispatcher, GridHelper, LinearFilter, Mesh, MOUSE, NoBlending, NormalBlending, PerspectiveCamera, RGBAFormat, Scene, TOUCH, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
@@ -13,6 +13,7 @@ import threeLoader from "./threeLoader";
13
13
  import ThreeMouse from "./ThreeMouse";
14
14
  import threeUtils from "./threeUtils";
15
15
  import Transition from "./Transition";
16
+ import stroke_pass from "./stroke_pass/stroke_pass";
16
17
  // three.js 的基础对象
17
18
  export default class ThreeBase extends EventDispatcher {
18
19
  constructor() {
@@ -70,10 +71,8 @@ export default class ThreeBase extends EventDispatcher {
70
71
  // 设置 dom 容器
71
72
  async setContainer(div) {
72
73
  if (div) {
73
- //删除这个容器里面的所有canvas
74
- const canvas = div.getElementsByTagName("canvas");
75
- for (let c of canvas)
76
- c.remove();
74
+ div.style.overflow = "hidden";
75
+ div.innerHTML = "";
77
76
  div.append(this.renderer.domElement);
78
77
  // 如果上下文被销毁了, 就恢复上下文
79
78
  if (this.isRendererContextLost) {
@@ -91,8 +90,10 @@ export default class ThreeBase extends EventDispatcher {
91
90
  }
92
91
  // 修改尺寸
93
92
  setsize(width, height) {
94
- this.camera.aspect = width / height;
95
- this.camera.updateProjectionMatrix();
93
+ if (this.camera instanceof PerspectiveCamera) {
94
+ this.camera.aspect = width / height;
95
+ this.camera.updateProjectionMatrix();
96
+ }
96
97
  this.renderer.setPixelRatio(window.devicePixelRatio);
97
98
  this.renderer.setSize(width, height);
98
99
  this.size.set(width, height);
@@ -254,6 +255,12 @@ export default class ThreeBase extends EventDispatcher {
254
255
  // 渲染场景
255
256
  this.dispatchEvent({ type: "beforeRender" });
256
257
  this.renderer.render(this.scene, this.camera);
258
+ // 查找需要绘制描边的对象,并且绘制描边
259
+ this.scene.traverse(obj => {
260
+ if (obj.userData.stroke_enable) {
261
+ stroke_pass(this.renderer, this.camera, obj);
262
+ }
263
+ });
257
264
  this.dispatchEvent({ type: "afterRender" });
258
265
  }
259
266
  renderBindThis = this.render.bind(this);
package/lib/ThreeBase.ts CHANGED
@@ -2,11 +2,11 @@
2
2
  * @Author: xiaosihan
3
3
  * @Date: 2021-12-20 13:38:22
4
4
  * @Last Modified by: xiaosihan
5
- * @Last Modified time: 2023-03-30 11:00:20
5
+ * @Last Modified time: 2023-05-09 01:11:17
6
6
  */
7
7
 
8
8
  import { round } from "lodash";
9
- import { AxesHelper, BufferGeometry, EventDispatcher, GridHelper, LinearFilter, Mesh, MeshBasicMaterial, MOUSE, NoBlending, NormalBlending, Object3D, PerspectiveCamera, RGBAFormat, Scene, Texture, TOUCH, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
9
+ import { AxesHelper, BufferGeometry, Camera, EventDispatcher, GridHelper, LinearFilter, Mesh, MeshBasicMaterial, MOUSE, NoBlending, NormalBlending, Object3D, PerspectiveCamera, RGBAFormat, Scene, Texture, TOUCH, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
10
10
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
11
11
  import { generateUUID } from "three/src/math/MathUtils";
12
12
  import { clearShader, coptyShader, fullScreenMesh, gaussBlurShader, strokeShader } from "./shaders";
@@ -14,6 +14,7 @@ import threeLoader from "./threeLoader";
14
14
  import ThreeMouse from "./ThreeMouse";
15
15
  import threeUtils from "./threeUtils";
16
16
  import Transition from "./Transition";
17
+ import stroke_pass from "./stroke_pass/stroke_pass";
17
18
 
18
19
  // three.js 的基础对象
19
20
  export default class ThreeBase extends EventDispatcher {
@@ -58,7 +59,7 @@ export default class ThreeBase extends EventDispatcher {
58
59
  })();
59
60
 
60
61
  //透视相机
61
- camera = new PerspectiveCamera(45, 1, 0.0001, 10000);
62
+ camera: Camera = new PerspectiveCamera(45, 1, 0.0001, 10000);
62
63
 
63
64
  // 场景对象
64
65
  scene = new Scene();
@@ -86,9 +87,8 @@ export default class ThreeBase extends EventDispatcher {
86
87
  // 设置 dom 容器
87
88
  async setContainer(div: HTMLDivElement | null) {
88
89
  if (div) {
89
- //删除这个容器里面的所有canvas
90
- const canvas = div.getElementsByTagName("canvas");
91
- for (let c of canvas) c.remove();
90
+ div.style.overflow = "hidden";
91
+ div.innerHTML = "";
92
92
  div.append(this.renderer.domElement);
93
93
 
94
94
  // 如果上下文被销毁了, 就恢复上下文
@@ -110,8 +110,11 @@ export default class ThreeBase extends EventDispatcher {
110
110
 
111
111
  // 修改尺寸
112
112
  setsize(width: number, height: number) {
113
- this.camera.aspect = width / height;
114
- this.camera.updateProjectionMatrix();
113
+ if (this.camera instanceof PerspectiveCamera) {
114
+ this.camera.aspect = width / height;
115
+ this.camera.updateProjectionMatrix();
116
+ }
117
+
115
118
  this.renderer.setPixelRatio(window.devicePixelRatio);
116
119
  this.renderer.setSize(width, height);
117
120
  this.size.set(width, height);
@@ -305,10 +308,18 @@ export default class ThreeBase extends EventDispatcher {
305
308
  // 渲染场景
306
309
  this.dispatchEvent({ type: "beforeRender" });
307
310
  this.renderer.render(this.scene, this.camera);
311
+
312
+ // 查找需要绘制描边的对象,并且绘制描边
313
+ this.scene.traverse(obj => {
314
+ if (obj.userData.stroke_enable) {
315
+ stroke_pass(this.renderer, this.camera, obj);
316
+ }
317
+ });
318
+
308
319
  this.dispatchEvent({ type: "afterRender" });
309
320
  }
310
321
 
311
- renderBindThis = this.render.bind(this);
322
+ private renderBindThis = this.render.bind(this);
312
323
 
313
324
  // 下载渲染图
314
325
  download(fileName: string = "download") {
@@ -23,9 +23,7 @@ export default class Transition {
23
23
  _: {
24
24
  [key: string]: number;
25
25
  };
26
- onChangeCall?: (josn: {
27
- [key: string]: number;
28
- }) => void;
26
+ private onChangeCall;
29
27
  run({ timeTemp }: any): this;
30
28
  runbindThis: any;
31
29
  onChange(onChangeCall: (josn: {
package/lib/Transition.js CHANGED
@@ -23,7 +23,7 @@ export default class Transition {
23
23
  constructor(param = {}, bezier = [0.8, 0, 0.2, 1], duration = 500) {
24
24
  this.setDuration(duration);
25
25
  this.setBezier(bezier);
26
- this.set(param);
26
+ this.reset(param);
27
27
  }
28
28
  // 所有的 key 的枚举
29
29
  _keys = [];
@@ -57,7 +57,7 @@ export default class Transition {
57
57
  }
58
58
  // 存储 每个参数的 起始位置 起始时间 终止位置 终止时间
59
59
  _ = {};
60
- onChangeCall;
60
+ onChangeCall = (josn) => { };
61
61
  // 执行过度动画
62
62
  run({ timeTemp }) {
63
63
  this.timeTemp = timeTemp;
@@ -73,7 +73,7 @@ export default class Transition {
73
73
  // 设置动画对象的回调事件
74
74
  onChange(onChangeCall) {
75
75
  this.onChangeCall = onChangeCall;
76
- threeUtils.addEventListener("requestAnimationFrame", this.runbindThis);
76
+ this.onChangeCall(this.getJson());
77
77
  return this;
78
78
  }
79
79
  // 计算当前 key 的值
@@ -133,9 +133,9 @@ export default class Transition {
133
133
  // // 执行状态未完成
134
134
  // this._isDone = false;
135
135
  }
136
- threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
137
- threeUtils.addEventListener("requestAnimationFrame", this.runbindThis);
138
136
  if (!this._isDone) {
137
+ threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
138
+ threeUtils.addEventListener("requestAnimationFrame", this.runbindThis);
139
139
  await new Promise(resolve => setTimeout(resolve, this._duration + 50));
140
140
  }
141
141
  return this;
@@ -143,6 +143,9 @@ export default class Transition {
143
143
  // 重置起始和终止位置
144
144
  reset(param) {
145
145
  for (let key in param) {
146
+ if (!this._keys.includes(key)) {
147
+ this._keys.push(key);
148
+ }
146
149
  this._[key + "_start"] = param[key];
147
150
  this._[key + "_end"] = param[key];
148
151
  this._[key + "_startTime"] = -this._duration;
package/lib/Transition.ts CHANGED
@@ -36,7 +36,7 @@ export default class Transition {
36
36
 
37
37
  this.setBezier(bezier);
38
38
 
39
- this.set(param);
39
+ this.reset(param);
40
40
  }
41
41
 
42
42
  // 所有的 key 的枚举
@@ -82,7 +82,7 @@ export default class Transition {
82
82
  // 存储 每个参数的 起始位置 起始时间 终止位置 终止时间
83
83
  _: { [key: string]: number } = {};
84
84
 
85
- onChangeCall?: (josn: { [key: string]: number }) => void;
85
+ private onChangeCall = (josn: { [key: string]: number }) => { };
86
86
 
87
87
  // 执行过度动画
88
88
  run({ timeTemp }: any) {
@@ -100,7 +100,7 @@ export default class Transition {
100
100
  // 设置动画对象的回调事件
101
101
  onChange(onChangeCall: (josn: { [key: string]: number }) => void): this {
102
102
  this.onChangeCall = onChangeCall;
103
- threeUtils.addEventListener("requestAnimationFrame", this.runbindThis);
103
+ this.onChangeCall(this.getJson());
104
104
  return this;
105
105
  }
106
106
 
@@ -185,10 +185,9 @@ export default class Transition {
185
185
 
186
186
  }
187
187
 
188
- threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
189
- threeUtils.addEventListener("requestAnimationFrame", this.runbindThis);
190
-
191
188
  if (!this._isDone) {
189
+ threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
190
+ threeUtils.addEventListener("requestAnimationFrame", this.runbindThis);
192
191
  await new Promise(resolve => setTimeout(resolve, this._duration + 50));
193
192
  }
194
193
 
@@ -198,6 +197,11 @@ export default class Transition {
198
197
  reset(param: TParam): this {
199
198
 
200
199
  for (let key in param) {
200
+
201
+ if (!this._keys.includes(key)) {
202
+ this._keys.push(key);
203
+ }
204
+
201
205
  this._[key + "_start"] = param[key];
202
206
  this._[key + "_end"] = param[key];
203
207
  this._[key + "_startTime"] = -this._duration;
@@ -11,7 +11,6 @@ export type PlaneModal1Config = {
11
11
  };
12
12
  export default class PlaneModal1 extends Mesh {
13
13
  constructor(config?: PlaneModal1Config);
14
- renderOrder: number;
15
14
  geometry: PlaneGeometry;
16
15
  material: MeshBasicMaterial;
17
16
  static img: HTMLImageElement;
@@ -14,7 +14,6 @@ export default class PlaneModal1 extends Mesh {
14
14
  this.material.map = this.texture;
15
15
  this.scale.set(10, 10, 10);
16
16
  }
17
- renderOrder = 99;
18
17
  geometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);
19
18
  material = new MeshBasicMaterial({
20
19
  side: DoubleSide,
@@ -100,5 +99,6 @@ export default class PlaneModal1 extends Mesh {
100
99
  textPos.y += size;
101
100
  });
102
101
  this.texture.needsUpdate = true;
102
+ this.dispatchEvent({ type: "loaded" });
103
103
  }
104
104
  }
@@ -30,8 +30,6 @@ export default class PlaneModal1 extends Mesh {
30
30
  this.scale.set(10, 10, 10);
31
31
  }
32
32
 
33
- renderOrder = 99;
34
-
35
33
  geometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);
36
34
 
37
35
  material = new MeshBasicMaterial({
@@ -145,6 +143,7 @@ export default class PlaneModal1 extends Mesh {
145
143
 
146
144
  this.texture.needsUpdate = true;
147
145
 
146
+ this.dispatchEvent({ type: "loaded" });
148
147
  }
149
148
 
150
149
 
@@ -11,7 +11,6 @@ export type SpritModal1Config = {
11
11
  };
12
12
  export default class SpritModal1 extends Sprite {
13
13
  constructor(config?: SpritModal1Config);
14
- renderOrder: number;
15
14
  static img: HTMLImageElement;
16
15
  canvas: HTMLCanvasElement;
17
16
  context: CanvasRenderingContext2D;
@@ -15,7 +15,6 @@ export default class SpritModal1 extends Sprite {
15
15
  this.material.transparent = true;
16
16
  this.material.alphaTest = 0.01;
17
17
  }
18
- renderOrder = 99;
19
18
  // 背景图
20
19
  static img = (() => {
21
20
  const img = new Image();
@@ -96,6 +95,7 @@ export default class SpritModal1 extends Sprite {
96
95
  textPos.y += size;
97
96
  });
98
97
  this.texture.needsUpdate = true;
98
+ this.dispatchEvent({ type: "loaded" });
99
99
  }
100
100
  //鼠标拾取计算
101
101
  raycast(raycaster, intersects) {
@@ -34,8 +34,6 @@ export default class SpritModal1 extends Sprite {
34
34
  this.material.alphaTest = 0.01;
35
35
  }
36
36
 
37
- renderOrder = 99;
38
-
39
37
  // 背景图
40
38
  static img = (() => {
41
39
  const img = new Image();
@@ -142,6 +140,7 @@ export default class SpritModal1 extends Sprite {
142
140
 
143
141
  this.texture.needsUpdate = true;
144
142
 
143
+ this.dispatchEvent({ type: "loaded" });
145
144
  }
146
145
 
147
146
  //鼠标拾取计算
@@ -0,0 +1,7 @@
1
+ import { BufferGeometry, Material, Mesh, OrthographicCamera, Scene, WebGLRenderer } from "three";
2
+ export default class FullScreenQuad extends Scene {
3
+ constructor();
4
+ mesh: Mesh<BufferGeometry, Material>;
5
+ orthographicCamera: OrthographicCamera;
6
+ render(renderer: WebGLRenderer, material: Material): void;
7
+ }
@@ -0,0 +1,25 @@
1
+ /*
2
+ * @Author: xiaosihan
3
+ * @Date: 2023-05-09 01:36:35
4
+ * @Last Modified by: xiaosihan
5
+ * @Last Modified time: 2023-05-09 01:47:07
6
+ */
7
+ import { BufferGeometry, Float32BufferAttribute, Mesh, MeshBasicMaterial, OrthographicCamera, Scene } from "three";
8
+ export default class FullScreenQuad extends Scene {
9
+ constructor() {
10
+ super();
11
+ }
12
+ mesh = (() => {
13
+ const geometry = new BufferGeometry();
14
+ geometry.setAttribute("position", new Float32BufferAttribute([-1, 3, 0, -1, -1, 0, 3, -1, 0], 3));
15
+ geometry.setAttribute("uv", new Float32BufferAttribute([0, 2, 0, 0, 2, 0], 2));
16
+ const mesh = new Mesh(geometry, new MeshBasicMaterial());
17
+ this.add(mesh);
18
+ return mesh;
19
+ })();
20
+ orthographicCamera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
21
+ render(renderer, material) {
22
+ this.mesh.material = material;
23
+ renderer.render(this, this.orthographicCamera);
24
+ }
25
+ }
@@ -0,0 +1,33 @@
1
+ /*
2
+ * @Author: xiaosihan
3
+ * @Date: 2023-05-09 01:36:35
4
+ * @Last Modified by: xiaosihan
5
+ * @Last Modified time: 2023-05-09 01:47:07
6
+ */
7
+
8
+
9
+ import { BufferGeometry, Float32BufferAttribute, Material, Mesh, MeshBasicMaterial, OrthographicCamera, Scene, WebGLRenderer } from "three";
10
+
11
+
12
+ export default class FullScreenQuad extends Scene {
13
+ constructor() {
14
+ super();
15
+ }
16
+
17
+ mesh = (() => {
18
+ const geometry = new BufferGeometry();
19
+ geometry.setAttribute("position", new Float32BufferAttribute([- 1, 3, 0, - 1, - 1, 0, 3, - 1, 0], 3));
20
+ geometry.setAttribute("uv", new Float32BufferAttribute([0, 2, 0, 0, 2, 0], 2));
21
+ const mesh = new Mesh<BufferGeometry, Material>(geometry, new MeshBasicMaterial());
22
+ this.add(mesh);
23
+ return mesh;
24
+ })();
25
+
26
+ orthographicCamera = new OrthographicCamera(- 1, 1, 1, - 1, 0, 1);
27
+
28
+ render(renderer: WebGLRenderer, material: Material) {
29
+ this.mesh.material = material;
30
+ renderer.render(this, this.orthographicCamera);
31
+ }
32
+
33
+ }
@@ -0,0 +1,2 @@
1
+ import { Camera, Object3D, WebGLRenderer } from "three";
2
+ export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D): void;
@@ -0,0 +1,190 @@
1
+ /*
2
+ * @Author: xiaosihan
3
+ * @Date: 2023-05-09 00:35:17
4
+ * @Last Modified by: xiaosihan
5
+ * @Last Modified time: 2023-05-09 02:33:28
6
+ */
7
+ import { LinearFilter, RGBAFormat, Vector2, WebGLRenderTarget, NoBlending, Scene, RawShaderMaterial, Color, NormalBlending } from "three";
8
+ import FullScreenQuad from "./FullScreenQuad";
9
+ // 选中对象的纹理
10
+ const selectTextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
11
+ // 由于不能同时读写自己的纹理
12
+ const blur1TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
13
+ // 所以需要用2个模糊纹理相互读写
14
+ const blur2TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
15
+ const size = new Vector2();
16
+ // 创建一个渲染工具 用于处理纹理
17
+ const fsQuad = new FullScreenQuad(); // 渲染辅助器
18
+ // 描边着色器
19
+ const blurShader = new RawShaderMaterial({
20
+ uniforms: {
21
+ tDiffuse: { value: null },
22
+ color: { value: new Color("#0f0") },
23
+ width: { value: 1.0 },
24
+ opacity: { value: 1.0 },
25
+ resolution: { value: new Vector2(1 / 512, 1 / 512) },
26
+ offset: {
27
+ value: [
28
+ new Vector2(0.000, 1.000),
29
+ new Vector2(0.259, 0.966),
30
+ new Vector2(0.500, 0.866),
31
+ new Vector2(0.707, 0.707),
32
+ new Vector2(0.866, 0.500),
33
+ new Vector2(0.966, 0.259),
34
+ new Vector2(1.000, 0.000),
35
+ new Vector2(0.966, -0.259),
36
+ new Vector2(0.866, -0.500),
37
+ new Vector2(0.707, -0.707),
38
+ new Vector2(0.500, -0.866),
39
+ new Vector2(0.259, -0.966),
40
+ new Vector2(0.000, -1.000),
41
+ new Vector2(-0.259, -0.966),
42
+ new Vector2(-0.500, -0.866),
43
+ new Vector2(-0.707, -0.707),
44
+ new Vector2(-0.866, -0.500),
45
+ new Vector2(-0.966, -0.259),
46
+ new Vector2(-1.000, -0.000),
47
+ new Vector2(-0.966, 0.259),
48
+ new Vector2(-0.866, 0.500),
49
+ new Vector2(-0.707, 0.707),
50
+ new Vector2(-0.500, 0.866),
51
+ new Vector2(-0.259, 0.966)
52
+ ]
53
+ }
54
+ },
55
+ vertexShader: `
56
+ attribute vec3 position;
57
+ attribute vec2 uv;
58
+ varying vec2 vUv;
59
+ void main() {
60
+ vUv = uv;
61
+ gl_Position = vec4(position, 1.0);
62
+ }`,
63
+ fragmentShader: `
64
+ #ifdef GL_ES
65
+ precision highp float;
66
+ #endif
67
+ uniform sampler2D tDiffuse;
68
+ uniform vec3 color;
69
+ uniform float width;
70
+ uniform float opacity;
71
+ uniform vec2 resolution;
72
+ uniform vec2 offset[24];
73
+ varying vec2 vUv;
74
+ vec2 piexl = resolution * width; // 描边厚度
75
+
76
+ vec4 stroke(){
77
+ vec4 blurColor = vec4(0.0);
78
+ vec4 Color = vec4(0.0);
79
+ int vSum = 0; // 周围像素点中和 visibleColor 相似的数量
80
+ for (int i = 0; i < 24; i++ ) {
81
+ Color = texture2D(tDiffuse, vUv + (offset[i] * piexl));
82
+ if (Color.a > 0.0) {
83
+ blurColor += Color;
84
+ }
85
+ }
86
+ if (blurColor.a < 0.001) {
87
+ return vec4(0.0);
88
+ } else {
89
+ return vec4(color, opacity);
90
+ }
91
+ }
92
+ void main() {
93
+ vec4 Color = texture2D(tDiffuse, vUv);
94
+ if (Color.a > 0.0 || width == 0.0) {
95
+ gl_FragColor = Color;
96
+ } else {
97
+ gl_FragColor = stroke();
98
+ }
99
+ }`,
100
+ blending: NoBlending,
101
+ depthTest: false,
102
+ depthWrite: false,
103
+ transparent: true
104
+ });
105
+ // 过滤着色器
106
+ const filterSelectShader = new RawShaderMaterial({
107
+ uniforms: {
108
+ selectTexture: { value: null },
109
+ blurTexture: { value: null }
110
+ },
111
+ vertexShader: `
112
+ attribute vec3 position;
113
+ attribute vec2 uv;
114
+ varying vec2 vUv;
115
+ void main() {
116
+ vUv = uv;
117
+ gl_Position = vec4(position, 1.0);
118
+ }
119
+ `,
120
+ fragmentShader: `
121
+ #ifdef GL_ES
122
+ precision highp float;
123
+ #endif
124
+ uniform sampler2D selectTexture;
125
+ uniform sampler2D blurTexture;
126
+ varying vec2 vUv;
127
+
128
+ void main() {
129
+ gl_FragColor = texture2D(blurTexture, vUv);
130
+ gl_FragColor.a -= (texture2D(selectTexture, vUv).a);
131
+ }
132
+ `,
133
+ blending: NoBlending,
134
+ depthTest: false,
135
+ depthWrite: false,
136
+ transparent: true
137
+ });
138
+ // 场景对象
139
+ const scene = new Scene();
140
+ // 对象描边
141
+ export default function stroke_pass(renderer, camera, object3d) {
142
+ const { stroke_enable = false, stroke_color = "#04fa12", stroke_width = 1 } = object3d.userData;
143
+ if (!stroke_enable) {
144
+ return;
145
+ }
146
+ // 保存原帧缓冲区
147
+ const originRenderTarget = renderer.getRenderTarget();
148
+ // 设置选中目标的帧缓冲区
149
+ renderer.getSize(size);
150
+ selectTextureTarget.setSize(size.x, size.y);
151
+ blur1TextureTarget.setSize(size.x, size.y);
152
+ blur2TextureTarget.setSize(size.x, size.y);
153
+ renderer.setRenderTarget(selectTextureTarget);
154
+ scene.children = [object3d];
155
+ renderer.clear();
156
+ renderer.render(object3d, camera);
157
+ // 设置描边着色器的分辨率
158
+ blurShader.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
159
+ //描边颜色
160
+ blurShader.uniforms.color.value.set(stroke_color);
161
+ blurShader.uniforms.width.value = stroke_width / 4;
162
+ //一次描边
163
+ renderer.setRenderTarget(blur1TextureTarget);
164
+ blurShader.uniforms.tDiffuse.value = selectTextureTarget.texture;
165
+ fsQuad.render(renderer, blurShader);
166
+ //二次描边
167
+ renderer.setRenderTarget(blur2TextureTarget);
168
+ blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
169
+ fsQuad.render(renderer, blurShader);
170
+ //三次描边
171
+ renderer.setRenderTarget(blur1TextureTarget);
172
+ blurShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
173
+ fsQuad.render(renderer, blurShader);
174
+ //四次描边
175
+ renderer.setRenderTarget(blur2TextureTarget);
176
+ blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
177
+ fsQuad.render(renderer, blurShader);
178
+ // 还原帧缓冲区 减去原始纹理保留描边
179
+ renderer.setRenderTarget(originRenderTarget);
180
+ filterSelectShader.uniforms.selectTexture.value = selectTextureTarget.texture;
181
+ filterSelectShader.uniforms.blurTexture.value = blur2TextureTarget.texture;
182
+ filterSelectShader.blending = NormalBlending; // 与有的纹理融合计算 保留前面通道传递下来的纹理
183
+ fsQuad.render(renderer, filterSelectShader);
184
+ // 调试代码
185
+ // renderer.setRenderTarget(null);
186
+ // renderer.clearDepth();
187
+ // copyShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
188
+ // fsQuad.render(renderer, copyShader);
189
+ // return;
190
+ }