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.
- package/index.js +6 -2
- package/index.ts +9 -3
- package/lib/ExtrudeMesh.js +1 -0
- package/lib/ExtrudeMesh.ts +2 -0
- package/lib/PlaneText.d.ts +2 -2
- package/lib/PlaneText.js +2 -2
- package/lib/PlaneText.ts +2 -3
- package/lib/PlaneWithHtml.d.ts +11 -0
- package/lib/PlaneWithHtml.js +67 -0
- package/lib/PlaneWithHtml.ts +84 -0
- package/lib/{PointLight.d.ts → PointLight/PointLight.d.ts} +4 -4
- package/lib/PointLight/PointLight.js +63 -0
- package/lib/PointLight/PointLight.ts +74 -0
- package/lib/PointLight/pointLight_map.png +0 -0
- package/lib/SpriteText.d.ts +45 -0
- package/lib/SpriteText.js +162 -0
- package/lib/SpriteText.ts +189 -0
- package/lib/SpriteText2.d.ts +47 -0
- package/lib/SpriteText2.js +197 -0
- package/lib/SpriteText2.ts +236 -0
- package/lib/Text3D/Text3D.js +2 -1
- package/lib/Text3D/Text3D.ts +2 -1
- package/lib/Text3D/fontController.ts +1 -1
- package/lib/ThreeBase.d.ts +3 -3
- package/lib/ThreeBase.js +14 -7
- package/lib/ThreeBase.ts +20 -9
- package/lib/Transition.d.ts +1 -3
- package/lib/Transition.js +8 -5
- package/lib/Transition.ts +10 -6
- package/lib/planeModal1/PlaneModal1.d.ts +0 -1
- package/lib/planeModal1/PlaneModal1.js +1 -1
- package/lib/planeModal1/PlaneModal1.ts +1 -2
- package/lib/spriteModal1/SpriteModal1.d.ts +0 -1
- package/lib/spriteModal1/SpriteModal1.js +1 -1
- package/lib/spriteModal1/SpriteModal1.ts +1 -2
- package/lib/stroke_pass/FullScreenQuad.d.ts +7 -0
- package/lib/stroke_pass/FullScreenQuad.js +25 -0
- package/lib/stroke_pass/FullScreenQuad.ts +33 -0
- package/lib/stroke_pass/stroke_pass.d.ts +2 -0
- package/lib/stroke_pass/stroke_pass.js +190 -0
- package/lib/stroke_pass/stroke_pass.ts +211 -0
- package/lib/threeUtils.js +5 -5
- package/lib/threeUtils.ts +6 -5
- package/package.json +7 -9
- package/lib/PointLight.js +0 -64
- package/lib/PointLight.ts +0 -78
package/lib/Text3D/Text3D.js
CHANGED
|
@@ -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-
|
|
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
|
}
|
package/lib/Text3D/Text3D.ts
CHANGED
|
@@ -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-
|
|
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
|
|
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";
|
package/lib/ThreeBase.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BufferGeometry, EventDispatcher, Object3D,
|
|
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:
|
|
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
|
|
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-
|
|
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
|
-
|
|
74
|
-
|
|
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
|
|
95
|
-
|
|
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-
|
|
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
|
-
|
|
90
|
-
|
|
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
|
|
114
|
-
|
|
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") {
|
package/lib/Transition.d.ts
CHANGED
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.
|
|
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
|
-
|
|
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.
|
|
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
|
|
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
|
-
|
|
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;
|
|
@@ -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
|
|
|
@@ -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,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
|
+
}
|