three-base 2.0.19 → 2.0.21
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/ApngTexture.ts +1 -1
- package/ApngTextureManage.ts +1 -1
- package/ExtrudeMesh.ts +1 -1
- package/KeyFrameAnimation.ts +1 -1
- package/Mirror.d.ts +25 -0
- package/Mirror.js +197 -0
- package/Mirror.ts +255 -0
- package/PlaneModal1/PlaneModal1.d.ts +1 -1
- package/PlaneModal1/PlaneModal1.ts +1 -1
- package/PlaneText.d.ts +12 -5
- package/PlaneWithHtml.ts +1 -1
- package/SpriteModal1/SpriteModal1.d.ts +2 -2
- package/SpriteModal1/SpriteModal1.ts +1 -1
- package/SpriteWithHtml.ts +1 -1
- package/Text3D/Text3D.ts +1 -1
- package/ThreeBase.d.ts +0 -1
- package/ThreeBase.js +47 -41
- package/ThreeBase.ts +55 -45
- package/ThreeMouse.ts +14 -14
- package/keyContorls.d.ts +2 -2
- package/keyContorls.ts +5 -5
- package/package.json +6 -2
- package/pass/FullScreenQuad.d.ts +1 -1
- package/pass/glow_pass.js +1 -0
- package/pass/glow_pass.ts +1 -0
- package/pass/stroke_pass.js +1 -0
- package/pass/stroke_pass.ts +1 -0
- package/threeLoader.d.ts +4 -2
- package/threeLoader.js +3 -0
- package/threeLoader.ts +5 -1
- package/threeUtils.ts +1 -1
package/ApngTexture.ts
CHANGED
package/ApngTextureManage.ts
CHANGED
|
@@ -18,7 +18,7 @@ class apngTextureManage {
|
|
|
18
18
|
// 初始化定时更新时间戳
|
|
19
19
|
if (apngTextureManage.isInit) {
|
|
20
20
|
apngTextureManage.isInit = false;
|
|
21
|
-
threeUtils.addEventListener("requestAnimationFrame5000", (e) => {
|
|
21
|
+
threeUtils.addEventListener("requestAnimationFrame5000", (e: any) => {
|
|
22
22
|
apngTextureManage.TimeTemp = e.timeTemp;
|
|
23
23
|
});
|
|
24
24
|
}
|
package/ExtrudeMesh.ts
CHANGED
package/KeyFrameAnimation.ts
CHANGED
|
@@ -109,7 +109,7 @@ export default class KeyframeAnimation extends Object3D {
|
|
|
109
109
|
(endKeyframe.rotation.z - startKeyframe.rotation.z) * progress + startKeyframe.rotation.z,
|
|
110
110
|
);
|
|
111
111
|
|
|
112
|
-
this.dispatchEvent({ type: "update" });
|
|
112
|
+
this.dispatchEvent({ type: "update" } as never);
|
|
113
113
|
}
|
|
114
114
|
|
|
115
115
|
//更新关键帧的实例矩阵
|
package/Mirror.d.ts
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { BufferGeometry, Camera, Group, Material, Matrix4, Mesh, PerspectiveCamera, Plane, PlaneGeometry, Scene, ShaderMaterial, Vector3, Vector4, WebGLRenderTarget, WebGLRenderer } from "three";
|
|
2
|
+
export default class Mirror extends Mesh {
|
|
3
|
+
constructor(geometry?: BufferGeometry);
|
|
4
|
+
static geometry: PlaneGeometry;
|
|
5
|
+
isReflector: boolean;
|
|
6
|
+
type: string;
|
|
7
|
+
camera: PerspectiveCamera;
|
|
8
|
+
reflectorPlane: Plane;
|
|
9
|
+
normal: Vector3;
|
|
10
|
+
reflectorWorldPosition: Vector3;
|
|
11
|
+
cameraWorldPosition: Vector3;
|
|
12
|
+
rotationMatrix: Matrix4;
|
|
13
|
+
lookAtPosition: Vector3;
|
|
14
|
+
clipPlane: Vector4;
|
|
15
|
+
view: Vector3;
|
|
16
|
+
target: Vector3;
|
|
17
|
+
q: Vector4;
|
|
18
|
+
textureMatrix: Matrix4;
|
|
19
|
+
virtualCamera: PerspectiveCamera;
|
|
20
|
+
renderTarget: WebGLRenderTarget<import("three").Texture>;
|
|
21
|
+
material: ShaderMaterial;
|
|
22
|
+
onBeforeRender: (renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry, material: Material, group: Group) => void;
|
|
23
|
+
getRenderTarget(): WebGLRenderTarget<import("three").Texture>;
|
|
24
|
+
dispose(): void;
|
|
25
|
+
}
|
package/Mirror.js
ADDED
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @Author: xiaosihan
|
|
3
|
+
* @Date: 2023-08-04 17:17:15
|
|
4
|
+
* @Last Modified by: xiaosihan
|
|
5
|
+
* @Last Modified time: 2023-08-04 20:54:29
|
|
6
|
+
*/
|
|
7
|
+
import { Color, DoubleSide, HalfFloatType, Matrix4, Mesh, PerspectiveCamera, Plane, PlaneGeometry, ShaderMaterial, Vector3, Vector4, WebGLRenderTarget } from "three";
|
|
8
|
+
// 镜子模型
|
|
9
|
+
export default class Mirror extends Mesh {
|
|
10
|
+
constructor(geometry = Mirror.geometry) {
|
|
11
|
+
super(geometry);
|
|
12
|
+
}
|
|
13
|
+
// 正方形网格
|
|
14
|
+
static geometry = (() => {
|
|
15
|
+
const geometry = new PlaneGeometry(10, 10, 1, 1);
|
|
16
|
+
return geometry;
|
|
17
|
+
})();
|
|
18
|
+
isReflector = true;
|
|
19
|
+
type = 'Reflector';
|
|
20
|
+
camera = new PerspectiveCamera();
|
|
21
|
+
reflectorPlane = new Plane();
|
|
22
|
+
normal = new Vector3();
|
|
23
|
+
reflectorWorldPosition = new Vector3();
|
|
24
|
+
cameraWorldPosition = new Vector3();
|
|
25
|
+
rotationMatrix = new Matrix4();
|
|
26
|
+
lookAtPosition = new Vector3(0, 0, -1);
|
|
27
|
+
clipPlane = new Vector4();
|
|
28
|
+
view = new Vector3();
|
|
29
|
+
target = new Vector3();
|
|
30
|
+
q = new Vector4();
|
|
31
|
+
textureMatrix = new Matrix4();
|
|
32
|
+
virtualCamera = this.camera;
|
|
33
|
+
renderTarget = new WebGLRenderTarget(2048, 2048, { samples: 0, type: HalfFloatType });
|
|
34
|
+
material = new ShaderMaterial({
|
|
35
|
+
uniforms: {
|
|
36
|
+
'color': {
|
|
37
|
+
value: new Color("#b6b6b6")
|
|
38
|
+
},
|
|
39
|
+
'tDiffuse': {
|
|
40
|
+
value: this.renderTarget.texture
|
|
41
|
+
},
|
|
42
|
+
'textureMatrix': {
|
|
43
|
+
value: this.textureMatrix
|
|
44
|
+
},
|
|
45
|
+
blurAmount: {
|
|
46
|
+
value: 0.5
|
|
47
|
+
} // 模糊程度,可以根据需求调整
|
|
48
|
+
},
|
|
49
|
+
vertexShader: /* glsl */ `
|
|
50
|
+
uniform mat4 textureMatrix;
|
|
51
|
+
varying vec4 vUv;
|
|
52
|
+
|
|
53
|
+
#include <common>
|
|
54
|
+
#include <logdepthbuf_pars_vertex>
|
|
55
|
+
|
|
56
|
+
void main() {
|
|
57
|
+
|
|
58
|
+
vUv = textureMatrix * vec4( position, 1.0 );
|
|
59
|
+
|
|
60
|
+
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
|
|
61
|
+
|
|
62
|
+
#include <logdepthbuf_vertex>
|
|
63
|
+
|
|
64
|
+
}`,
|
|
65
|
+
fragmentShader: /* glsl */ `
|
|
66
|
+
uniform vec3 color;
|
|
67
|
+
uniform sampler2D tDiffuse;
|
|
68
|
+
varying vec4 vUv;
|
|
69
|
+
uniform float blurAmount;
|
|
70
|
+
|
|
71
|
+
#include <logdepthbuf_pars_fragment>
|
|
72
|
+
|
|
73
|
+
float blendOverlay( float base, float blend ) {
|
|
74
|
+
|
|
75
|
+
return( base < 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );
|
|
76
|
+
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
vec3 blendOverlay( vec3 base, vec3 blend ) {
|
|
80
|
+
|
|
81
|
+
return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );
|
|
82
|
+
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
void main() {
|
|
86
|
+
|
|
87
|
+
#include <logdepthbuf_fragment>
|
|
88
|
+
|
|
89
|
+
vec2 texelSize = 1.0 / vec2(1024,1024);
|
|
90
|
+
vec4 fragColor = vec4(0.0);
|
|
91
|
+
|
|
92
|
+
for (float offsetX = -blurAmount; offsetX <= blurAmount; offsetX += texelSize.x) {
|
|
93
|
+
for (float offsetY = -blurAmount; offsetY <= blurAmount; offsetY += texelSize.y) {
|
|
94
|
+
// fragColor += texture2DProj(tDiffuse, vUv + vec4(offsetX, offsetY, 0.0, 0.0) * texelSize);
|
|
95
|
+
fragColor += texture2DProj(tDiffuse, vUv + vec4(offsetX * texelSize.x, offsetY * texelSize.y, 0.0, 0.0) );
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
// fragColor /= pow(2.0 * blurAmount + 1.0, 2.0);
|
|
100
|
+
// gl_FragColor = color;
|
|
101
|
+
|
|
102
|
+
fragColor = texture2DProj( tDiffuse, vUv );
|
|
103
|
+
gl_FragColor = vec4( blendOverlay( fragColor.rgb, color ), 1.0 );
|
|
104
|
+
|
|
105
|
+
#include <tonemapping_fragment>
|
|
106
|
+
#include <colorspace_fragment>
|
|
107
|
+
}`,
|
|
108
|
+
depthTest: true,
|
|
109
|
+
depthWrite: true,
|
|
110
|
+
transparent: true,
|
|
111
|
+
side: DoubleSide
|
|
112
|
+
});
|
|
113
|
+
onBeforeRender = (renderer, scene, camera, geometry, material, group) => {
|
|
114
|
+
this.reflectorWorldPosition.setFromMatrixPosition(this.matrixWorld);
|
|
115
|
+
this.cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
|
|
116
|
+
this.rotationMatrix.extractRotation(this.matrixWorld);
|
|
117
|
+
this.normal.set(0, 0, 1);
|
|
118
|
+
this.normal.applyMatrix4(this.rotationMatrix);
|
|
119
|
+
this.view.subVectors(this.reflectorWorldPosition, this.cameraWorldPosition);
|
|
120
|
+
// Avoid rendering when reflector is facing away
|
|
121
|
+
if (this.view.dot(this.normal) > 0) {
|
|
122
|
+
this.normal.set(0, 0, -1);
|
|
123
|
+
}
|
|
124
|
+
;
|
|
125
|
+
this.view.reflect(this.normal).negate();
|
|
126
|
+
this.view.add(this.reflectorWorldPosition);
|
|
127
|
+
this.rotationMatrix.extractRotation(camera.matrixWorld);
|
|
128
|
+
this.lookAtPosition.set(0, 0, -1);
|
|
129
|
+
this.lookAtPosition.applyMatrix4(this.rotationMatrix);
|
|
130
|
+
this.lookAtPosition.add(this.cameraWorldPosition);
|
|
131
|
+
this.target.subVectors(this.reflectorWorldPosition, this.lookAtPosition);
|
|
132
|
+
this.target.reflect(this.normal).negate();
|
|
133
|
+
this.target.add(this.reflectorWorldPosition);
|
|
134
|
+
this.virtualCamera.position.copy(this.view);
|
|
135
|
+
this.virtualCamera.up.set(0, 1, 0);
|
|
136
|
+
this.virtualCamera.up.applyMatrix4(this.rotationMatrix);
|
|
137
|
+
this.virtualCamera.up.reflect(this.normal);
|
|
138
|
+
this.virtualCamera.lookAt(this.target);
|
|
139
|
+
this.virtualCamera.far = this.camera.far; // Used in WebGLBackground
|
|
140
|
+
this.virtualCamera.updateMatrixWorld();
|
|
141
|
+
this.virtualCamera.projectionMatrix.copy(camera.projectionMatrix);
|
|
142
|
+
// Update the texture matrix
|
|
143
|
+
this.textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0);
|
|
144
|
+
this.textureMatrix.multiply(this.virtualCamera.projectionMatrix);
|
|
145
|
+
this.textureMatrix.multiply(this.virtualCamera.matrixWorldInverse);
|
|
146
|
+
this.textureMatrix.multiply(this.matrixWorld);
|
|
147
|
+
// Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
|
|
148
|
+
// Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
|
|
149
|
+
this.reflectorPlane.setFromNormalAndCoplanarPoint(this.normal, this.reflectorWorldPosition);
|
|
150
|
+
this.reflectorPlane.applyMatrix4(this.virtualCamera.matrixWorldInverse);
|
|
151
|
+
this.clipPlane.set(this.reflectorPlane.normal.x, this.reflectorPlane.normal.y, this.reflectorPlane.normal.z, this.reflectorPlane.constant);
|
|
152
|
+
const projectionMatrix = this.virtualCamera.projectionMatrix;
|
|
153
|
+
this.q.x = (Math.sign(this.clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
|
|
154
|
+
this.q.y = (Math.sign(this.clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
|
|
155
|
+
this.q.z = -1.0;
|
|
156
|
+
this.q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14];
|
|
157
|
+
// Calculate the scaled plane vector
|
|
158
|
+
this.clipPlane.multiplyScalar(2.0 / this.clipPlane.dot(this.q));
|
|
159
|
+
// Replacing the third row of the projection matrix
|
|
160
|
+
projectionMatrix.elements[2] = this.clipPlane.x;
|
|
161
|
+
projectionMatrix.elements[6] = this.clipPlane.y;
|
|
162
|
+
projectionMatrix.elements[10] = this.clipPlane.z + 1.0 - 0.003;
|
|
163
|
+
projectionMatrix.elements[14] = this.clipPlane.w;
|
|
164
|
+
// Render
|
|
165
|
+
this.visible = false;
|
|
166
|
+
const currentRenderTarget = renderer.getRenderTarget();
|
|
167
|
+
const currentXrEnabled = renderer.xr.enabled;
|
|
168
|
+
const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
|
|
169
|
+
renderer.xr.enabled = false; // Avoid camera modification
|
|
170
|
+
renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
|
|
171
|
+
renderer.setRenderTarget(this.renderTarget);
|
|
172
|
+
renderer.state.buffers.depth.setMask(true); // make sure the depth buffer is writable so it can be properly cleared, see #18897
|
|
173
|
+
if (renderer.autoClear === false)
|
|
174
|
+
renderer.clear();
|
|
175
|
+
renderer.render(scene, this.virtualCamera);
|
|
176
|
+
renderer.xr.enabled = currentXrEnabled;
|
|
177
|
+
renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
|
|
178
|
+
renderer.setRenderTarget(currentRenderTarget);
|
|
179
|
+
// Restore viewport
|
|
180
|
+
//@ts-ignore
|
|
181
|
+
const viewport = this.camera.viewport;
|
|
182
|
+
if (viewport !== undefined) {
|
|
183
|
+
debugger;
|
|
184
|
+
renderer.state.viewport(viewport);
|
|
185
|
+
}
|
|
186
|
+
this.visible = true;
|
|
187
|
+
};
|
|
188
|
+
getRenderTarget() {
|
|
189
|
+
return this.renderTarget;
|
|
190
|
+
}
|
|
191
|
+
;
|
|
192
|
+
dispose() {
|
|
193
|
+
this.renderTarget.dispose();
|
|
194
|
+
// this.material.dispose();
|
|
195
|
+
}
|
|
196
|
+
;
|
|
197
|
+
}
|
package/Mirror.ts
ADDED
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @Author: xiaosihan
|
|
3
|
+
* @Date: 2023-08-04 17:17:15
|
|
4
|
+
* @Last Modified by: xiaosihan
|
|
5
|
+
* @Last Modified time: 2023-08-04 20:54:29
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import { BufferGeometry, Camera, Color, DoubleSide, Group, HalfFloatType, Material, Matrix4, Mesh, PerspectiveCamera, Plane, PlaneGeometry, Scene, ShaderMaterial, Vector3, Vector4, WebGLRenderTarget, WebGLRenderer } from "three";
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
// 镜子模型
|
|
12
|
+
export default class Mirror extends Mesh {
|
|
13
|
+
|
|
14
|
+
constructor(geometry: BufferGeometry = Mirror.geometry) {
|
|
15
|
+
super(geometry);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// 正方形网格
|
|
19
|
+
static geometry = (() => {
|
|
20
|
+
const geometry = new PlaneGeometry(10, 10, 1, 1);
|
|
21
|
+
return geometry;
|
|
22
|
+
})();
|
|
23
|
+
|
|
24
|
+
isReflector = true;
|
|
25
|
+
|
|
26
|
+
type = 'Reflector';
|
|
27
|
+
|
|
28
|
+
camera = new PerspectiveCamera();
|
|
29
|
+
|
|
30
|
+
reflectorPlane = new Plane();
|
|
31
|
+
normal = new Vector3();
|
|
32
|
+
reflectorWorldPosition = new Vector3();
|
|
33
|
+
cameraWorldPosition = new Vector3();
|
|
34
|
+
rotationMatrix = new Matrix4();
|
|
35
|
+
lookAtPosition = new Vector3(0, 0, - 1);
|
|
36
|
+
clipPlane = new Vector4();
|
|
37
|
+
|
|
38
|
+
view = new Vector3();
|
|
39
|
+
target = new Vector3();
|
|
40
|
+
q = new Vector4();
|
|
41
|
+
|
|
42
|
+
textureMatrix = new Matrix4();
|
|
43
|
+
virtualCamera = this.camera;
|
|
44
|
+
|
|
45
|
+
renderTarget = new WebGLRenderTarget(2048, 2048, { samples: 0, type: HalfFloatType });
|
|
46
|
+
|
|
47
|
+
material = new ShaderMaterial({
|
|
48
|
+
uniforms: {
|
|
49
|
+
'color': {
|
|
50
|
+
value: new Color("#b6b6b6")
|
|
51
|
+
},
|
|
52
|
+
|
|
53
|
+
'tDiffuse': {
|
|
54
|
+
value: this.renderTarget.texture
|
|
55
|
+
},
|
|
56
|
+
|
|
57
|
+
'textureMatrix': {
|
|
58
|
+
value: this.textureMatrix
|
|
59
|
+
},
|
|
60
|
+
blurAmount: {
|
|
61
|
+
value: 0.5
|
|
62
|
+
} // 模糊程度,可以根据需求调整
|
|
63
|
+
|
|
64
|
+
},
|
|
65
|
+
|
|
66
|
+
vertexShader: /* glsl */`
|
|
67
|
+
uniform mat4 textureMatrix;
|
|
68
|
+
varying vec4 vUv;
|
|
69
|
+
|
|
70
|
+
#include <common>
|
|
71
|
+
#include <logdepthbuf_pars_vertex>
|
|
72
|
+
|
|
73
|
+
void main() {
|
|
74
|
+
|
|
75
|
+
vUv = textureMatrix * vec4( position, 1.0 );
|
|
76
|
+
|
|
77
|
+
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
|
|
78
|
+
|
|
79
|
+
#include <logdepthbuf_vertex>
|
|
80
|
+
|
|
81
|
+
}`,
|
|
82
|
+
|
|
83
|
+
fragmentShader: /* glsl */`
|
|
84
|
+
uniform vec3 color;
|
|
85
|
+
uniform sampler2D tDiffuse;
|
|
86
|
+
varying vec4 vUv;
|
|
87
|
+
uniform float blurAmount;
|
|
88
|
+
|
|
89
|
+
#include <logdepthbuf_pars_fragment>
|
|
90
|
+
|
|
91
|
+
float blendOverlay( float base, float blend ) {
|
|
92
|
+
|
|
93
|
+
return( base < 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );
|
|
94
|
+
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
vec3 blendOverlay( vec3 base, vec3 blend ) {
|
|
98
|
+
|
|
99
|
+
return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );
|
|
100
|
+
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
void main() {
|
|
104
|
+
|
|
105
|
+
#include <logdepthbuf_fragment>
|
|
106
|
+
|
|
107
|
+
vec2 texelSize = 1.0 / vec2(1024,1024);
|
|
108
|
+
vec4 fragColor = vec4(0.0);
|
|
109
|
+
|
|
110
|
+
for (float offsetX = -blurAmount; offsetX <= blurAmount; offsetX += texelSize.x) {
|
|
111
|
+
for (float offsetY = -blurAmount; offsetY <= blurAmount; offsetY += texelSize.y) {
|
|
112
|
+
// fragColor += texture2DProj(tDiffuse, vUv + vec4(offsetX, offsetY, 0.0, 0.0) * texelSize);
|
|
113
|
+
fragColor += texture2DProj(tDiffuse, vUv + vec4(offsetX * texelSize.x, offsetY * texelSize.y, 0.0, 0.0) );
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// fragColor /= pow(2.0 * blurAmount + 1.0, 2.0);
|
|
118
|
+
// gl_FragColor = color;
|
|
119
|
+
|
|
120
|
+
fragColor = texture2DProj( tDiffuse, vUv );
|
|
121
|
+
gl_FragColor = vec4( blendOverlay( fragColor.rgb, color ), 1.0 );
|
|
122
|
+
|
|
123
|
+
#include <tonemapping_fragment>
|
|
124
|
+
#include <colorspace_fragment>
|
|
125
|
+
}`,
|
|
126
|
+
depthTest: true,
|
|
127
|
+
depthWrite: true,
|
|
128
|
+
transparent: true,
|
|
129
|
+
side: DoubleSide
|
|
130
|
+
});
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
onBeforeRender = (renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry, material: Material, group: Group) => {
|
|
134
|
+
|
|
135
|
+
this.reflectorWorldPosition.setFromMatrixPosition(this.matrixWorld);
|
|
136
|
+
this.cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
|
|
137
|
+
|
|
138
|
+
this.rotationMatrix.extractRotation(this.matrixWorld);
|
|
139
|
+
|
|
140
|
+
this.normal.set(0, 0, 1);
|
|
141
|
+
this.normal.applyMatrix4(this.rotationMatrix);
|
|
142
|
+
|
|
143
|
+
this.view.subVectors(this.reflectorWorldPosition, this.cameraWorldPosition);
|
|
144
|
+
|
|
145
|
+
// Avoid rendering when reflector is facing away
|
|
146
|
+
|
|
147
|
+
if (this.view.dot(this.normal) > 0) {
|
|
148
|
+
this.normal.set(0, 0, -1);
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
this.view.reflect(this.normal).negate();
|
|
152
|
+
this.view.add(this.reflectorWorldPosition);
|
|
153
|
+
|
|
154
|
+
this.rotationMatrix.extractRotation(camera.matrixWorld);
|
|
155
|
+
|
|
156
|
+
this.lookAtPosition.set(0, 0, - 1);
|
|
157
|
+
this.lookAtPosition.applyMatrix4(this.rotationMatrix);
|
|
158
|
+
this.lookAtPosition.add(this.cameraWorldPosition);
|
|
159
|
+
|
|
160
|
+
this.target.subVectors(this.reflectorWorldPosition, this.lookAtPosition);
|
|
161
|
+
this.target.reflect(this.normal).negate();
|
|
162
|
+
this.target.add(this.reflectorWorldPosition);
|
|
163
|
+
|
|
164
|
+
this.virtualCamera.position.copy(this.view);
|
|
165
|
+
this.virtualCamera.up.set(0, 1, 0);
|
|
166
|
+
this.virtualCamera.up.applyMatrix4(this.rotationMatrix);
|
|
167
|
+
this.virtualCamera.up.reflect(this.normal);
|
|
168
|
+
this.virtualCamera.lookAt(this.target);
|
|
169
|
+
|
|
170
|
+
this.virtualCamera.far = this.camera.far; // Used in WebGLBackground
|
|
171
|
+
|
|
172
|
+
this.virtualCamera.updateMatrixWorld();
|
|
173
|
+
this.virtualCamera.projectionMatrix.copy(camera.projectionMatrix);
|
|
174
|
+
|
|
175
|
+
// Update the texture matrix
|
|
176
|
+
this.textureMatrix.set(
|
|
177
|
+
0.5, 0.0, 0.0, 0.5,
|
|
178
|
+
0.0, 0.5, 0.0, 0.5,
|
|
179
|
+
0.0, 0.0, 0.5, 0.5,
|
|
180
|
+
0.0, 0.0, 0.0, 1.0
|
|
181
|
+
);
|
|
182
|
+
this.textureMatrix.multiply(this.virtualCamera.projectionMatrix);
|
|
183
|
+
this.textureMatrix.multiply(this.virtualCamera.matrixWorldInverse);
|
|
184
|
+
this.textureMatrix.multiply(this.matrixWorld);
|
|
185
|
+
|
|
186
|
+
// Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
|
|
187
|
+
// Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
|
|
188
|
+
this.reflectorPlane.setFromNormalAndCoplanarPoint(this.normal, this.reflectorWorldPosition);
|
|
189
|
+
this.reflectorPlane.applyMatrix4(this.virtualCamera.matrixWorldInverse);
|
|
190
|
+
|
|
191
|
+
this.clipPlane.set(this.reflectorPlane.normal.x, this.reflectorPlane.normal.y, this.reflectorPlane.normal.z, this.reflectorPlane.constant);
|
|
192
|
+
|
|
193
|
+
const projectionMatrix = this.virtualCamera.projectionMatrix;
|
|
194
|
+
|
|
195
|
+
this.q.x = (Math.sign(this.clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
|
|
196
|
+
this.q.y = (Math.sign(this.clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
|
|
197
|
+
this.q.z = - 1.0;
|
|
198
|
+
this.q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14];
|
|
199
|
+
|
|
200
|
+
// Calculate the scaled plane vector
|
|
201
|
+
this.clipPlane.multiplyScalar(2.0 / this.clipPlane.dot(this.q));
|
|
202
|
+
|
|
203
|
+
// Replacing the third row of the projection matrix
|
|
204
|
+
projectionMatrix.elements[2] = this.clipPlane.x;
|
|
205
|
+
projectionMatrix.elements[6] = this.clipPlane.y;
|
|
206
|
+
projectionMatrix.elements[10] = this.clipPlane.z + 1.0 - 0.003;
|
|
207
|
+
projectionMatrix.elements[14] = this.clipPlane.w;
|
|
208
|
+
|
|
209
|
+
// Render
|
|
210
|
+
this.visible = false;
|
|
211
|
+
|
|
212
|
+
const currentRenderTarget = renderer.getRenderTarget();
|
|
213
|
+
|
|
214
|
+
const currentXrEnabled = renderer.xr.enabled;
|
|
215
|
+
const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
|
|
216
|
+
|
|
217
|
+
renderer.xr.enabled = false; // Avoid camera modification
|
|
218
|
+
renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
|
|
219
|
+
|
|
220
|
+
renderer.setRenderTarget(this.renderTarget);
|
|
221
|
+
|
|
222
|
+
renderer.state.buffers.depth.setMask(true); // make sure the depth buffer is writable so it can be properly cleared, see #18897
|
|
223
|
+
|
|
224
|
+
if (renderer.autoClear === false) renderer.clear();
|
|
225
|
+
renderer.render(scene, this.virtualCamera);
|
|
226
|
+
|
|
227
|
+
renderer.xr.enabled = currentXrEnabled;
|
|
228
|
+
renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
|
|
229
|
+
|
|
230
|
+
renderer.setRenderTarget(currentRenderTarget);
|
|
231
|
+
|
|
232
|
+
// Restore viewport
|
|
233
|
+
//@ts-ignore
|
|
234
|
+
const viewport = this.camera.viewport;
|
|
235
|
+
if (viewport !== undefined) {
|
|
236
|
+
debugger;
|
|
237
|
+
renderer.state.viewport(viewport);
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
this.visible = true;
|
|
241
|
+
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
getRenderTarget() {
|
|
245
|
+
|
|
246
|
+
return this.renderTarget;
|
|
247
|
+
|
|
248
|
+
};
|
|
249
|
+
|
|
250
|
+
dispose() {
|
|
251
|
+
this.renderTarget.dispose();
|
|
252
|
+
// this.material.dispose();
|
|
253
|
+
};
|
|
254
|
+
|
|
255
|
+
}
|
|
@@ -16,7 +16,7 @@ export default class PlaneModal1 extends Mesh {
|
|
|
16
16
|
static img: HTMLImageElement;
|
|
17
17
|
canvas: HTMLCanvasElement;
|
|
18
18
|
context: CanvasRenderingContext2D;
|
|
19
|
-
texture: import("three").
|
|
19
|
+
texture: import("three").Texture;
|
|
20
20
|
_config: {
|
|
21
21
|
size: number;
|
|
22
22
|
title: string;
|
package/PlaneText.d.ts
CHANGED
|
@@ -22,16 +22,23 @@ export default class PlaneText extends Mesh {
|
|
|
22
22
|
spriteText: SpriteText;
|
|
23
23
|
material: MeshBasicMaterial;
|
|
24
24
|
set(parame: Props): void;
|
|
25
|
-
get(prop: keyof SpriteText): string | number | boolean |
|
|
26
|
-
[key: string]: any;
|
|
27
|
-
} | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, camera: import("three").Camera, geometry: import("three").BufferGeometry<import("three").NormalBufferAttributes>, material: import("three").Material, group: import("three").Group) => void) | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, camera: import("three").Camera, geometry: import("three").BufferGeometry<import("three").NormalBufferAttributes>, material: import("three").Material, group: import("three").Group) => void) | ((matrix: import("three").Matrix4) => void) | ((axis: Vector3, angle: number) => void) | ((euler: import("three").Euler) => void) | ((m: import("three").Matrix4) => void) | ((q: import("three").Quaternion) => void) | ((vector: Vector3) => Vector3) | ((vector: Vector3) => Vector3) | {
|
|
25
|
+
get(prop: keyof SpriteText): string | number | boolean | Vector3 | import("three").Object3D<import("three").Object3DEventMap> | import("three").BufferGeometry<import("three").NormalBufferAttributes> | ((force?: boolean) => void) | import("three").Object3D<import("three").Object3DEventMap>[] | HTMLCanvasElement | import("three").Vector2 | import("three").Material | Record<string, any> | import("three").Matrix4 | import("three").Quaternion | (<T extends keyof import("three").Object3DEventMap>(event: import("three").BaseEvent<T> & import("three").Object3DEventMap[T]) => void) | import("three").Euler | ((callback: (object: import("three").Object3D<import("three").Object3DEventMap>) => any) => void) | import("three").Matrix3 | import("three").Layers | import("three").AnimationClip[] | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, shadowCamera: import("three").Camera, geometry: import("three").BufferGeometry<import("three").NormalBufferAttributes>, depthMaterial: import("three").Material, group: import("three").Group<import("three").Object3DEventMap>) => void) | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, shadowCamera: import("three").Camera, geometry: import("three").BufferGeometry<import("three").NormalBufferAttributes>, depthMaterial: import("three").Material, group: import("three").Group<import("three").Object3DEventMap>) => void) | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, camera: import("three").Camera, geometry: import("three").BufferGeometry<import("three").NormalBufferAttributes>, material: import("three").Material, group: import("three").Group<import("three").Object3DEventMap>) => void) | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, camera: import("three").Camera, geometry: import("three").BufferGeometry<import("three").NormalBufferAttributes>, material: import("three").Material, group: import("three").Group<import("three").Object3DEventMap>) => void) | ((matrix: import("three").Matrix4) => void) | ((axis: Vector3, angle: number) => void) | ((euler: import("three").Euler) => void) | ((m: import("three").Matrix4) => void) | ((q: import("three").Quaternion) => void) | ((vector: Vector3) => Vector3) | ((vector: Vector3) => Vector3) | {
|
|
28
26
|
(vector: Vector3): void;
|
|
29
27
|
(x: number, y: number, z: number): void;
|
|
30
|
-
} | ((id: number) => import("three").Object3D<import("three").
|
|
28
|
+
} | ((id: number) => import("three").Object3D<import("three").Object3DEventMap>) | ((name: string) => import("three").Object3D<import("three").Object3DEventMap>) | ((name: string, value: any) => import("three").Object3D<import("three").Object3DEventMap>) | ((name: string, value: any, optionalTarget?: import("three").Object3D<import("three").Object3DEventMap>[]) => import("three").Object3D<import("three").Object3DEventMap>[]) | ((target: Vector3) => Vector3) | ((target: import("three").Quaternion) => import("three").Quaternion) | ((target: Vector3) => Vector3) | ((target: Vector3) => Vector3) | ((raycaster: import("three").Raycaster, intersects: import("three").Intersection<import("three").Object3D<import("three").Object3DEventMap>>[]) => void) | ((callback: (object: import("three").Object3D<import("three").Object3DEventMap>) => any) => void) | ((callback: (object: import("three").Object3D<import("three").Object3DEventMap>) => any) => void) | (() => void) | ((updateParents: boolean, updateChildren: boolean) => void) | ((meta?: {
|
|
31
29
|
geometries: any;
|
|
32
30
|
materials: any;
|
|
33
31
|
textures: any;
|
|
34
32
|
images: any;
|
|
35
|
-
}) => any) | import("three").SpriteMaterial | ((source: SpriteText, recursive?: boolean) => SpriteText) | (() => void) | ((quaternion: import("three").Quaternion) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((axis: Vector3, distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((...object: import("three").Object3D<import("three").
|
|
33
|
+
}) => any) | import("three").SpriteMaterial | ((source: SpriteText, recursive?: boolean) => SpriteText) | (() => void) | ((quaternion: import("three").Quaternion) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((axis: Vector3, distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((...object: import("three").Object3D<import("three").Object3DEventMap>[]) => SpriteText) | ((...object: import("three").Object3D<import("three").Object3DEventMap>[]) => SpriteText) | (() => SpriteText) | (() => SpriteText) | ((object: import("three").Object3D<import("three").Object3DEventMap>) => SpriteText) | ((recursive?: boolean) => SpriteText) | {
|
|
34
|
+
<T_1 extends keyof import("three").Object3DEventMap>(type: T_1, listener: import("three").EventListener<import("three").Object3DEventMap[T_1], T_1, SpriteText>): void;
|
|
35
|
+
<T_2 extends string>(type: T_2, listener: import("three").EventListener<{}, T_2, SpriteText>): void;
|
|
36
|
+
} | {
|
|
37
|
+
<T_3 extends keyof import("three").Object3DEventMap>(type: T_3, listener: import("three").EventListener<import("three").Object3DEventMap[T_3], T_3, SpriteText>): boolean;
|
|
38
|
+
<T_4 extends string>(type: T_4, listener: import("three").EventListener<{}, T_4, SpriteText>): boolean;
|
|
39
|
+
} | {
|
|
40
|
+
<T_5 extends keyof import("three").Object3DEventMap>(type: T_5, listener: import("three").EventListener<import("three").Object3DEventMap[T_5], T_5, SpriteText>): void;
|
|
41
|
+
<T_6 extends string>(type: T_6, listener: import("three").EventListener<{}, T_6, SpriteText>): void;
|
|
42
|
+
};
|
|
36
43
|
}
|
|
37
44
|
export {};
|
package/PlaneWithHtml.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Sprite,
|
|
1
|
+
import { Sprite, Raycaster, Intersection } from "three";
|
|
2
2
|
export type SpritModal1Config = {
|
|
3
3
|
size?: number;
|
|
4
4
|
title?: string;
|
|
@@ -14,7 +14,7 @@ export default class SpritModal1 extends Sprite {
|
|
|
14
14
|
static img: HTMLImageElement;
|
|
15
15
|
canvas: HTMLCanvasElement;
|
|
16
16
|
context: CanvasRenderingContext2D;
|
|
17
|
-
texture:
|
|
17
|
+
texture: import("three").Texture;
|
|
18
18
|
_config: {
|
|
19
19
|
size: number;
|
|
20
20
|
title: string;
|
package/SpriteWithHtml.ts
CHANGED
package/Text3D/Text3D.ts
CHANGED
package/ThreeBase.d.ts
CHANGED
|
@@ -16,7 +16,6 @@ export default class ThreeBase extends EventDispatcher {
|
|
|
16
16
|
scene: Scene;
|
|
17
17
|
threeMouse: ThreeMouse;
|
|
18
18
|
controls: OrbitControls;
|
|
19
|
-
isRendererContextLost: boolean;
|
|
20
19
|
setContainer(div: HTMLDivElement | null): Promise<void>;
|
|
21
20
|
setSize(width: number, height: number): void;
|
|
22
21
|
controlsDistance: Transition;
|