three-base 2.0.137 → 2.0.142

package/MeshBase.ts

@@ -0,0 +1,253 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-02-24 22:49:42
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2025-06-25
+ */
+import { AnimationAction, AnimationClip, AnimationMixer, Clock, Group, Mesh, Object3D, Vector3 } from "three";
+import threeUtils from "./threeUtils";
+import threeLoader from "./threeLoader";
+import * as SkeletonUtils from "three/examples/jsm/utils/SkeletonUtils";
+import { isString } from "lodash";
+import { dispatchCustomEvent } from "./EventMap";
+
+// 模型基类
+export default class MeshBase extends Group {
+    constructor(url?: string) {
+        super();
+        url && this.loadModel(url);
+    }
+
+    url: string = "";
+    // 模型对象
+    static models: Map<string, Object3D> = new Map();
+    // 模型是否在加载中
+    static loadModeling: Map<string, boolean> = new Map();
+    // 加载完成
+    loaded: boolean = false;
+    // 是否有动画
+    hasAnimation: boolean = false;
+    //动画混合器
+    mixer?: AnimationMixer;
+    //动画剪辑对象数组
+    animationActions: {
+        [key: string]: AnimationAction;
+    } = {};
+    // 获取文件名的后缀
+    getSuffix(filename: string): string {
+        const match = filename.match(/\.([^\.]+)$/);
+        return match ? match[1].toLowerCase() : "";
+    }
+    reset(...object: Object3D[]): this {
+        threeUtils.dipose(this);
+        for (const child of this.children) {
+            child.parent = null;
+        }
+        for (const item of object) {
+            this.add(item);
+        }
+        return this;
+    }
+    // 兜底：为缺失顶点法线的几何体计算法线。
+    // 某些 glb/stl 模型仅有 POSITION 没有 NORMAL（如 public/models/bottle.glb），
+    // 会让法线 pass 输出零向量 -> AO 算出 NaN -> 整片被乘黑，且 PBR 金属材质无法正确受光 -> 发黑。
+    // 在加载完成后统一兜底，保证光照与 AO 都正确；已含法线的模型不受影响。
+    protected ensureNormals(root: Object3D): void {
+        root.traverse((obj) => {
+            if (obj instanceof Mesh && obj.geometry && !obj.geometry.getAttribute("normal")) {
+                obj.geometry.computeVertexNormals();
+            }
+        });
+    }
+    // 如果url 是blob地址的话,就用suffix字段来制定模型的类型
+    async loadModel(url: string | File | Array<File>, filename: string = ""): Promise<void> {
+        //获取模型文件的地址
+        const modelurl = await (async (): Promise<string> => {
+            if (isString(url)) {
+                return url;
+            }
+            else if (url instanceof File) {
+                return url.name;
+            }
+            else if (url instanceof Array) {
+                let modelurl = "";
+                const suffixs = [
+                    "zip",
+                    "obj",
+                    "glb",
+                    "gltf",
+                    "fbx",
+                    "dae",
+                    "stl",
+                    "usdz",
+                ];
+                for (let file of url) {
+                    if (suffixs.includes(threeUtils.getSuffix(file.name))) {
+                        modelurl = file.name;
+                    }
+                }
+                return modelurl;
+            }
+            return "";
+        })();
+        this.url = modelurl || "";
+        if (!modelurl) {
+            return;
+        }
+        this.loaded = false;
+        // 没有模型并且没有加载任务时就去加载模型
+        if (!MeshBase.models.get(modelurl) &&
+            !MeshBase.loadModeling.get(modelurl)) {
+            MeshBase.loadModeling.set(modelurl, true);
+            // 万能加载器
+            let modal = await threeLoader.loadModel(url, filename);
+            MeshBase.models.set(modelurl, modal);
+            MeshBase.loadModeling.set(modelurl, false);
+        }
+        // 如果模型还在加载中, 就等待模型加载完成
+        do {
+            await new Promise((resolve) => setTimeout(resolve, 50));
+        } while (MeshBase.loadModeling.get(modelurl));
+        if (MeshBase.models.get(modelurl)) {
+            const mesh = MeshBase.models.get(modelurl)!;
+            // 兜底：为缺失顶点法线的几何体补算法线。某些 glb/stl 模型只有 POSITION，
+            // 没有 NORMAL，会导致：① 法线 pass 输出零向量 -> AO 算出 NaN -> 整片被乘黑；
+            // ② PBR 金属材质无法正确光照 -> 颜色发黑。统一在加载后兜底，光照与 AO 都正确。
+            this.ensureNormals(mesh);
+            // 判断是否有动画
+            this.hasAnimation = (mesh as Group & { animations: AnimationClip[] }).animations.length > 0;
+            if (this.hasAnimation) {
+                const model = SkeletonUtils.clone(mesh);
+                this.mixer = new AnimationMixer(model);
+                this.animationActions = {};
+                (mesh as Group & { animations: AnimationClip[] }).animations.map((animation: AnimationClip) => {
+                    const animationAction = this.mixer!.clipAction(animation).play();
+                    animationAction.weight = 0;
+                    this.animationActions[animation.name] = animationAction;
+                });
+                this.reset(model);
+            }
+            else {
+                this.reset(mesh.clone(true));
+            }
+        }
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        this.loaded = true;
+        // 加载完成事件
+        dispatchCustomEvent(this, { type: "loaded" });
+    }
+    // 超出绘制区域时不绘制
+    frustumCulled: boolean = false;
+    // 创建阴影
+    castShadow: boolean = false;
+    // 接受阴影
+    receiveShadow: boolean = false;
+    // promise.resole 队列
+    resoles: Array<(value: void | PromiseLike<void>) => void> = [];
+    // 等待加载加载完成
+    async awaitLoaded(): Promise<void> {
+        if (!this.loaded) {
+            await new Promise<void>((resolve) => {
+                if (this.resoles.length === 0) {
+                    (async () => {
+                        while (!this.loaded) {
+                            await new Promise((resolve) => requestAnimationFrame(resolve));
+                        }
+                        while (this.resoles.length > 0) {
+                            const resole = this.resoles.pop();
+                            resole && resole();
+                        }
+                    })();
+                }
+                this.resoles.unshift(resolve);
+            });
+        }
+    }
+    //遍历模型
+    async traverseMesh(callback: (mesh: Mesh) => void): Promise<void> {
+        // 等待加载完成
+        await this.awaitLoaded();
+        this.traverse((obj) => {
+            if (obj instanceof Mesh) {
+                callback(obj);
+            }
+        });
+    }
+    clock: Clock = new Clock();
+    //设置动画的权重
+    async setClipActionWeight(weights: {
+        [key: string]: number;
+    } = {}): Promise<void> {
+        // 等待加载完成
+        await this.awaitLoaded();
+        for (let key in this.animationActions) {
+            this.animationActions[key].weight = weights[key] || 0;
+        }
+    }
+    //获取动画列表
+    getAnimas(): string[] {
+        return Object.keys(this.animationActions);
+    }
+    //播放指定动画
+    setAnimas(anima: string = ""): void {
+        this.setClipActionWeight({ [anima]: 1 });
+    }
+    //停止所有动画
+    stop(): void {
+        this.setClipActionWeight();
+    }
+    updateMatrix(): void {
+        //播放动画
+        if (this.mixer) {
+            this.mixer.update(this.clock.getDelta());
+        }
+        // 深度应用属性
+        this.traverse((obj) => {
+            if (obj instanceof Mesh) {
+                obj.frustumCulled = this.frustumCulled;
+                obj.castShadow = this.castShadow;
+                obj.receiveShadow = this.receiveShadow;
+            }
+        });
+        super.updateMatrix();
+    }
+    // 获取模型的尺寸
+    async getSize(): Promise<Vector3> {
+        await this.awaitLoaded();
+        return threeUtils.getSize(this);
+    }
+    // 居中
+    async center(): Promise<void> {
+        await this.awaitLoaded();
+        threeUtils.center(this);
+    }
+    //底对齐
+    async alignBottom(y: number = 0): Promise<void> {
+        await this.awaitLoaded();
+        threeUtils.alignBottom(this, y);
+    }
+    // 放大到指定尺寸
+    async scaleTo(size: number = 1, key: Array<"x" | "y" | "z"> = ["x", "y", "z"]): Promise<void> {
+        await this.awaitLoaded();
+        threeUtils.scaleTo(this, size, key);
+    }
+    //按照法线拓展
+    expandBynormal(length: number): void {
+        this.traverseMesh((mesh) => {
+            // 没有法线就计算法线
+            mesh.geometry = mesh.geometry.clone();
+            if (!mesh.geometry.getAttribute("normal")) {
+                mesh.geometry.computeVertexNormals();
+            }
+            const normal = mesh.geometry.getAttribute("normal");
+            const position = mesh.geometry.getAttribute("position");
+            const v3 = new Vector3(0, 0, 0);
+            for (let i = 0; i < position.count; i++) {
+                v3.set(normal.getX(i), normal.getY(i), normal.getZ(i));
+                v3.setLength(length);
+                position.setXYZ(i, position.getX(i) + v3.x, position.getY(i) + v3.y, position.getZ(i) + v3.z);
+            }
+            position.needsUpdate = true;
+        });
+    }
+}

package/Mirror.d.ts

@@ -1,25 +1,25 @@
-import { BufferGeometry, Camera, Group, Material, Matrix4, Mesh, PerspectiveCamera, Plane, PlaneGeometry, Scene, ShaderMaterial, Vector3, Vector4, WebGLRenderTarget, WebGLRenderer } from "three";
-export default class Mirror extends Mesh {
-    constructor(geometry?: BufferGeometry);
-    static geometry: PlaneGeometry;
-    isReflector: boolean;
-    type: string;
-    camera: PerspectiveCamera;
-    reflectorPlane: Plane;
-    normal: Vector3;
-    reflectorWorldPosition: Vector3;
-    cameraWorldPosition: Vector3;
-    rotationMatrix: Matrix4;
-    lookAtPosition: Vector3;
-    clipPlane: Vector4;
-    view: Vector3;
-    target: Vector3;
-    q: Vector4;
-    textureMatrix: Matrix4;
-    virtualCamera: PerspectiveCamera;
-    renderTarget: WebGLRenderTarget<import("three").Texture>;
-    material: ShaderMaterial;
-    onBeforeRender: (renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry, material: Material, group: Group) => void;
-    getRenderTarget(): WebGLRenderTarget<import("three").Texture>;
-    dispose(): void;
-}
+import { Matrix4, Mesh, PerspectiveCamera, Plane, PlaneGeometry, ShaderMaterial, Vector3, Vector4, WebGLRenderTarget, WebGLRenderer, Scene, Camera, BufferGeometry, Material, Group, Texture } from "three";
+export default class Mirror extends Mesh {
+    constructor(geometry?: BufferGeometry);
+    static geometry: PlaneGeometry;
+    isReflector: boolean;
+    type: string;
+    camera: PerspectiveCamera;
+    reflectorPlane: Plane;
+    normal: Vector3;
+    reflectorWorldPosition: Vector3;
+    cameraWorldPosition: Vector3;
+    rotationMatrix: Matrix4;
+    lookAtPosition: Vector3;
+    clipPlane: Vector4;
+    view: Vector3;
+    target: Vector3;
+    q: Vector4;
+    textureMatrix: Matrix4;
+    virtualCamera: PerspectiveCamera;
+    renderTarget: WebGLRenderTarget<Texture>;
+    material: ShaderMaterial;
+    onBeforeRender: (renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry, material: Material, group: Group) => void;
+    getRenderTarget(): WebGLRenderTarget<Texture>;
+    dispose(): void;
+}

package/Mirror.js

@@ -1,51 +1,55 @@
-/*
- * @Author: xiaosihan
- * @Date: 2023-08-04 17:17:15
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2024-01-20 05:33:51
- */
-import { Color, DoubleSide, HalfFloatType, Matrix4, Mesh, PerspectiveCamera, Plane, PlaneGeometry, ShaderMaterial, Vector3, Vector4, WebGLRenderTarget } from "three";
-// 镜子模型
-export default class Mirror extends Mesh {
-    constructor(geometry = Mirror.geometry) {
-        super(geometry);
-    }
-    // 正方形网格
-    static geometry = (() => {
-        const geometry = new PlaneGeometry(10, 10, 1, 1);
-        return geometry;
-    })();
-    isReflector = true;
-    type = 'Reflector';
-    camera = new PerspectiveCamera();
-    reflectorPlane = new Plane();
-    normal = new Vector3();
-    reflectorWorldPosition = new Vector3();
-    cameraWorldPosition = new Vector3();
-    rotationMatrix = new Matrix4();
-    lookAtPosition = new Vector3(0, 0, -1);
-    clipPlane = new Vector4();
-    view = new Vector3();
-    target = new Vector3();
-    q = new Vector4();
-    textureMatrix = new Matrix4();
-    virtualCamera = this.camera;
-    renderTarget = new WebGLRenderTarget(2048, 2048, { samples: 0, type: HalfFloatType });
-    material = new ShaderMaterial({
-        uniforms: {
-            'color': {
-                value: new Color("#b6b6b6")
-            },
-            'tDiffuse': {
-                value: this.renderTarget.texture
-            },
-            'textureMatrix': {
-                value: this.textureMatrix
-            },
-            blurAmount: {
-                value: 0.5
-            } // 模糊程度，可以根据需求调整
-        },
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-08-04 17:17:15
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2024-01-20 05:33:51
+ */
+import { Color, DoubleSide, HalfFloatType, Matrix4, Mesh, PerspectiveCamera, Plane, PlaneGeometry, ShaderMaterial, Vector3, Vector4, WebGLRenderTarget } from "three";
+// 镜子模型
+export default class Mirror extends Mesh {
+    constructor(geometry = Mirror.geometry) {
+        super(geometry);
+        // 镜子虽标了 transparent:true（为渲染顺序），但 fragment shader 实际输出 alpha=1.0，
+        // 是实心反射面、并非可透视表面 → 必须参与 AO 与描边/辉光的深度遮挡。
+        // SSAO 的 AO 数据准备会排除所有 transparent 物体，故此处显式声明保留。
+        this.userData.aoOpaque = true;
+    }
+    // 正方形网格
+    static geometry = (() => {
+        const geometry = new PlaneGeometry(10, 10, 1, 1);
+        return geometry;
+    })();
+    isReflector = true;
+    type = 'Reflector';
+    camera = new PerspectiveCamera();
+    reflectorPlane = new Plane();
+    normal = new Vector3();
+    reflectorWorldPosition = new Vector3();
+    cameraWorldPosition = new Vector3();
+    rotationMatrix = new Matrix4();
+    lookAtPosition = new Vector3(0, 0, -1);
+    clipPlane = new Vector4();
+    view = new Vector3();
+    target = new Vector3();
+    q = new Vector4();
+    textureMatrix = new Matrix4();
+    virtualCamera = this.camera;
+    renderTarget = new WebGLRenderTarget(2048, 2048, { type: HalfFloatType });
+    material = new ShaderMaterial({
+        uniforms: {
+            'color': {
+                value: new Color("#b6b6b6")
+            },
+            'tDiffuse': {
+                value: this.renderTarget.texture
+            },
+            'textureMatrix': {
+                value: this.textureMatrix
+            },
+            blurAmount: {
+                value: 0.5
+            } // 模糊程度，可以根据需求调整
+        },
         vertexShader: /* glsl */ `
                     uniform mat4 textureMatrix;
                     varying vec4 vUv;
@@ -61,7 +65,7 @@ export default class Mirror extends Mesh {
         
                         #include <logdepthbuf_vertex>
         
-                    }`,
+                    }`,
         fragmentShader: /* glsl */ `
             uniform vec3 color;
             uniform sampler2D tDiffuse;
@@ -104,93 +108,93 @@ export default class Mirror extends Mesh {
 
                 #include <tonemapping_fragment>
                 #include <colorspace_fragment>
-            }`,
-        depthTest: true,
-        depthWrite: true,
-        transparent: true,
-        side: DoubleSide
-    });
-    onBeforeRender = (renderer, scene, camera, geometry, material, group) => {
-        this.reflectorWorldPosition.setFromMatrixPosition(this.matrixWorld);
-        this.cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
-        this.rotationMatrix.extractRotation(this.matrixWorld);
-        this.normal.set(0, 0, 1);
-        this.normal.applyMatrix4(this.rotationMatrix);
-        this.view.subVectors(this.reflectorWorldPosition, this.cameraWorldPosition);
-        // Avoid rendering when reflector is facing away
-        if (this.view.dot(this.normal) > 0) {
-            this.normal.set(0, 0, -1);
-        }
-        ;
-        this.view.reflect(this.normal).negate();
-        this.view.add(this.reflectorWorldPosition);
-        this.rotationMatrix.extractRotation(camera.matrixWorld);
-        this.lookAtPosition.set(0, 0, -1);
-        this.lookAtPosition.applyMatrix4(this.rotationMatrix);
-        this.lookAtPosition.add(this.cameraWorldPosition);
-        this.target.subVectors(this.reflectorWorldPosition, this.lookAtPosition);
-        this.target.reflect(this.normal).negate();
-        this.target.add(this.reflectorWorldPosition);
-        this.virtualCamera.position.copy(this.view);
-        this.virtualCamera.up.set(0, 1, 0);
-        this.virtualCamera.up.applyMatrix4(this.rotationMatrix);
-        this.virtualCamera.up.reflect(this.normal);
-        this.virtualCamera.lookAt(this.target);
-        this.virtualCamera.far = this.camera.far; // Used in WebGLBackground
-        this.virtualCamera.updateMatrixWorld();
-        this.virtualCamera.projectionMatrix.copy(camera.projectionMatrix);
-        // Update the texture matrix
-        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);
-        this.textureMatrix.multiply(this.virtualCamera.projectionMatrix);
-        this.textureMatrix.multiply(this.virtualCamera.matrixWorldInverse);
-        this.textureMatrix.multiply(this.matrixWorld);
-        // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
-        // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
-        this.reflectorPlane.setFromNormalAndCoplanarPoint(this.normal, this.reflectorWorldPosition);
-        this.reflectorPlane.applyMatrix4(this.virtualCamera.matrixWorldInverse);
-        this.clipPlane.set(this.reflectorPlane.normal.x, this.reflectorPlane.normal.y, this.reflectorPlane.normal.z, this.reflectorPlane.constant);
-        const projectionMatrix = this.virtualCamera.projectionMatrix;
-        this.q.x = (Math.sign(this.clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
-        this.q.y = (Math.sign(this.clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
-        this.q.z = -1.0;
-        this.q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14];
-        // Calculate the scaled plane vector
-        this.clipPlane.multiplyScalar(2.0 / this.clipPlane.dot(this.q));
-        // Replacing the third row of the projection matrix
-        projectionMatrix.elements[2] = this.clipPlane.x;
-        projectionMatrix.elements[6] = this.clipPlane.y;
-        projectionMatrix.elements[10] = this.clipPlane.z + 1.0 - 0.003;
-        projectionMatrix.elements[14] = this.clipPlane.w;
-        // Render
-        this.visible = false;
-        const currentRenderTarget = renderer.getRenderTarget();
-        const currentXrEnabled = renderer.xr.enabled;
-        const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
-        renderer.xr.enabled = false; // Avoid camera modification
-        renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
-        renderer.setRenderTarget(this.renderTarget);
-        renderer.state.buffers.depth.setMask(true); // make sure the depth buffer is writable so it can be properly cleared, see #18897
-        if (renderer.autoClear === false)
-            renderer.clear();
-        renderer.render(scene, this.virtualCamera);
-        renderer.xr.enabled = currentXrEnabled;
-        renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
-        renderer.setRenderTarget(currentRenderTarget);
-        // Restore viewport
-        //@ts-ignore
-        const viewport = this.camera.viewport;
-        if (viewport !== undefined) {
-            renderer.state.viewport(viewport);
-        }
-        this.visible = true;
-    };
-    getRenderTarget() {
-        return this.renderTarget;
-    }
-    ;
-    dispose() {
-        this.renderTarget.dispose();
-        // this.material.dispose();
-    }
-    ;
-}
+            }`,
+        depthTest: true,
+        depthWrite: true,
+        transparent: true,
+        side: DoubleSide
+    });
+    onBeforeRender = (renderer, scene, camera, geometry, material, group) => {
+        this.reflectorWorldPosition.setFromMatrixPosition(this.matrixWorld);
+        this.cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
+        this.rotationMatrix.extractRotation(this.matrixWorld);
+        this.normal.set(0, 0, 1);
+        this.normal.applyMatrix4(this.rotationMatrix);
+        this.view.subVectors(this.reflectorWorldPosition, this.cameraWorldPosition);
+        // Avoid rendering when reflector is facing away
+        if (this.view.dot(this.normal) > 0) {
+            this.normal.set(0, 0, -1);
+        }
+        ;
+        this.view.reflect(this.normal).negate();
+        this.view.add(this.reflectorWorldPosition);
+        this.rotationMatrix.extractRotation(camera.matrixWorld);
+        this.lookAtPosition.set(0, 0, -1);
+        this.lookAtPosition.applyMatrix4(this.rotationMatrix);
+        this.lookAtPosition.add(this.cameraWorldPosition);
+        this.target.subVectors(this.reflectorWorldPosition, this.lookAtPosition);
+        this.target.reflect(this.normal).negate();
+        this.target.add(this.reflectorWorldPosition);
+        this.virtualCamera.position.copy(this.view);
+        this.virtualCamera.up.set(0, 1, 0);
+        this.virtualCamera.up.applyMatrix4(this.rotationMatrix);
+        this.virtualCamera.up.reflect(this.normal);
+        this.virtualCamera.lookAt(this.target);
+        this.virtualCamera.far = this.camera.far; // Used in WebGLBackground
+        this.virtualCamera.updateMatrixWorld();
+        this.virtualCamera.projectionMatrix.copy(camera.projectionMatrix);
+        // Update the texture matrix
+        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);
+        this.textureMatrix.multiply(this.virtualCamera.projectionMatrix);
+        this.textureMatrix.multiply(this.virtualCamera.matrixWorldInverse);
+        this.textureMatrix.multiply(this.matrixWorld);
+        // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
+        // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
+        this.reflectorPlane.setFromNormalAndCoplanarPoint(this.normal, this.reflectorWorldPosition);
+        this.reflectorPlane.applyMatrix4(this.virtualCamera.matrixWorldInverse);
+        this.clipPlane.set(this.reflectorPlane.normal.x, this.reflectorPlane.normal.y, this.reflectorPlane.normal.z, this.reflectorPlane.constant);
+        const projectionMatrix = this.virtualCamera.projectionMatrix;
+        this.q.x = (Math.sign(this.clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
+        this.q.y = (Math.sign(this.clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
+        this.q.z = -1.0;
+        this.q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14];
+        // Calculate the scaled plane vector
+        this.clipPlane.multiplyScalar(2.0 / this.clipPlane.dot(this.q));
+        // Replacing the third row of the projection matrix
+        projectionMatrix.elements[2] = this.clipPlane.x;
+        projectionMatrix.elements[6] = this.clipPlane.y;
+        projectionMatrix.elements[10] = this.clipPlane.z + 1.0 - 0.003;
+        projectionMatrix.elements[14] = this.clipPlane.w;
+        // Render
+        this.visible = false;
+        const currentRenderTarget = renderer.getRenderTarget();
+        const currentXrEnabled = renderer.xr.enabled;
+        const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
+        renderer.xr.enabled = false; // Avoid camera modification
+        renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
+        renderer.setRenderTarget(this.renderTarget);
+        renderer.state.buffers.depth.setMask(true); // make sure the depth buffer is writable so it can be properly cleared, see #18897
+        if (renderer.autoClear === false)
+            renderer.clear();
+        renderer.render(scene, this.virtualCamera);
+        renderer.xr.enabled = currentXrEnabled;
+        renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
+        renderer.setRenderTarget(currentRenderTarget);
+        // Restore viewport
+        const cameraWithViewport = this.camera;
+        const viewport = cameraWithViewport.viewport;
+        if (viewport !== undefined) {
+            renderer.state.viewport(viewport);
+        }
+        this.visible = true;
+    };
+    getRenderTarget() {
+        return this.renderTarget;
+    }
+    ;
+    dispose() {
+        this.renderTarget.dispose();
+        // this.material.dispose();
+    }
+    ;
+}