three-base 1.129.15 → 2.0.1
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/README.md +1 -0
- package/index.js +1 -37
- package/index.ts +1 -61
- package/package.json +3 -4
- package/lib/ApngTexture.d.ts +0 -13
- package/lib/ApngTexture.js +0 -61
- package/lib/ApngTexture.ts +0 -91
- package/lib/ApngTextureManage.d.ts +0 -18
- package/lib/ApngTextureManage.js +0 -87
- package/lib/ApngTextureManage.ts +0 -130
- package/lib/EventMesh.d.ts +0 -18
- package/lib/EventMesh.js +0 -59
- package/lib/EventMesh.ts +0 -79
- package/lib/ExtrudeMesh.d.ts +0 -111
- package/lib/ExtrudeMesh.js +0 -363
- package/lib/ExtrudeMesh.ts +0 -571
- package/lib/FPScontrol.d.ts +0 -44
- package/lib/FPScontrol.js +0 -170
- package/lib/FPScontrol.ts +0 -209
- package/lib/InstancedGroupMesh.d.ts +0 -10
- package/lib/InstancedGroupMesh.js +0 -63
- package/lib/InstancedGroupMesh.ts +0 -80
- package/lib/KeyFrameAnimation.d.ts +0 -25
- package/lib/KeyFrameAnimation.js +0 -78
- package/lib/KeyFrameAnimation.ts +0 -122
- package/lib/PlaneText.d.ts +0 -37
- package/lib/PlaneText.js +0 -30
- package/lib/PlaneText.ts +0 -58
- package/lib/PlaneWithHtml.d.ts +0 -11
- package/lib/PlaneWithHtml.js +0 -67
- package/lib/PlaneWithHtml.ts +0 -84
- package/lib/PointLight/PointLight.d.ts +0 -13
- package/lib/PointLight/PointLight.js +0 -63
- package/lib/PointLight/PointLight.ts +0 -74
- package/lib/PointLight/pointLight_map.png +0 -0
- package/lib/Sky/Sky.d.ts +0 -13
- package/lib/Sky/Sky.js +0 -28
- package/lib/Sky/Sky.ts +0 -36
- package/lib/Sky/bluesky.jpg +0 -0
- package/lib/SpriteText.d.ts +0 -45
- package/lib/SpriteText.js +0 -162
- package/lib/SpriteText.ts +0 -189
- package/lib/SpriteText2.d.ts +0 -47
- package/lib/SpriteText2.js +0 -197
- package/lib/SpriteText2.ts +0 -236
- package/lib/Text3D/Text3D.d.ts +0 -20
- package/lib/Text3D/Text3D.js +0 -61
- package/lib/Text3D/Text3D.ts +0 -92
- package/lib/Text3D/fontController.d.ts +0 -59
- package/lib/Text3D/fontController.js +0 -200
- package/lib/Text3D/fontController.ts +0 -285
- package/lib/Text3D/gentilis.json +0 -811
- package/lib/ThreeBase.d.ts +0 -59
- package/lib/ThreeBase.js +0 -395
- package/lib/ThreeBase.ts +0 -475
- package/lib/ThreeMouse.d.ts +0 -39
- package/lib/ThreeMouse.js +0 -357
- package/lib/ThreeMouse.ts +0 -464
- package/lib/Transition.d.ts +0 -43
- package/lib/Transition.js +0 -196
- package/lib/Transition.ts +0 -268
- package/lib/index.d.ts +0 -22
- package/lib/keyContorls.d.ts +0 -25
- package/lib/keyContorls.js +0 -98
- package/lib/keyContorls.ts +0 -127
- package/lib/planeModal1/PlaneModal1.d.ts +0 -31
- package/lib/planeModal1/PlaneModal1.js +0 -104
- package/lib/planeModal1/PlaneModal1.ts +0 -150
- package/lib/planeModal1/planeModal.png +0 -0
- package/lib/shaders.d.ts +0 -17
- package/lib/shaders.js +0 -245
- package/lib/shaders.ts +0 -264
- package/lib/spriteModal1/SpriteModal1.d.ts +0 -30
- package/lib/spriteModal1/SpriteModal1.js +0 -109
- package/lib/spriteModal1/SpriteModal1.ts +0 -159
- package/lib/spriteModal1/spriteModal1.png +0 -0
- package/lib/stroke_pass/FullScreenQuad.d.ts +0 -7
- package/lib/stroke_pass/FullScreenQuad.js +0 -25
- package/lib/stroke_pass/FullScreenQuad.ts +0 -33
- package/lib/stroke_pass/stroke_pass.d.ts +0 -2
- package/lib/stroke_pass/stroke_pass.js +0 -190
- package/lib/stroke_pass/stroke_pass.ts +0 -211
- package/lib/threeLoader.d.ts +0 -20
- package/lib/threeLoader.js +0 -110
- package/lib/threeLoader.ts +0 -136
- package/lib/threeUtils.d.ts +0 -41
- package/lib/threeUtils.js +0 -179
- package/lib/threeUtils.ts +0 -212
- package/lib/type.d.ts +0 -0
- package/lib/type.js +0 -10
- package/lib/type.ts +0 -13
|
@@ -1,211 +0,0 @@
|
|
|
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
|
-
|
|
8
|
-
import { Camera, LinearFilter, Object3D, RGBAFormat, Vector2, WebGLRenderTarget, WebGLRenderer, ShaderMaterial, NoBlending, Scene, RawShaderMaterial, Color, NormalBlending } from "three";
|
|
9
|
-
import FullScreenQuad from "./FullScreenQuad";
|
|
10
|
-
|
|
11
|
-
// 选中对象的纹理
|
|
12
|
-
const selectTextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
|
|
13
|
-
|
|
14
|
-
// 由于不能同时读写自己的纹理
|
|
15
|
-
const blur1TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
|
|
16
|
-
|
|
17
|
-
// 所以需要用2个模糊纹理相互读写
|
|
18
|
-
const blur2TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
|
|
19
|
-
|
|
20
|
-
const size = new Vector2();
|
|
21
|
-
|
|
22
|
-
// 创建一个渲染工具 用于处理纹理
|
|
23
|
-
const fsQuad = new FullScreenQuad(); // 渲染辅助器
|
|
24
|
-
|
|
25
|
-
// 描边着色器
|
|
26
|
-
const blurShader = new RawShaderMaterial({
|
|
27
|
-
uniforms: {
|
|
28
|
-
tDiffuse: { value: null },
|
|
29
|
-
color: { value: new Color("#0f0") }, // 没有被挡住的地方的颜色绿色
|
|
30
|
-
width: { value: 1.0 },
|
|
31
|
-
opacity: { value: 1.0 },
|
|
32
|
-
resolution: { value: new Vector2(1 / 512, 1 / 512) }, // 渲染器的分辨率
|
|
33
|
-
offset: {
|
|
34
|
-
value: [
|
|
35
|
-
new Vector2(0.000, 1.000),
|
|
36
|
-
new Vector2(0.259, 0.966),
|
|
37
|
-
new Vector2(0.500, 0.866),
|
|
38
|
-
new Vector2(0.707, 0.707),
|
|
39
|
-
new Vector2(0.866, 0.500),
|
|
40
|
-
new Vector2(0.966, 0.259),
|
|
41
|
-
new Vector2(1.000, 0.000),
|
|
42
|
-
new Vector2(0.966, -0.259),
|
|
43
|
-
new Vector2(0.866, -0.500),
|
|
44
|
-
new Vector2(0.707, -0.707),
|
|
45
|
-
new Vector2(0.500, -0.866),
|
|
46
|
-
new Vector2(0.259, -0.966),
|
|
47
|
-
new Vector2(0.000, -1.000),
|
|
48
|
-
new Vector2(-0.259, -0.966),
|
|
49
|
-
new Vector2(-0.500, -0.866),
|
|
50
|
-
new Vector2(-0.707, -0.707),
|
|
51
|
-
new Vector2(-0.866, -0.500),
|
|
52
|
-
new Vector2(-0.966, -0.259),
|
|
53
|
-
new Vector2(-1.000, -0.000),
|
|
54
|
-
new Vector2(-0.966, 0.259),
|
|
55
|
-
new Vector2(-0.866, 0.500),
|
|
56
|
-
new Vector2(-0.707, 0.707),
|
|
57
|
-
new Vector2(-0.500, 0.866),
|
|
58
|
-
new Vector2(-0.259, 0.966)
|
|
59
|
-
]
|
|
60
|
-
}
|
|
61
|
-
},
|
|
62
|
-
vertexShader: `
|
|
63
|
-
attribute vec3 position;
|
|
64
|
-
attribute vec2 uv;
|
|
65
|
-
varying vec2 vUv;
|
|
66
|
-
void main() {
|
|
67
|
-
vUv = uv;
|
|
68
|
-
gl_Position = vec4(position, 1.0);
|
|
69
|
-
}`,
|
|
70
|
-
fragmentShader: `
|
|
71
|
-
#ifdef GL_ES
|
|
72
|
-
precision highp float;
|
|
73
|
-
#endif
|
|
74
|
-
uniform sampler2D tDiffuse;
|
|
75
|
-
uniform vec3 color;
|
|
76
|
-
uniform float width;
|
|
77
|
-
uniform float opacity;
|
|
78
|
-
uniform vec2 resolution;
|
|
79
|
-
uniform vec2 offset[24];
|
|
80
|
-
varying vec2 vUv;
|
|
81
|
-
vec2 piexl = resolution * width; // 描边厚度
|
|
82
|
-
|
|
83
|
-
vec4 stroke(){
|
|
84
|
-
vec4 blurColor = vec4(0.0);
|
|
85
|
-
vec4 Color = vec4(0.0);
|
|
86
|
-
int vSum = 0; // 周围像素点中和 visibleColor 相似的数量
|
|
87
|
-
for (int i = 0; i < 24; i++ ) {
|
|
88
|
-
Color = texture2D(tDiffuse, vUv + (offset[i] * piexl));
|
|
89
|
-
if (Color.a > 0.0) {
|
|
90
|
-
blurColor += Color;
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
if (blurColor.a < 0.001) {
|
|
94
|
-
return vec4(0.0);
|
|
95
|
-
} else {
|
|
96
|
-
return vec4(color, opacity);
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
void main() {
|
|
100
|
-
vec4 Color = texture2D(tDiffuse, vUv);
|
|
101
|
-
if (Color.a > 0.0 || width == 0.0) {
|
|
102
|
-
gl_FragColor = Color;
|
|
103
|
-
} else {
|
|
104
|
-
gl_FragColor = stroke();
|
|
105
|
-
}
|
|
106
|
-
}`,
|
|
107
|
-
blending: NoBlending, // 渲染时不与背景融合计算 直接替换
|
|
108
|
-
depthTest: false,
|
|
109
|
-
depthWrite: false,
|
|
110
|
-
transparent: true
|
|
111
|
-
});
|
|
112
|
-
|
|
113
|
-
// 过滤着色器
|
|
114
|
-
const filterSelectShader = new RawShaderMaterial({
|
|
115
|
-
uniforms: {
|
|
116
|
-
selectTexture: { value: null },
|
|
117
|
-
blurTexture: { value: null }
|
|
118
|
-
},
|
|
119
|
-
vertexShader: `
|
|
120
|
-
attribute vec3 position;
|
|
121
|
-
attribute vec2 uv;
|
|
122
|
-
varying vec2 vUv;
|
|
123
|
-
void main() {
|
|
124
|
-
vUv = uv;
|
|
125
|
-
gl_Position = vec4(position, 1.0);
|
|
126
|
-
}
|
|
127
|
-
`,
|
|
128
|
-
fragmentShader: `
|
|
129
|
-
#ifdef GL_ES
|
|
130
|
-
precision highp float;
|
|
131
|
-
#endif
|
|
132
|
-
uniform sampler2D selectTexture;
|
|
133
|
-
uniform sampler2D blurTexture;
|
|
134
|
-
varying vec2 vUv;
|
|
135
|
-
|
|
136
|
-
void main() {
|
|
137
|
-
gl_FragColor = texture2D(blurTexture, vUv);
|
|
138
|
-
gl_FragColor.a -= (texture2D(selectTexture, vUv).a);
|
|
139
|
-
}
|
|
140
|
-
`,
|
|
141
|
-
blending: NoBlending, // 渲染时不与背景融合计算 直接替换
|
|
142
|
-
depthTest: false,
|
|
143
|
-
depthWrite: false,
|
|
144
|
-
transparent: true
|
|
145
|
-
});
|
|
146
|
-
|
|
147
|
-
// 场景对象
|
|
148
|
-
const scene = new Scene();
|
|
149
|
-
|
|
150
|
-
// 对象描边
|
|
151
|
-
export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D) {
|
|
152
|
-
|
|
153
|
-
const { stroke_enable = false, stroke_color = "#04fa12", stroke_width = 1 } = object3d.userData;
|
|
154
|
-
if (!stroke_enable) {
|
|
155
|
-
return;
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
// 保存原帧缓冲区
|
|
159
|
-
const originRenderTarget = renderer.getRenderTarget();
|
|
160
|
-
|
|
161
|
-
// 设置选中目标的帧缓冲区
|
|
162
|
-
renderer.getSize(size);
|
|
163
|
-
selectTextureTarget.setSize(size.x, size.y);
|
|
164
|
-
blur1TextureTarget.setSize(size.x, size.y);
|
|
165
|
-
blur2TextureTarget.setSize(size.x, size.y);
|
|
166
|
-
renderer.setRenderTarget(selectTextureTarget);
|
|
167
|
-
scene.children = [object3d];
|
|
168
|
-
renderer.clear();
|
|
169
|
-
renderer.render(object3d, camera);
|
|
170
|
-
|
|
171
|
-
// 设置描边着色器的分辨率
|
|
172
|
-
blurShader.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
|
|
173
|
-
//描边颜色
|
|
174
|
-
blurShader.uniforms.color.value.set(stroke_color);
|
|
175
|
-
blurShader.uniforms.width.value = stroke_width / 4;
|
|
176
|
-
|
|
177
|
-
//一次描边
|
|
178
|
-
renderer.setRenderTarget(blur1TextureTarget);
|
|
179
|
-
blurShader.uniforms.tDiffuse.value = selectTextureTarget.texture;
|
|
180
|
-
fsQuad.render(renderer, blurShader);
|
|
181
|
-
|
|
182
|
-
//二次描边
|
|
183
|
-
renderer.setRenderTarget(blur2TextureTarget);
|
|
184
|
-
blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
|
|
185
|
-
fsQuad.render(renderer, blurShader);
|
|
186
|
-
|
|
187
|
-
//三次描边
|
|
188
|
-
renderer.setRenderTarget(blur1TextureTarget);
|
|
189
|
-
blurShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
|
|
190
|
-
fsQuad.render(renderer, blurShader);
|
|
191
|
-
|
|
192
|
-
//四次描边
|
|
193
|
-
renderer.setRenderTarget(blur2TextureTarget);
|
|
194
|
-
blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
|
|
195
|
-
fsQuad.render(renderer, blurShader);
|
|
196
|
-
|
|
197
|
-
// 还原帧缓冲区 减去原始纹理保留描边
|
|
198
|
-
renderer.setRenderTarget(originRenderTarget);
|
|
199
|
-
filterSelectShader.uniforms.selectTexture.value = selectTextureTarget.texture;
|
|
200
|
-
filterSelectShader.uniforms.blurTexture.value = blur2TextureTarget.texture;
|
|
201
|
-
filterSelectShader.blending = NormalBlending; // 与有的纹理融合计算 保留前面通道传递下来的纹理
|
|
202
|
-
fsQuad.render(renderer, filterSelectShader);
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
// 调试代码
|
|
206
|
-
// renderer.setRenderTarget(null);
|
|
207
|
-
// renderer.clearDepth();
|
|
208
|
-
// copyShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
|
|
209
|
-
// fsQuad.render(renderer, copyShader);
|
|
210
|
-
// return;
|
|
211
|
-
}
|
package/lib/threeLoader.d.ts
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { EventDispatcher, Texture, TextureLoader } from "three";
|
|
2
|
-
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
|
|
3
|
-
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
|
4
|
-
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
|
|
5
|
-
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
|
|
6
|
-
declare class ThreeLoader extends EventDispatcher {
|
|
7
|
-
constructor();
|
|
8
|
-
anisotropy: number;
|
|
9
|
-
setAnisotropy(v: number): void;
|
|
10
|
-
textureMap: Map<string, Texture>;
|
|
11
|
-
textureLoader: TextureLoader;
|
|
12
|
-
getTexture(src: string): Texture;
|
|
13
|
-
fbxLoader: FBXLoader;
|
|
14
|
-
objLoader: OBJLoader;
|
|
15
|
-
mtlLoader: MTLLoader;
|
|
16
|
-
gltfLoader: GLTFLoader;
|
|
17
|
-
onload: boolean;
|
|
18
|
-
}
|
|
19
|
-
declare const threeLoader: ThreeLoader;
|
|
20
|
-
export default threeLoader;
|
package/lib/threeLoader.js
DELETED
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* @Author: xiaosihan
|
|
3
|
-
* @Date: 2022-04-07 16:42:26
|
|
4
|
-
* @Last Modified by: xiaosihan
|
|
5
|
-
* @Last Modified time: 2023-03-30 10:52:27
|
|
6
|
-
*/
|
|
7
|
-
import { DefaultLoadingManager, EventDispatcher, RepeatWrapping, TextureLoader, VideoTexture } from "three";
|
|
8
|
-
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
|
|
9
|
-
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
|
10
|
-
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
|
|
11
|
-
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
|
|
12
|
-
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
|
|
13
|
-
// 引入静态资源
|
|
14
|
-
//@ts-ignore
|
|
15
|
-
import dracoWasmWrapperJS from "./draco/draco_wasm_wrapper.js?url";
|
|
16
|
-
//@ts-ignore
|
|
17
|
-
import dracoDecoderJS from "./draco/draco_decoder.js?url";
|
|
18
|
-
//@ts-ignore
|
|
19
|
-
import dracoDecoderWASM from "./draco/draco_decoder.wasm?url";
|
|
20
|
-
// 加载器
|
|
21
|
-
class ThreeLoader extends EventDispatcher {
|
|
22
|
-
constructor() {
|
|
23
|
-
super();
|
|
24
|
-
DefaultLoadingManager.onStart = () => {
|
|
25
|
-
this.onload = false;
|
|
26
|
-
};
|
|
27
|
-
// 有资源加载完成时通知渲染器
|
|
28
|
-
DefaultLoadingManager.onProgress = () => {
|
|
29
|
-
this.dispatchEvent({ type: "progress" });
|
|
30
|
-
};
|
|
31
|
-
DefaultLoadingManager.onLoad = () => {
|
|
32
|
-
this.onload = true;
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
// 各向异性
|
|
36
|
-
anisotropy = 1;
|
|
37
|
-
// 设置各向异性 由渲染器来调用并设置
|
|
38
|
-
setAnisotropy(v) {
|
|
39
|
-
this.anisotropy = v;
|
|
40
|
-
}
|
|
41
|
-
;
|
|
42
|
-
// 纹理对向缓存
|
|
43
|
-
textureMap = new Map();
|
|
44
|
-
// 纹理加载器
|
|
45
|
-
textureLoader = new TextureLoader();
|
|
46
|
-
// 获取地址对应的单例纹理对象
|
|
47
|
-
getTexture(src) {
|
|
48
|
-
let texture = this.textureMap.get(src);
|
|
49
|
-
if (!texture) {
|
|
50
|
-
if (/\.mp4$/.test(src)) {
|
|
51
|
-
const videoDom = document.createElement("video");
|
|
52
|
-
videoDom.autoplay = true;
|
|
53
|
-
videoDom.loop = true;
|
|
54
|
-
videoDom.muted = true;
|
|
55
|
-
videoDom.preload = "auto";
|
|
56
|
-
videoDom.playsInline = true;
|
|
57
|
-
videoDom.src = src;
|
|
58
|
-
document.addEventListener("pointerup", () => {
|
|
59
|
-
videoDom.pause();
|
|
60
|
-
videoDom.play();
|
|
61
|
-
});
|
|
62
|
-
texture = new VideoTexture(videoDom);
|
|
63
|
-
}
|
|
64
|
-
else {
|
|
65
|
-
texture = this.textureLoader.load(src, tex => {
|
|
66
|
-
tex.image.crossOrigin = "anonymous";
|
|
67
|
-
});
|
|
68
|
-
}
|
|
69
|
-
this.textureMap.set(src, texture);
|
|
70
|
-
}
|
|
71
|
-
texture.wrapS = texture.wrapT = RepeatWrapping;
|
|
72
|
-
texture.anisotropy = this.anisotropy;
|
|
73
|
-
return texture;
|
|
74
|
-
}
|
|
75
|
-
;
|
|
76
|
-
// fbx模型加载器
|
|
77
|
-
fbxLoader = new FBXLoader();
|
|
78
|
-
//obj 加载器
|
|
79
|
-
objLoader = new OBJLoader();
|
|
80
|
-
// 材质加载器
|
|
81
|
-
mtlLoader = new MTLLoader();
|
|
82
|
-
// gltf 加载器
|
|
83
|
-
gltfLoader = (() => {
|
|
84
|
-
const loader = new GLTFLoader();
|
|
85
|
-
const dracoLoader = new class ThreeBaseDRACOLoader extends DRACOLoader {
|
|
86
|
-
_loadLibrary(url, responseType) {
|
|
87
|
-
//@ts-ignore
|
|
88
|
-
let urlConf = (process.env.NODE_ENV === "development") ? {
|
|
89
|
-
"draco_decoder.js": "draco_decoder.js",
|
|
90
|
-
"draco_wasm_wrapper.js": "draco_wasm_wrapper.js",
|
|
91
|
-
"draco_decoder.wasm": "draco_decoder.wasm"
|
|
92
|
-
} : {
|
|
93
|
-
"draco_decoder.js": dracoWasmWrapperJS,
|
|
94
|
-
"draco_wasm_wrapper.js": dracoDecoderJS,
|
|
95
|
-
"draco_decoder.wasm": dracoDecoderWASM
|
|
96
|
-
};
|
|
97
|
-
//@ts-ignore
|
|
98
|
-
return super._loadLibrary(urlConf[url], responseType);
|
|
99
|
-
}
|
|
100
|
-
}();
|
|
101
|
-
//@ts-ignore
|
|
102
|
-
dracoLoader.setDecoderPath((process.env.NODE_ENV === "development") ? '/node_modules/three/examples/js/libs/draco/' : '');
|
|
103
|
-
loader.setDRACOLoader(dracoLoader);
|
|
104
|
-
return loader;
|
|
105
|
-
})();
|
|
106
|
-
// 是否加载完成
|
|
107
|
-
onload = true;
|
|
108
|
-
}
|
|
109
|
-
const threeLoader = new ThreeLoader();
|
|
110
|
-
export default threeLoader;
|
package/lib/threeLoader.ts
DELETED
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* @Author: xiaosihan
|
|
3
|
-
* @Date: 2022-04-07 16:42:26
|
|
4
|
-
* @Last Modified by: xiaosihan
|
|
5
|
-
* @Last Modified time: 2023-03-30 10:52:27
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
import { DefaultLoadingManager, EventDispatcher, RepeatWrapping, Texture, TextureLoader, VideoTexture } from "three";
|
|
9
|
-
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
|
|
10
|
-
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
|
11
|
-
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
|
|
12
|
-
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
|
|
13
|
-
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
|
|
14
|
-
|
|
15
|
-
// 引入静态资源
|
|
16
|
-
//@ts-ignore
|
|
17
|
-
import dracoWasmWrapperJS from "./draco/draco_wasm_wrapper.js?url";
|
|
18
|
-
//@ts-ignore
|
|
19
|
-
import dracoDecoderJS from "./draco/draco_decoder.js?url";
|
|
20
|
-
//@ts-ignore
|
|
21
|
-
import dracoDecoderWASM from "./draco/draco_decoder.wasm?url";
|
|
22
|
-
|
|
23
|
-
// 加载器
|
|
24
|
-
class ThreeLoader extends EventDispatcher {
|
|
25
|
-
|
|
26
|
-
constructor() {
|
|
27
|
-
super();
|
|
28
|
-
|
|
29
|
-
DefaultLoadingManager.onStart = () => {
|
|
30
|
-
this.onload = false;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
// 有资源加载完成时通知渲染器
|
|
34
|
-
DefaultLoadingManager.onProgress = () => {
|
|
35
|
-
this.dispatchEvent({ type: "progress" });
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
DefaultLoadingManager.onLoad = () => {
|
|
39
|
-
this.onload = true;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
// 各向异性
|
|
44
|
-
anisotropy = 1;
|
|
45
|
-
|
|
46
|
-
// 设置各向异性 由渲染器来调用并设置
|
|
47
|
-
setAnisotropy(v: number) {
|
|
48
|
-
this.anisotropy = v;
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
// 纹理对向缓存
|
|
52
|
-
textureMap = new Map() as Map<string, Texture>;
|
|
53
|
-
|
|
54
|
-
// 纹理加载器
|
|
55
|
-
textureLoader = new TextureLoader();
|
|
56
|
-
|
|
57
|
-
// 获取地址对应的单例纹理对象
|
|
58
|
-
getTexture(src: string) {
|
|
59
|
-
|
|
60
|
-
let texture = this.textureMap.get(src);
|
|
61
|
-
|
|
62
|
-
if (!texture) {
|
|
63
|
-
if (/\.mp4$/.test(src)) {
|
|
64
|
-
const videoDom = document.createElement("video");
|
|
65
|
-
videoDom.autoplay = true;
|
|
66
|
-
videoDom.loop = true;
|
|
67
|
-
videoDom.muted = true;
|
|
68
|
-
videoDom.preload = "auto";
|
|
69
|
-
videoDom.playsInline = true;
|
|
70
|
-
videoDom.src = src;
|
|
71
|
-
document.addEventListener("pointerup", () => {
|
|
72
|
-
videoDom.pause();
|
|
73
|
-
videoDom.play();
|
|
74
|
-
});
|
|
75
|
-
texture = new VideoTexture(videoDom);
|
|
76
|
-
} else {
|
|
77
|
-
|
|
78
|
-
texture = this.textureLoader.load(src, tex => {
|
|
79
|
-
tex.image.crossOrigin = "anonymous";
|
|
80
|
-
});
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
this.textureMap.set(src, texture);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
texture.wrapS = texture.wrapT = RepeatWrapping;
|
|
87
|
-
|
|
88
|
-
texture.anisotropy = this.anisotropy;
|
|
89
|
-
|
|
90
|
-
return texture as Texture;
|
|
91
|
-
};
|
|
92
|
-
|
|
93
|
-
// fbx模型加载器
|
|
94
|
-
fbxLoader = new FBXLoader();
|
|
95
|
-
|
|
96
|
-
//obj 加载器
|
|
97
|
-
objLoader = new OBJLoader();
|
|
98
|
-
|
|
99
|
-
// 材质加载器
|
|
100
|
-
mtlLoader = new MTLLoader();
|
|
101
|
-
|
|
102
|
-
// gltf 加载器
|
|
103
|
-
gltfLoader = (() => {
|
|
104
|
-
const loader = new GLTFLoader();
|
|
105
|
-
const dracoLoader = new class ThreeBaseDRACOLoader extends DRACOLoader {
|
|
106
|
-
|
|
107
|
-
_loadLibrary(url: string, responseType: string) {
|
|
108
|
-
//@ts-ignore
|
|
109
|
-
let urlConf = (process.env.NODE_ENV === "development") ? {
|
|
110
|
-
"draco_decoder.js": "draco_decoder.js",
|
|
111
|
-
"draco_wasm_wrapper.js": "draco_wasm_wrapper.js",
|
|
112
|
-
"draco_decoder.wasm": "draco_decoder.wasm"
|
|
113
|
-
} : {
|
|
114
|
-
"draco_decoder.js": dracoWasmWrapperJS,
|
|
115
|
-
"draco_wasm_wrapper.js": dracoDecoderJS,
|
|
116
|
-
"draco_decoder.wasm": dracoDecoderWASM
|
|
117
|
-
}
|
|
118
|
-
//@ts-ignore
|
|
119
|
-
return super._loadLibrary(urlConf[url], responseType);
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
}();
|
|
123
|
-
//@ts-ignore
|
|
124
|
-
dracoLoader.setDecoderPath((process.env.NODE_ENV === "development") ? '/node_modules/three/examples/js/libs/draco/' : '');
|
|
125
|
-
loader.setDRACOLoader(dracoLoader);
|
|
126
|
-
return loader;
|
|
127
|
-
})()
|
|
128
|
-
|
|
129
|
-
// 是否加载完成
|
|
130
|
-
onload = true;
|
|
131
|
-
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
const threeLoader = new ThreeLoader();
|
|
135
|
-
export default threeLoader;
|
|
136
|
-
|
package/lib/threeUtils.d.ts
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { Box3, BufferGeometry, Clock, EventDispatcher, Object3D, Vector3 } from "three";
|
|
2
|
-
declare class ThreeUtils extends EventDispatcher {
|
|
3
|
-
constructor();
|
|
4
|
-
isProd: boolean;
|
|
5
|
-
isDev: boolean;
|
|
6
|
-
_timeTemp: number;
|
|
7
|
-
_accumulate: number;
|
|
8
|
-
_box3: Box3;
|
|
9
|
-
_size: Vector3;
|
|
10
|
-
_center: Vector3;
|
|
11
|
-
_clock: Clock;
|
|
12
|
-
requestAnimationFrame(): void;
|
|
13
|
-
private _keepZoomDoms;
|
|
14
|
-
/**
|
|
15
|
-
*计算需要保持比例的元素
|
|
16
|
-
*/
|
|
17
|
-
private _computerDomZoom;
|
|
18
|
-
/**
|
|
19
|
-
* dom元素保持比例
|
|
20
|
-
*/
|
|
21
|
-
keepZoom(dom: HTMLElement | null, width?: number, height?: number): void;
|
|
22
|
-
workList: Array<() => void>;
|
|
23
|
-
clock: Clock;
|
|
24
|
-
/**
|
|
25
|
-
* @param {() => void} [callback]
|
|
26
|
-
* @param {boolean} [first=true] 需要优先执行
|
|
27
|
-
*/
|
|
28
|
-
addWork(work?: () => void, first?: boolean): void;
|
|
29
|
-
/**
|
|
30
|
-
*判断一个元素是否在页面上
|
|
31
|
-
*/
|
|
32
|
-
inDocument(dom: ParentNode | null): boolean;
|
|
33
|
-
getCenter(object3d: Object3D | BufferGeometry): Vector3;
|
|
34
|
-
getSize(object3d: Object3D | BufferGeometry): Vector3;
|
|
35
|
-
alignBottom(object3d: Object3D | BufferGeometry, y?: number): void;
|
|
36
|
-
centerObject3D(object3d: Object3D | BufferGeometry): void;
|
|
37
|
-
center(object3d: Object3D | BufferGeometry): void;
|
|
38
|
-
scaleTo(object3d: Object3D | BufferGeometry, size?: number): void;
|
|
39
|
-
}
|
|
40
|
-
declare const threeUtils: ThreeUtils;
|
|
41
|
-
export default threeUtils;
|
package/lib/threeUtils.js
DELETED
|
@@ -1,179 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* @Author: xiaosihan
|
|
3
|
-
* @Date: 2022-02-24 22:49:42
|
|
4
|
-
* @Last Modified by: xiaosihan
|
|
5
|
-
* @Last Modified time: 2023-05-03 00:36:18
|
|
6
|
-
*/
|
|
7
|
-
import { Box3, BufferGeometry, Clock, EventDispatcher, Object3D, Vector3 } from "three";
|
|
8
|
-
class ThreeUtils extends EventDispatcher {
|
|
9
|
-
constructor() {
|
|
10
|
-
super();
|
|
11
|
-
this.requestAnimationFrame();
|
|
12
|
-
}
|
|
13
|
-
//@ts-ignore
|
|
14
|
-
isProd = (process.env.NODE_ENV === "production");
|
|
15
|
-
//@ts-ignore
|
|
16
|
-
isDev = (process.env.NODE_ENV === "development");
|
|
17
|
-
_timeTemp = performance.now();
|
|
18
|
-
_accumulate = 0; // 事件分发次数
|
|
19
|
-
_box3 = new Box3();
|
|
20
|
-
_size = new Vector3();
|
|
21
|
-
_center = new Vector3();
|
|
22
|
-
_clock = new Clock();
|
|
23
|
-
requestAnimationFrame() {
|
|
24
|
-
this._accumulate += 1;
|
|
25
|
-
const timeTemp = this._timeTemp = performance.now();
|
|
26
|
-
this.dispatchEvent({
|
|
27
|
-
type: "requestAnimationFrame",
|
|
28
|
-
timeTemp,
|
|
29
|
-
accumulate: this._accumulate
|
|
30
|
-
});
|
|
31
|
-
this._computerDomZoom();
|
|
32
|
-
//执行一个计划任务
|
|
33
|
-
let work = this.workList.splice(0, 1)[0];
|
|
34
|
-
work && work();
|
|
35
|
-
setTimeout(() => {
|
|
36
|
-
this.requestAnimationFrame();
|
|
37
|
-
}, 45 - this._clock.getDelta());
|
|
38
|
-
}
|
|
39
|
-
// 需要保持宽高比的元素列表
|
|
40
|
-
_keepZoomDoms = [];
|
|
41
|
-
/**
|
|
42
|
-
*计算需要保持比例的元素
|
|
43
|
-
*/
|
|
44
|
-
_computerDomZoom() {
|
|
45
|
-
//1. 踢除没有出现在页面上的 dom 元素
|
|
46
|
-
this._keepZoomDoms = this._keepZoomDoms.filter(l => this.inDocument(l.dom));
|
|
47
|
-
//2.设置dom的缩放值样式
|
|
48
|
-
this._keepZoomDoms.map((item, i) => {
|
|
49
|
-
let parentDom = item.dom.parentNode;
|
|
50
|
-
let scale = Math.min(parentDom.clientWidth / item.width, parentDom.clientHeight / item.height);
|
|
51
|
-
Object.assign(item.dom.style, {
|
|
52
|
-
position: "absolute",
|
|
53
|
-
top: "50%",
|
|
54
|
-
left: "50%",
|
|
55
|
-
transform: `translate(-50%, -50%) scale(${scale})`,
|
|
56
|
-
width: `${item.width}px`,
|
|
57
|
-
height: `${item.height}px`
|
|
58
|
-
});
|
|
59
|
-
});
|
|
60
|
-
}
|
|
61
|
-
/**
|
|
62
|
-
* dom元素保持比例
|
|
63
|
-
*/
|
|
64
|
-
keepZoom(dom, width = 1920, height = 1080) {
|
|
65
|
-
if (dom) {
|
|
66
|
-
// 去掉相同的dom存储的信息
|
|
67
|
-
this._keepZoomDoms = this._keepZoomDoms.filter(l => l.dom !== dom);
|
|
68
|
-
// 把配置加入到列表中
|
|
69
|
-
this._keepZoomDoms.push({ dom, width, height });
|
|
70
|
-
dom.dataset.a = "这个元素缩放比例由 threeUtils.keepZoom 方法设置";
|
|
71
|
-
this._computerDomZoom();
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
workList = [];
|
|
75
|
-
// 时钟对象
|
|
76
|
-
clock = new Clock();
|
|
77
|
-
// 按照任务队列依次执行计划任务 性能优化
|
|
78
|
-
/**
|
|
79
|
-
* @param {() => void} [callback]
|
|
80
|
-
* @param {boolean} [first=true] 需要优先执行
|
|
81
|
-
*/
|
|
82
|
-
addWork(work, first = false) {
|
|
83
|
-
// 加入任务队列
|
|
84
|
-
if (work && !this.workList.includes(work)) {
|
|
85
|
-
if (first) {
|
|
86
|
-
this.workList.splice(1, 0, work); // 优先执行的任务回调
|
|
87
|
-
}
|
|
88
|
-
else {
|
|
89
|
-
this.workList.push(work);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
/**
|
|
94
|
-
*判断一个元素是否在页面上
|
|
95
|
-
*/
|
|
96
|
-
inDocument(dom) {
|
|
97
|
-
if (dom === null) {
|
|
98
|
-
return false;
|
|
99
|
-
}
|
|
100
|
-
else if (dom.parentNode === null) {
|
|
101
|
-
return false;
|
|
102
|
-
}
|
|
103
|
-
else if (dom.parentNode === document) {
|
|
104
|
-
return true;
|
|
105
|
-
}
|
|
106
|
-
else {
|
|
107
|
-
return this.inDocument(dom.parentNode);
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
// 获取中心点
|
|
111
|
-
getCenter(object3d) {
|
|
112
|
-
if (object3d instanceof Object3D) {
|
|
113
|
-
this._box3.setFromObject(object3d);
|
|
114
|
-
this._box3.getCenter(this._center);
|
|
115
|
-
}
|
|
116
|
-
else if (object3d instanceof BufferGeometry) {
|
|
117
|
-
object3d.computeBoundingBox();
|
|
118
|
-
object3d.boundingBox.getCenter(this._center);
|
|
119
|
-
}
|
|
120
|
-
return this._center;
|
|
121
|
-
}
|
|
122
|
-
// 获取模型大小
|
|
123
|
-
getSize(object3d) {
|
|
124
|
-
if (object3d instanceof Object3D) {
|
|
125
|
-
this._box3.setFromObject(object3d);
|
|
126
|
-
this._box3.getSize(this._size);
|
|
127
|
-
}
|
|
128
|
-
else if (object3d instanceof BufferGeometry) {
|
|
129
|
-
object3d.computeBoundingBox();
|
|
130
|
-
object3d.boundingBox.getSize(this._size);
|
|
131
|
-
}
|
|
132
|
-
return this._size;
|
|
133
|
-
}
|
|
134
|
-
// 模型对齐底面
|
|
135
|
-
alignBottom(object3d, y = 0) {
|
|
136
|
-
if (object3d instanceof Object3D) {
|
|
137
|
-
this._box3.setFromObject(object3d);
|
|
138
|
-
this._box3.getCenter(this._center);
|
|
139
|
-
this._box3.getSize(this._size);
|
|
140
|
-
object3d.position.y -= (this._center.y - (this._size.y * 0.5));
|
|
141
|
-
object3d.position.y += y;
|
|
142
|
-
object3d.updateMatrixWorld(true);
|
|
143
|
-
}
|
|
144
|
-
else if (object3d instanceof BufferGeometry) {
|
|
145
|
-
object3d.computeBoundingBox();
|
|
146
|
-
object3d.translate(0, -object3d.boundingBox.min.y + y, 0);
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
// 居中对象
|
|
150
|
-
centerObject3D(object3d) {
|
|
151
|
-
if (object3d instanceof Object3D) {
|
|
152
|
-
this._box3.setFromObject(object3d);
|
|
153
|
-
this._box3.getCenter(this._center);
|
|
154
|
-
object3d.position.sub(this._center);
|
|
155
|
-
object3d.updateMatrixWorld(true);
|
|
156
|
-
}
|
|
157
|
-
else if (object3d instanceof BufferGeometry) {
|
|
158
|
-
object3d.center();
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
//居中对象
|
|
162
|
-
center(object3d) {
|
|
163
|
-
this.centerObject3D(object3d);
|
|
164
|
-
}
|
|
165
|
-
//缩放至指定大小
|
|
166
|
-
scaleTo(object3d, size = 1) {
|
|
167
|
-
const originSize = this.getSize(object3d);
|
|
168
|
-
const scale = size / Math.max(originSize.x, originSize.y, originSize.z);
|
|
169
|
-
if (object3d instanceof Object3D) {
|
|
170
|
-
object3d.scale.multiplyScalar(scale);
|
|
171
|
-
object3d.updateMatrixWorld(true);
|
|
172
|
-
}
|
|
173
|
-
else if (object3d instanceof BufferGeometry) {
|
|
174
|
-
object3d.scale(scale, scale, scale);
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
const threeUtils = new ThreeUtils();
|
|
179
|
-
export default threeUtils;
|