three-base 2.0.19 → 2.0.20

package/Mirror.d.ts

@@ -0,0 +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;
+}

package/Mirror.js

@@ -0,0 +1,197 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-08-04 17:17:15
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-08-04 20:54:29
+ */
+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
+            } // 模糊程度，可以根据需求调整
+        },
+        vertexShader: /* glsl */ `
+                    uniform mat4 textureMatrix;
+                    varying vec4 vUv;
+        
+                    #include <common>
+                    #include <logdepthbuf_pars_vertex>
+        
+                    void main() {
+        
+                        vUv = textureMatrix * vec4( position, 1.0 );
+        
+                        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+        
+                        #include <logdepthbuf_vertex>
+        
+                    }`,
+        fragmentShader: /* glsl */ `
+            uniform vec3 color;
+            uniform sampler2D tDiffuse;
+            varying vec4 vUv;
+            uniform float blurAmount;
+
+            #include <logdepthbuf_pars_fragment>
+
+            float blendOverlay( float base, float blend ) {
+
+                return( base < 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );
+
+            }
+
+            vec3 blendOverlay( vec3 base, vec3 blend ) {
+
+                return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );
+
+            }
+
+            void main() {
+
+                #include <logdepthbuf_fragment>
+
+                vec2 texelSize = 1.0 / vec2(1024,1024);
+                vec4 fragColor = vec4(0.0);
+            
+                  for (float offsetX = -blurAmount; offsetX <= blurAmount; offsetX += texelSize.x) {
+                    for (float offsetY = -blurAmount; offsetY <= blurAmount; offsetY += texelSize.y) {
+                        //  fragColor += texture2DProj(tDiffuse, vUv + vec4(offsetX, offsetY, 0.0, 0.0) * texelSize);
+                         fragColor += texture2DProj(tDiffuse, vUv + vec4(offsetX * texelSize.x, offsetY * texelSize.y, 0.0, 0.0) );
+                    }
+                  }
+            
+                // fragColor /= pow(2.0 * blurAmount + 1.0, 2.0);
+                // gl_FragColor = color;
+
+                fragColor = texture2DProj( tDiffuse, vUv );
+                gl_FragColor = vec4( blendOverlay( fragColor.rgb, color ), 1.0 );
+
+                #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) {
+            debugger;
+            renderer.state.viewport(viewport);
+        }
+        this.visible = true;
+    };
+    getRenderTarget() {
+        return this.renderTarget;
+    }
+    ;
+    dispose() {
+        this.renderTarget.dispose();
+        // this.material.dispose();
+    }
+    ;
+}

package/Mirror.ts

@@ -0,0 +1,255 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2023-08-04 17:17:15 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-08-04 20:54:29
+ */
+
+import { BufferGeometry, Camera, Color, DoubleSide, Group, HalfFloatType, Material, Matrix4, Mesh, PerspectiveCamera, Plane, PlaneGeometry, Scene, ShaderMaterial, Vector3, Vector4, WebGLRenderTarget, WebGLRenderer } from "three";
+
+
+// 镜子模型
+export default class Mirror extends Mesh {
+
+    constructor(geometry: BufferGeometry = 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
+            } // 模糊程度，可以根据需求调整
+
+        },
+
+        vertexShader: /* glsl */`
+                    uniform mat4 textureMatrix;
+                    varying vec4 vUv;
+        
+                    #include <common>
+                    #include <logdepthbuf_pars_vertex>
+        
+                    void main() {
+        
+                        vUv = textureMatrix * vec4( position, 1.0 );
+        
+                        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+        
+                        #include <logdepthbuf_vertex>
+        
+                    }`,
+
+        fragmentShader: /* glsl */`
+            uniform vec3 color;
+            uniform sampler2D tDiffuse;
+            varying vec4 vUv;
+            uniform float blurAmount;
+
+            #include <logdepthbuf_pars_fragment>
+
+            float blendOverlay( float base, float blend ) {
+
+                return( base < 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );
+
+            }
+
+            vec3 blendOverlay( vec3 base, vec3 blend ) {
+
+                return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );
+
+            }
+
+            void main() {
+
+                #include <logdepthbuf_fragment>
+
+                vec2 texelSize = 1.0 / vec2(1024,1024);
+                vec4 fragColor = vec4(0.0);
+            
+                  for (float offsetX = -blurAmount; offsetX <= blurAmount; offsetX += texelSize.x) {
+                    for (float offsetY = -blurAmount; offsetY <= blurAmount; offsetY += texelSize.y) {
+                        //  fragColor += texture2DProj(tDiffuse, vUv + vec4(offsetX, offsetY, 0.0, 0.0) * texelSize);
+                         fragColor += texture2DProj(tDiffuse, vUv + vec4(offsetX * texelSize.x, offsetY * texelSize.y, 0.0, 0.0) );
+                    }
+                  }
+            
+                // fragColor /= pow(2.0 * blurAmount + 1.0, 2.0);
+                // gl_FragColor = color;
+
+                fragColor = texture2DProj( tDiffuse, vUv );
+                gl_FragColor = vec4( blendOverlay( fragColor.rgb, color ), 1.0 );
+
+                #include <tonemapping_fragment>
+                #include <colorspace_fragment>
+            }`,
+        depthTest: true,
+        depthWrite: true,
+        transparent: true,
+        side: DoubleSide
+    });
+
+
+    onBeforeRender = (renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry, material: Material, group: 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) {
+            debugger;
+            renderer.state.viewport(viewport);
+        }
+
+        this.visible = true;
+
+    }
+
+    getRenderTarget() {
+
+        return this.renderTarget;
+
+    };
+
+    dispose() {
+        this.renderTarget.dispose();
+        // this.material.dispose();
+    };
+
+}

package/ThreeBase.d.ts

@@ -16,7 +16,6 @@ export default class ThreeBase extends EventDispatcher {
     scene: Scene;
     threeMouse: ThreeMouse;
     controls: OrbitControls;
-    isRendererContextLost: boolean;
     setContainer(div: HTMLDivElement | null): Promise<void>;
     setSize(width: number, height: number): void;
     controlsDistance: Transition;

package/ThreeBase.js

@@ -5,7 +5,7 @@
  * @Last Modified time: 2023-05-23 23:54:13
  */
 import { round } from "lodash";
-import { AxesHelper, DepthFormat, DepthTexture, DisplayP3ColorSpace, EventDispatcher, GridHelper, LinearFilter, Mesh, MOUSE, NoBlending, NormalBlending, PerspectiveCamera, RGBAFormat, Scene, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
+import { AxesHelper, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, Mesh, MOUSE, NoBlending, NormalBlending, PerspectiveCamera, RGBAFormat, Scene, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { generateUUID } from "three/src/math/MathUtils";
 import { clearShader, coptyShader, fullScreenMesh, gaussBlurShader, strokeShader } from "./shaders";
@@ -31,19 +31,17 @@ export default class ThreeBase extends EventDispatcher {
     })();
     // TODO 渲染目标的颜色空间问题 还没有处理好
     // 基础纹理渲染对象
-    baseRenderTarget = new WebGLRenderTarget(128, 128, {
-        minFilter: LinearFilter,
-        magFilter: LinearFilter,
-        format: RGBAFormat,
-        stencilBuffer: false,
-        depthTexture: this.baseDepthTexture,
-        anisotropy: 16,
-        colorSpace: DisplayP3ColorSpace
-        // | typeof NoColorSpace
-        // | typeof SRGBColorSpace
-        // | typeof LinearSRGBColorSpace
-        // | typeof DisplayP3ColorSpace;
-    });
+    baseRenderTarget = (() => {
+        const baseRenderTarget = new WebGLRenderTarget(128, 128, {
+            minFilter: LinearFilter,
+            magFilter: LinearFilter,
+            format: RGBAFormat,
+            stencilBuffer: false,
+            depthTexture: this.baseDepthTexture,
+            anisotropy: 16,
+        });
+        return baseRenderTarget;
+    })();
     // 公用渲染目标1
     renderTarget = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
     // 渲染目标2
@@ -91,22 +89,17 @@ export default class ThreeBase extends EventDispatcher {
         controls.screenSpacePanning = true;
         return controls;
     })();
-    // 上下文是否被销毁了
-    isRendererContextLost = false;
     // 设置 dom 容器
     async setContainer(div) {
         if (div) {
             div.style.overflow = "hidden";
             div.innerHTML = "";
             div.append(this.renderer.domElement);
-            // 如果上下文被销毁了,  就恢复上下文
-            if (this.isRendererContextLost) {
-                this.isRendererContextLost = false;
-                this.renderer.forceContextRestore();
-                await new Promise(resolve => requestAnimationFrame(resolve));
-                await new Promise(resolve => requestAnimationFrame(resolve));
-                this.renderer.domElement.style.opacity = "1";
-            }
+            // this.renderer.forceContextLoss();
+            // await new Promise(resolve => requestAnimationFrame(resolve));
+            // await new Promise(resolve => requestAnimationFrame(resolve));
+            this.renderer.forceContextRestore();
+            this.renderer.domElement.style.opacity = "1";
             this.setSize(div.clientWidth, div.clientHeight);
             // 开启时时渲染
             threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
@@ -121,7 +114,7 @@ export default class ThreeBase extends EventDispatcher {
         }
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.setSize(width, height);
-        this.baseRenderTarget.setSize(width, height);
+        this.baseRenderTarget.setSize(width * window.devicePixelRatio, height * window.devicePixelRatio);
         this.size.set(width, height);
         // 渲染场景
         // this.renderer.clear();
@@ -149,11 +142,24 @@ export default class ThreeBase extends EventDispatcher {
         const controlsPosition = new Transition({ x: 100, y: 100, z: 100 });
         controlsPosition.setDuration(1000);
         controlsPosition.onChange(({ x, y, z }) => {
-            // const distance = this.controlsDistance.get("distance");
-            this.camera.position.set(x, y, z);
-            // .sub(this.controls.target)
-            // .setLength(distance)
-            // .add(this.controls.target);
+            const distance = this.controlsDistance.get("distance");
+            this.camera.position.set(x + 0.01, y, z + 0.01)
+                .sub(this.controls.target)
+                .setLength(distance)
+                .add(this.controls.target);
+            // // 创建初始方向向量
+            // const directionVecA = new THREE.Vector3(1, 0, 0); // 需要旋转的初始方向向量
+            // const referenceVecB = new THREE.Vector3(0, 1, 0); // 参考方向向量，用于确定旋转轴
+            // // 归一化参考方向向量
+            // referenceVecB.normalize();
+            // // 计算旋转轴
+            // const axis = new THREE.Vector3().crossVectors(directionVecA, referenceVecB).normalize();
+            // // 计算旋转角度（弧度）
+            // const angle = Math.PI / 36; // 旋转角度为5度，Math.PI / 36为弧度
+            // // 使用applyAxisAngle方法进行旋转
+            // directionVecA.applyAxisAngle(axis, angle);
+            // // 输出旋转后的方向向量
+            // console.log(directionVecA);
             this.camera.lookAt(this.controls.target);
             this.needRender = true;
         });
@@ -162,15 +168,17 @@ export default class ThreeBase extends EventDispatcher {
     // 网格辅助线
     gridHelper = (() => {
         const gridHelper = new GridHelper(1000, 100, 0x303030, 0x303030);
-        gridHelper.visible = threeUtils.isDev;
-        this.scene.add(gridHelper);
+        if (threeUtils.isDev) {
+            this.scene.add(gridHelper);
+        }
         return gridHelper;
     })();
     //坐标轴线
     axesHelper = (() => {
         const axesHelper = new AxesHelper(10000);
-        axesHelper.visible = threeUtils.isDev;
-        this.scene.add(axesHelper);
+        if (threeUtils.isDev) {
+            this.scene.add(axesHelper);
+        }
         return axesHelper;
     })();
     init() {
@@ -266,8 +274,6 @@ export default class ThreeBase extends EventDispatcher {
     stopRender() {
         threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
         this.renderer.forceContextLoss();
-        // 标记上下文被销毁了
-        this.isRendererContextLost = true;
         this.setSize(100, 100);
         this.renderer.domElement.style.opacity = "0";
     }
@@ -297,17 +303,17 @@ export default class ThreeBase extends EventDispatcher {
         }
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" });
-        this.renderer.setRenderTarget(this.baseRenderTarget);
+        // this.renderer.setRenderTarget(this.baseRenderTarget);
         this.renderer.clear();
         this.renderer.render(this.scene, this.camera);
-        this.renderer.setRenderTarget(null);
-        this.renderer.clear();
+        // this.renderer.setRenderTarget(null);
+        // this.renderer.clear();
         //TODO 渲染了2次, 还有优化空间
         // this.renderer.setScissorTest(false);
         // this.renderRendererTarget(this.baseRenderTarget);
         // this.renderer.setScissorTest(true);
-        // this.renderer.setScissor(0, 0, 512, 1000);
-        this.renderer.render(this.scene, this.camera);
+        // this.renderer.setScissor(0, 0, 800, 1000);
+        // this.renderer.render(this.scene, this.camera);
         // 查找需要绘制描边的对象,并且绘制描边
         this.scene.traverse(obj => {
             stroke_pass(this.renderer, this.camera, obj, this.baseDepthTexture);

package/ThreeBase.ts

@@ -36,19 +36,17 @@ export default class ThreeBase extends EventDispatcher {
 
     // TODO 渲染目标的颜色空间问题 还没有处理好
     // 基础纹理渲染对象
-    baseRenderTarget = new WebGLRenderTarget(128, 128, {
-        minFilter: LinearFilter,
-        magFilter: LinearFilter,
-        format: RGBAFormat,
-        stencilBuffer: false,
-        depthTexture: this.baseDepthTexture,
-        anisotropy: 16,
-        colorSpace: DisplayP3ColorSpace
-        // | typeof NoColorSpace
-        // | typeof SRGBColorSpace
-        // | typeof LinearSRGBColorSpace
-        // | typeof DisplayP3ColorSpace;
-    });
+    baseRenderTarget = (() => {
+        const baseRenderTarget = new WebGLRenderTarget(128, 128, {
+            minFilter: LinearFilter,
+            magFilter: LinearFilter,
+            format: RGBAFormat,
+            stencilBuffer: false,
+            depthTexture: this.baseDepthTexture,
+            anisotropy: 16,
+        });
+        return baseRenderTarget;
+    })();
 
     // 公用渲染目标1
     renderTarget = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
@@ -108,9 +106,6 @@ export default class ThreeBase extends EventDispatcher {
         return controls;
     })();
 
-    // 上下文是否被销毁了
-    isRendererContextLost = false;
-
     // 设置 dom 容器
     async setContainer(div: HTMLDivElement | null) {
         if (div) {
@@ -118,14 +113,11 @@ export default class ThreeBase extends EventDispatcher {
             div.innerHTML = "";
             div.append(this.renderer.domElement);
 
-            // 如果上下文被销毁了,  就恢复上下文
-            if (this.isRendererContextLost) {
-                this.isRendererContextLost = false;
-                this.renderer.forceContextRestore();
-                await new Promise(resolve => requestAnimationFrame(resolve));
-                await new Promise(resolve => requestAnimationFrame(resolve));
-                this.renderer.domElement.style.opacity = "1";
-            }
+            // this.renderer.forceContextLoss();
+            // await new Promise(resolve => requestAnimationFrame(resolve));
+            // await new Promise(resolve => requestAnimationFrame(resolve));
+            this.renderer.forceContextRestore();
+            this.renderer.domElement.style.opacity = "1";
 
             this.setSize(div.clientWidth, div.clientHeight);
 
@@ -145,7 +137,7 @@ export default class ThreeBase extends EventDispatcher {
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.setSize(width, height);
 
-        this.baseRenderTarget.setSize(width, height);
+        this.baseRenderTarget.setSize(width * window.devicePixelRatio, height * window.devicePixelRatio);
 
         this.size.set(width, height);
         // 渲染场景
@@ -177,11 +169,31 @@ export default class ThreeBase extends EventDispatcher {
         const controlsPosition = new Transition({ x: 100, y: 100, z: 100 });
         controlsPosition.setDuration(1000);
         controlsPosition.onChange(({ x, y, z }) => {
-            // const distance = this.controlsDistance.get("distance");
-            this.camera.position.set(x, y, z)
-                // .sub(this.controls.target)
-                // .setLength(distance)
-                // .add(this.controls.target);
+            const distance = this.controlsDistance.get("distance");
+            this.camera.position.set(x + 0.01, y, z + 0.01)
+                .sub(this.controls.target)
+                .setLength(distance)
+                .add(this.controls.target);
+
+            // // 创建初始方向向量
+            // const directionVecA = new THREE.Vector3(1, 0, 0); // 需要旋转的初始方向向量
+            // const referenceVecB = new THREE.Vector3(0, 1, 0); // 参考方向向量，用于确定旋转轴
+
+            // // 归一化参考方向向量
+            // referenceVecB.normalize();
+
+            // // 计算旋转轴
+            // const axis = new THREE.Vector3().crossVectors(directionVecA, referenceVecB).normalize();
+
+            // // 计算旋转角度（弧度）
+            // const angle = Math.PI / 36; // 旋转角度为5度，Math.PI / 36为弧度
+
+            // // 使用applyAxisAngle方法进行旋转
+            // directionVecA.applyAxisAngle(axis, angle);
+
+            // // 输出旋转后的方向向量
+            // console.log(directionVecA);
+
 
             this.camera.lookAt(this.controls.target);
             this.needRender = true;
@@ -192,16 +204,18 @@ export default class ThreeBase extends EventDispatcher {
     // 网格辅助线
     gridHelper = (() => {
         const gridHelper = new GridHelper(1000, 100, 0x303030, 0x303030);
-        gridHelper.visible = threeUtils.isDev;
-        this.scene.add(gridHelper);
+        if (threeUtils.isDev) {
+            this.scene.add(gridHelper);
+        }
         return gridHelper;
     })();
 
     //坐标轴线
     axesHelper = (() => {
         const axesHelper = new AxesHelper(10000);
-        axesHelper.visible = threeUtils.isDev;
-        this.scene.add(axesHelper);
+        if (threeUtils.isDev) {
+            this.scene.add(axesHelper);
+        }
         return axesHelper;
     })();
 
@@ -323,8 +337,6 @@ export default class ThreeBase extends EventDispatcher {
     stopRender() {
         threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
         this.renderer.forceContextLoss();
-        // 标记上下文被销毁了
-        this.isRendererContextLost = true;
         this.setSize(100, 100);
         this.renderer.domElement.style.opacity = "0";
     }
@@ -363,21 +375,19 @@ export default class ThreeBase extends EventDispatcher {
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" });
 
-        this.renderer.setRenderTarget(this.baseRenderTarget);
+        // this.renderer.setRenderTarget(this.baseRenderTarget);
         this.renderer.clear();
         this.renderer.render(this.scene, this.camera);
 
-        this.renderer.setRenderTarget(null);
-        this.renderer.clear();
+        // this.renderer.setRenderTarget(null);
+        // this.renderer.clear();
 
         //TODO 渲染了2次, 还有优化空间
         // this.renderer.setScissorTest(false);
         // this.renderRendererTarget(this.baseRenderTarget);
         // this.renderer.setScissorTest(true);
-        // this.renderer.setScissor(0, 0, 512, 1000);
-        this.renderer.render(this.scene, this.camera);
-
-
+        // this.renderer.setScissor(0, 0, 800, 1000);
+        // this.renderer.render(this.scene, this.camera);
 
         // 查找需要绘制描边的对象,并且绘制描边
         this.scene.traverse(obj => {

package/package.json

@@ -1,7 +1,10 @@
 {
     "name": "three-base",
-    "version": "2.0.19",
+    "version": "2.0.20",
     "description": "three 3d three-base",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
     "repository": {
         "type": "git",
         "url": "https://gitee.com/drm/three-base"
@@ -40,4 +43,4 @@
         "vite": "*",
         "html2canvas": "^1.4.1"
     }
-}
+}

package/pass/glow_pass.js

@@ -474,6 +474,7 @@ export default function glow_pass(renderer, camera, object3d, baseDepthTexture)
     const originRenderTarget = renderer.getRenderTarget();
     // 设置选中目标的帧缓冲区
     renderer.getSize(size);
+    size.multiplyScalar(window.devicePixelRatio);
     selectTextureTarget.setSize(size.x, size.y);
     selectDethpTestTextureTarget.setSize(size.x, size.y);
     blur1TextureTarget.setSize(size.x, size.y);

package/pass/glow_pass.ts

@@ -495,6 +495,7 @@ export default function glow_pass(renderer: WebGLRenderer, camera: Camera, objec
 
     // 设置选中目标的帧缓冲区
     renderer.getSize(size);
+    size.multiplyScalar(window.devicePixelRatio);
     selectTextureTarget.setSize(size.x, size.y);
     selectDethpTestTextureTarget.setSize(size.x, size.y);
     blur1TextureTarget.setSize(size.x, size.y);

package/pass/stroke_pass.js

@@ -470,6 +470,7 @@ export default function stroke_pass(renderer, camera, object3d, baseDepthTexture
     const originRenderTarget = renderer.getRenderTarget();
     // 设置选中目标的帧缓冲区
     renderer.getSize(size);
+    size.multiplyScalar(window.devicePixelRatio);
     selectTextureTarget.setSize(size.x, size.y);
     selectDethpTestTextureTarget.setSize(size.x, size.y);
     blur1TextureTarget.setSize(size.x, size.y);

package/pass/stroke_pass.ts

@@ -489,6 +489,7 @@ export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, obj
 
     // 设置选中目标的帧缓冲区
     renderer.getSize(size);
+    size.multiplyScalar(window.devicePixelRatio);
     selectTextureTarget.setSize(size.x, size.y);
     selectDethpTestTextureTarget.setSize(size.x, size.y);
     blur1TextureTarget.setSize(size.x, size.y);

package/threeLoader.d.ts

@@ -3,6 +3,7 @@ import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
+import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
 declare class ThreeLoader extends EventDispatcher {
     constructor();
     anisotropy: number;
@@ -12,6 +13,7 @@ declare class ThreeLoader extends EventDispatcher {
     getTexture(src: string | HTMLCanvasElement): CanvasTexture | Texture;
     fbxLoader: FBXLoader;
     objLoader: OBJLoader;
+    stlLoader: STLLoader;
     mtlLoader: MTLLoader;
     gltfLoader: GLTFLoader;
     onload: boolean;

package/threeLoader.js

@@ -10,6 +10,7 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
+import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
 // 引入静态资源
 //@ts-ignore
 import dracoWasmWrapperJS from "./lib/draco/draco_wasm_wrapper.js?url";
@@ -85,6 +86,8 @@ class ThreeLoader extends EventDispatcher {
     fbxLoader = new FBXLoader();
     //obj 加载器
     objLoader = new OBJLoader();
+    // stl 加载器
+    stlLoader = new STLLoader();
     // 材质加载器
     mtlLoader = new MTLLoader();
     // gltf 加载器

package/threeLoader.ts

@@ -11,6 +11,7 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
+import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
 
 // 引入静态资源
 //@ts-ignore
@@ -107,6 +108,9 @@ class ThreeLoader extends EventDispatcher {
     //obj 加载器
     objLoader = new OBJLoader();
 
+    // stl 加载器
+    stlLoader = new STLLoader();
+
     // 材质加载器
     mtlLoader = new MTLLoader();