three-base 2.0.115 → 2.0.117

package/ExtrudeMesh.d.ts

@@ -34,6 +34,7 @@ export default class ExtrudeMesh extends Mesh<BufferGeometry, Material> {
     static temp2Matrix4: Matrix4;
     static temp3Matrix4: Matrix4;
     constructor(props: ExtrudeMeshProps, material?: Material);
+    shapePathWidth: number;
     pointerWidthRadius: Array<{
         vector3: [number, number, number];
         matrix: [

package/ExtrudeMesh.js

@@ -2,7 +2,7 @@
  * @Author: xiaosihan
  * @Date: 2022-06-08 14:20:52
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2022-09-30 00:12:19
+ * @Last Modified time: 2025-01-17 20:42:22
  */
 import { clamp, cloneDeep, filter, first, get, isNumber, last } from "lodash";
 import { BufferAttribute, BufferGeometry, Matrix4, Mesh, Vector2, Vector3 } from "three";
@@ -32,6 +32,8 @@ export default class ExtrudeMesh extends Mesh {
         super(undefined, material);
         this.updateGeometry(props);
     }
+    //宽度
+    shapePathWidth = 1;
     // 通过 props.paths 和圆角属性 计算出来的 最终路径
     pointerWidthRadius = [];
     // 通过2个顶点和缩放值计算矩阵
@@ -155,16 +157,16 @@ export default class ExtrudeMesh extends Mesh {
                             .toArray()
                     });
                 }
-                else if (segments === 0) { // 分段数为0时不分段
+                else if (segments === 0) { // 分段数为0时不分段 并在前后各加一个点
                     let { x = 1, y = 1 } = scale;
                     this.pointerWidthRadius.push({
                         vector3,
-                        matrix: this.computerMatrix((v2Inv1Left ? circleCenter.toArray() : vector3), (v2Inv1Left ? vector3 : circleCenter.toArray()), [1, y, x])
+                        matrix: this.computerMatrix((v2Inv1Left ? circleCenter.toArray() : vector3), (v2Inv1Left ? vector3 : circleCenter.toArray()), [1, y, x / Math.sin(innerAngle / 2)])
                     });
                 }
                 else {
                     for (let ii = 0; ii <= segments; ii++) {
-                        // 圆角计算的低n个点的角度
+                        // 圆角计算的第n个点的角度
                         let Aa = ii * ((Math.PI - innerAngle) / segments);
                         //半径对角
                         let Cc = Math.PI - Aa - (innerAngle / 2);
@@ -330,6 +332,7 @@ export default class ExtrudeMesh extends Mesh {
     //设置模型
     updateGeometry(props) {
         const { paths, shapePath, closed } = props;
+        this.shapePathWidth = Math.max(...shapePath.map(path => path[0])) - Math.min(...shapePath.map(path => path[0]));
         // 计算圆角路径
         this.computerPointerWidthRadius(paths, closed);
         //网格模型的每个顶点位置

package/PipeMesh/PathGeometry.d.ts

@@ -25,6 +25,8 @@ declare class PathGeometry extends BufferGeometry {
      * @param {Boolean} [generateUv2=false]
      */
     constructor(initData: PathGeometryParam, generateUv2?: boolean);
+    computeBoundsTree: any;
+    disposeBoundsTree: any;
     _initByMaxVertex(maxVertex: number, generateUv2: boolean): void;
     _initByData(pathPointList: PathPointList, options: Options, usage: Usage, generateUv2: boolean): void;
     /**

package/PipeMesh/PathGeometry.js

@@ -3,6 +3,7 @@ import { PathPoint } from './PathPoint.js';
 import { BufferGeometry } from 'three/src/core/BufferGeometry.js';
 import { BufferAttribute } from 'three/src/core/BufferAttribute.js';
 import { Vector3 } from 'three/src/math/Vector3.js';
+import { computeBoundsTree, disposeBoundsTree } from 'three-mesh-bvh';
 /**
  * PathGeometry
  */
@@ -15,6 +16,8 @@ class PathGeometry extends BufferGeometry {
         super();
         this._initByData(initData.pathPointList, initData.options, initData.usage, generateUv2);
     }
+    computeBoundsTree = computeBoundsTree.bind(this);
+    disposeBoundsTree = disposeBoundsTree.bind(this);
     _initByMaxVertex(maxVertex, generateUv2) {
         this.setAttribute('position', new BufferAttribute(new Float32Array(maxVertex * 3), 3).setUsage(DynamicDrawUsage));
         this.setAttribute('normal', new BufferAttribute(new Float32Array(maxVertex * 3), 3).setUsage(DynamicDrawUsage));

package/ThreeBase.d.ts

@@ -69,6 +69,7 @@ export default class ThreeBase extends EventDispatcher {
     autoRender: boolean;
     needRender: boolean;
     stopRender(): void;
+    hasPass(): boolean;
     render(): void;
     private renderBindThis;
     getThumbBlob(): Promise<Blob>;

package/ThreeBase.js

@@ -2,7 +2,7 @@
  * @Author: xiaosihan
  * @Date: 2021-12-20 13:38:22
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2025-01-17 06:49:44
+ * @Last Modified time: 2025-01-17 11:07:38
  */
 import { round } from "lodash";
 import { AxesHelper, Box3, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, MOUSE, NoBlending, NormalBlending, OrthographicCamera, PerspectiveCamera, RGBAFormat, ReinhardToneMapping, SRGBColorSpace, Scene, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderTarget, WebGLRenderer, } from "three";
@@ -10,13 +10,14 @@ import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { degToRad, generateUUID } from "three/src/math/MathUtils";
 import ThreeMouse from "./ThreeMouse";
 import Transition from "./Transition";
+import bloom_pass from "./pass/bloom_pass";
+import cover_pass from "./pass/cover_pass";
 import glow_pass from "./pass/glow_pass";
 import stroke_pass from "./pass/stroke_pass";
-import { baseTextureToRenderShader, copyShader, fullScreenMesh, } from "./shaders";
+import { copyShader, fullScreenMesh } from "./shaders";
+import { baseTextureToRenderShader } from "./shaders/baseTextureToRenderShader";
 import threeLoader from "./threeLoader";
 import threeUtils from "./threeUtils";
-import cover_pass from "./pass/cover_pass";
-import bloom_pass from "./pass/bloom_pass";
 // three.js 的基础对象
 export default class ThreeBase extends EventDispatcher {
     constructor() {
@@ -193,7 +194,7 @@ export default class ThreeBase extends EventDispatcher {
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.setSize(width, height);
         // 设置帧缓存区的尺寸
-        this.baseRenderTarget.setSize(width * Math.max(2, window.devicePixelRatio), height * Math.max(2, window.devicePixelRatio));
+        this.baseRenderTarget.setSize(width * window.devicePixelRatio, height * window.devicePixelRatio);
         // 设置深度纹理的尺寸
         this.baseDepthTexture.image.width = width * window.devicePixelRatio;
         this.baseDepthTexture.image.height = height * window.devicePixelRatio;
@@ -234,12 +235,12 @@ export default class ThreeBase extends EventDispatcher {
             // .setLength(distance)
             // .add(this.controls.target);
             // // 创建初始方向向量
-            // const directionVecA = new THREE.Vector3(1, 0, 0); // 需要旋转的初始方向向量
-            // const referenceVecB = new THREE.Vector3(0, 1, 0); // 参考方向向量，用于确定旋转轴
+            // const directionVecA = new Vector3(1, 0, 0); // 需要旋转的初始方向向量
+            // const referenceVecB = new Vector3(0, 1, 0); // 参考方向向量，用于确定旋转轴
             // // 归一化参考方向向量
             // referenceVecB.normalize();
             // // 计算旋转轴
-            // const axis = new THREE.Vector3().crossVectors(directionVecA, referenceVecB).normalize();
+            // const axis = new Vector3().crossVectors(directionVecA, referenceVecB).normalize();
             // // 计算旋转角度（弧度）
             // const angle = Math.PI / 36; // 旋转角度为5度，Math.PI / 36为弧度
             // // 使用applyAxisAngle方法进行旋转
@@ -427,6 +428,23 @@ export default class ThreeBase extends EventDispatcher {
             this.renderer.domElement.style.opacity = "0";
         }
     }
+    //判断是否有特效
+    hasPass() {
+        let hasPass = false;
+        this.scene.traverseVisible((obj) => {
+            const { stroke_enable = false, stroke_width = 1, glow_enable = false, glow_width = 1, cover_enable = false, cover_opacity = 1, } = obj.userData;
+            if (stroke_enable && stroke_width > 0) {
+                hasPass = true;
+            }
+            if (glow_enable && glow_width > 0) {
+                hasPass = true;
+            }
+            if (cover_enable && cover_opacity > 0) {
+                hasPass = true;
+            }
+        });
+        return hasPass;
+    }
     // 渲染场景
     render() {
         // canvas 没有在页面上面的话 就停止渲染
@@ -479,21 +497,31 @@ export default class ThreeBase extends EventDispatcher {
         }
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" });
+        const hasPass = this.hasPass();
         // 把基础场景渲染到 帧缓冲区 在后期通道中会用到
-        this.renderer.setRenderTarget(this.baseRenderTarget);
-        this.renderer.clear();
-        this.renderer.render(this.scene, camera);
-        this.renderer.setRenderTarget(null);
-        this.renderer.clear();
-        this.renderRendererTarget(this.baseRenderTarget);
-        // 后处理特效渲染(描边,发光,颜色覆盖,磨砂玻璃,bloom)
-        this.scene.traverseVisible((obj) => {
-            stroke_pass(this.renderer, camera, obj, this.baseDepthTexture);
-            glow_pass(this.renderer, camera, obj, this.baseDepthTexture);
-            cover_pass(this.renderer, camera, obj, this.baseDepthTexture);
-        });
-        //后处理发光特效
-        bloom_pass(this.renderer, camera, this.scene, this.baseDepthTexture);
+        if (hasPass) {
+            this.renderer.setRenderTarget(this.baseRenderTarget);
+            this.renderer.clear();
+            this.renderer.render(this.scene, camera);
+            // 后处理特效渲染(描边,发光,颜色覆盖,磨砂玻璃,bloom)
+            this.scene.traverseVisible((obj) => {
+                stroke_pass(this.renderer, camera, obj, this.baseDepthTexture);
+                glow_pass(this.renderer, camera, obj, this.baseDepthTexture);
+            });
+            this.renderer.setRenderTarget(null);
+            this.renderer.clear();
+            this.renderRendererTarget(this.baseRenderTarget);
+            this.scene.traverseVisible((obj) => {
+                cover_pass(this.renderer, camera, obj, this.baseDepthTexture);
+            });
+            //后处理发光特效
+            bloom_pass(this.renderer, camera, this.scene, this.baseDepthTexture);
+        }
+        else {
+            this.renderer.setRenderTarget(null);
+            this.renderer.clear();
+            this.renderer.render(this.scene, camera);
+        }
         this.dispatchEvent({ type: "afterRender" });
     }
     renderBindThis = this.render.bind(this);
@@ -540,8 +568,8 @@ export default class ThreeBase extends EventDispatcher {
     }
     //把渲染目标渲染到canvas上
     renderRendererTarget(renderTarget) {
-        baseTextureToRenderShader.uniforms.map.value = renderTarget.texture;
-        baseTextureToRenderShader.uniforms.opacity.value = 1.0;
+        baseTextureToRenderShader.uniforms.resolution.value.set(1 / this.size.x, 1 / this.size.y);
+        baseTextureToRenderShader.uniforms.tDiffuse.value = renderTarget.texture;
         fullScreenMesh.render(this.renderer, baseTextureToRenderShader);
     }
     // 渲染纹理

package/ThreeMouse.d.ts

@@ -1,10 +1,9 @@
-import * as THREE from "three";
-import { Object3D, Scene } from "three";
-import type { Intersection } from "three";
+import { Object3D, Raycaster, Scene, Vector2, WebGLRenderer } from "three";
+import { Camera, Intersection, Renderer } from "three";
 export interface ThreeMouseEvent extends Intersection {
     e: MouseEvent;
-    renderer: THREE.Renderer;
-    camera: THREE.Camera;
+    renderer: Renderer;
+    camera: Camera;
     type: string;
     offsetX: number;
     offsetY: number;
@@ -12,18 +11,18 @@ export interface ThreeMouseEvent extends Intersection {
     y: number;
 }
 /**
- *  three.js 专用的鼠标拾取模型对象
+ *  js 专用的鼠标拾取模型对象
  */
 export default class ThreeMouse {
-    constructor(renderer: THREE.WebGLRenderer, camera: THREE.Camera, scene: THREE.Scene);
-    _renderer: THREE.WebGLRenderer;
-    _camera: THREE.Camera;
+    constructor(renderer: WebGLRenderer, camera: Camera, scene: Scene);
+    _renderer: WebGLRenderer;
+    _camera: Camera;
     _scene: Scene;
-    _mosePosition: THREE.Vector2;
-    _mouseDownPosition: THREE.Vector2;
+    _mosePosition: Vector2;
+    _mouseDownPosition: Vector2;
     _mesh_on?: Object3D;
     _mesh_Down?: Object3D;
-    _raycaster: THREE.Raycaster;
+    _raycaster: Raycaster;
     _frame: number;
     _mouseInRenderer: boolean;
     _mousemoveEvent?: MouseEvent;

package/ThreeMouse.js

@@ -4,16 +4,14 @@
 //
 //
 // 启动鼠标事件
-import * as THREE from "three";
-import { Raycaster } from "three";
+import { Raycaster, Vector2 } from "three";
+import { Mesh } from "three";
 import { debounce } from "lodash";
-import { computeBoundsTree, disposeBoundsTree, acceleratedRaycast } from 'three-mesh-bvh';
+import { computeBoundsTree, disposeBoundsTree, acceleratedRaycast, } from "three-mesh-bvh";
 // Add the extension functions
-THREE.BufferGeometry.prototype.computeBoundsTree = computeBoundsTree;
-THREE.BufferGeometry.prototype.disposeBoundsTree = disposeBoundsTree;
-THREE.Mesh.prototype.raycast = acceleratedRaycast;
+Mesh.prototype.raycast = acceleratedRaycast;
 /**
- *  three.js 专用的鼠标拾取模型对象
+ *  js 专用的鼠标拾取模型对象
  */
 export default class ThreeMouse {
     constructor(renderer, camera, scene) {
@@ -21,7 +19,9 @@ export default class ThreeMouse {
         this._camera = camera;
         this._scene = scene;
         this._frame = this._renderer.info.render.frame;
-        this._renderer.domElement.addEventListener("mouseenter", () => { this._mouseInRenderer = true; }, true); //鼠标进入开启拾取
+        this._renderer.domElement.addEventListener("mouseenter", () => {
+            this._mouseInRenderer = true;
+        }, true); //鼠标进入开启拾取
         this._renderer.domElement.addEventListener("mouseleave", this._mouseleave, true); //鼠标离开停止拾取
         this._renderer.domElement.addEventListener("mousemove", this._mousemove, true); //鼠标移动监听事件
         this._renderer.domElement.addEventListener("pointerdown", this._mousedown, true); //鼠标按下监听事件
@@ -32,9 +32,9 @@ export default class ThreeMouse {
     _camera;
     _scene;
     // 鼠标在渲染器上面的位置
-    _mosePosition = new THREE.Vector2(0, 0);
+    _mosePosition = new Vector2(0, 0);
     // 鼠标按下的位置 如果和鼠标弹起的位置相同 才算一次有效的点击事件
-    _mouseDownPosition = new THREE.Vector2(0, 0);
+    _mouseDownPosition = new Vector2(0, 0);
     //当前鼠标指针上的对象
     _mesh_on;
     //鼠标按下的对象
@@ -61,7 +61,6 @@ export default class ThreeMouse {
         }
         return intersection;
     }
-    ;
     // 判断对象上面是否有事件
     hasEvent(object, types = []) {
         if (!object) {
@@ -71,9 +70,11 @@ export default class ThreeMouse {
         if (object["userData"] && object["userData"]["enableEvent"] === false) {
             return false;
         }
-        const hasevent = types.some(type => {
+        const hasevent = types.some((type) => {
             //@ts-ignore
-            if (object["_listeners"] && object["_listeners"][type] && object["_listeners"][type][0]) {
+            if (object["_listeners"] &&
+                object["_listeners"][type] &&
+                object["_listeners"][type][0]) {
                 return true;
             }
             // if (object["userData"] && object["userData"]["cursor"]) {
@@ -100,11 +101,23 @@ export default class ThreeMouse {
     dispatchEvent() {
         // 提取有事件的对象
         const meshs = [];
-        this._scene.traverseVisible(mesh => {
+        this._scene.traverseVisible((mesh) => {
             // 判断对象是否有指定的事件
-            if (this.hasCursor(mesh) || this.hasEvent(mesh, ["leftclick", "rightclick", "click", "dbclick", "mouseenter", "mouseleave", "mousemove", "mousedown", "mouseup"])) {
+            if (this.hasCursor(mesh) ||
+                this.hasEvent(mesh, [
+                    "leftclick",
+                    "rightclick",
+                    "click",
+                    "dbclick",
+                    "mouseenter",
+                    "mouseleave",
+                    "mousemove",
+                    "mousedown",
+                    "mouseup",
+                ])) {
                 if (mesh.isMesh && !mesh.geometry.boundsTree) {
-                    mesh.geometry.computeBoundsTree();
+                    computeBoundsTree.apply(mesh.geometry);
+                    disposeBoundsTree.apply(mesh.geometry);
                 }
                 meshs.push(mesh);
             }
@@ -120,6 +133,7 @@ export default class ThreeMouse {
             const { face, object } = intersection;
             // face && face.normal.applyMatrix4(object.matrixWorld);
             const MouseEvent = Object.assign(intersection, {
+                // 将来可能用到的对象
                 e: this._mousemoveEvent,
                 renderer: this._renderer,
                 camera: this._camera,
@@ -128,7 +142,7 @@ export default class ThreeMouse {
                 offsetX: this._mousemoveEvent.offsetX,
                 offsetY: this._mousemoveEvent.offsetY,
                 x: this._mousemoveEvent.x,
-                y: this._mousemoveEvent.y
+                y: this._mousemoveEvent.y,
             });
             // 触发滑动事件
             if (this._mesh_on === MouseEvent.object) {
@@ -150,7 +164,9 @@ export default class ThreeMouse {
             }
             this._mesh_on = MouseEvent.object || undefined; // 设置为当前鼠标上的对象
             // 鼠标样式
-            if (this._mesh_on && this._mesh_on.userData && this._mesh_on.userData.cursor) {
+            if (this._mesh_on &&
+                this._mesh_on.userData &&
+                this._mesh_on.userData.cursor) {
                 this._renderer.domElement.style.cursor = this._mesh_on.userData.cursor;
             }
             else {
@@ -169,7 +185,7 @@ export default class ThreeMouse {
                     offsetX: this._mousemoveEvent.offsetX,
                     offsetY: this._mousemoveEvent.offsetY,
                     x: this._mousemoveEvent.x,
-                    y: this._mousemoveEvent.y
+                    y: this._mousemoveEvent.y,
                 });
             }
             // 置空当前鼠标上面的对象
@@ -192,7 +208,7 @@ export default class ThreeMouse {
                 offsetX: this._mousemoveEvent.offsetX,
                 offsetY: this._mousemoveEvent.offsetY,
                 x: this._mousemoveEvent.x,
-                y: this._mousemoveEvent.y
+                y: this._mousemoveEvent.y,
             });
         }
         // 置空当前鼠标上面的对象
@@ -203,12 +219,15 @@ export default class ThreeMouse {
     _mousemove = (e) => {
         this._mousemoveEvent = e;
         this._frame = this._renderer.info.render.frame;
-        if (document.pointerLockElement) { // 如果当前有元素 锁住了鼠标
+        if (document.pointerLockElement) {
+            // 如果当前有元素 锁住了鼠标
             this._mosePosition.set(0, 0); // 鼠标就指向canvas 的正中心
         }
         else {
-            this._mosePosition.x = (e.offsetX / this._renderer.domElement.offsetWidth) * 2 - 1;
-            this._mosePosition.y = -(e.offsetY / this._renderer.domElement.offsetHeight) * 2 + 1;
+            this._mosePosition.x =
+                (e.offsetX / this._renderer.domElement.offsetWidth) * 2 - 1;
+            this._mosePosition.y =
+                -(e.offsetY / this._renderer.domElement.offsetHeight) * 2 + 1;
         }
         this._raycaster.setFromCamera(this._mosePosition, this._camera); // 设置射线拾取的参数
     };
@@ -235,7 +254,7 @@ export default class ThreeMouse {
                 offsetX: this._mousemoveEvent.offsetX,
                 offsetY: this._mousemoveEvent.offsetY,
                 x: this._mousemoveEvent.x,
-                y: this._mousemoveEvent.y
+                y: this._mousemoveEvent.y,
             });
         }
     };
@@ -260,7 +279,7 @@ export default class ThreeMouse {
                 offsetX: this._mousemoveEvent.offsetX,
                 offsetY: this._mousemoveEvent.offsetY,
                 x: this._mousemoveEvent.x,
-                y: this._mousemoveEvent.y
+                y: this._mousemoveEvent.y,
             });
         }
         // 触发鼠标弹起事件
@@ -271,7 +290,7 @@ export default class ThreeMouse {
             // 是否有双击事件
             if (this.hasEvent(this._mesh_Down, ["dbclick"])) {
                 this._click_num++;
-                await new Promise(resolve => setTimeout(resolve, 200));
+                await new Promise((resolve) => setTimeout(resolve, 200));
                 // 只点击了一次
                 if (this._click_num === 1) {
                     if (this.hasEvent(this._mesh_Down, ["click"])) {
@@ -285,10 +304,10 @@ export default class ThreeMouse {
                             offsetX: this._mousemoveEvent.offsetX,
                             offsetY: this._mousemoveEvent.offsetY,
                             x: this._mousemoveEvent.x,
-                            y: this._mousemoveEvent.y
+                            y: this._mousemoveEvent.y,
                         });
                     }
-                    if (this.hasEvent(this._mesh_Down, ["leftclick"]) && (e.button === 0)) {
+                    if (this.hasEvent(this._mesh_Down, ["leftclick"]) && e.button === 0) {
                         this._mesh_Down.dispatchEvent({
                             e: this._mouseEvent,
                             ...intersection,
@@ -299,10 +318,11 @@ export default class ThreeMouse {
                             offsetX: this._mousemoveEvent.offsetX,
                             offsetY: this._mousemoveEvent.offsetY,
                             x: this._mousemoveEvent.x,
-                            y: this._mousemoveEvent.y
+                            y: this._mousemoveEvent.y,
                         });
                     }
-                    if (this.hasEvent(this._mesh_Down, ["rightclick"]) && (e.button === 2)) {
+                    if (this.hasEvent(this._mesh_Down, ["rightclick"]) &&
+                        e.button === 2) {
                         this._mesh_Down.dispatchEvent({
                             e: this._mouseEvent,
                             ...intersection,
@@ -313,12 +333,14 @@ export default class ThreeMouse {
                             offsetX: this._mousemoveEvent.offsetX,
                             offsetY: this._mousemoveEvent.offsetY,
                             x: this._mousemoveEvent.x,
-                            y: this._mousemoveEvent.y
+                            y: this._mousemoveEvent.y,
                         });
                     }
                 }
                 else if (this._click_num > 1) {
-                    if (this.hasEvent(this._mesh_Down, ["dbclick"]) && (new Date().valueOf() - this._click_num > 1) && (e.button === 0)) {
+                    if (this.hasEvent(this._mesh_Down, ["dbclick"]) &&
+                        new Date().valueOf() - this._click_num > 1 &&
+                        e.button === 0) {
                         this._mesh_Down.dispatchEvent({
                             e: this._mouseEvent,
                             ...intersection,
@@ -329,7 +351,7 @@ export default class ThreeMouse {
                             offsetX: this._mousemoveEvent.offsetX,
                             offsetY: this._mousemoveEvent.offsetY,
                             x: this._mousemoveEvent.x,
-                            y: this._mousemoveEvent.y
+                            y: this._mousemoveEvent.y,
                         });
                     }
                 }
@@ -346,10 +368,10 @@ export default class ThreeMouse {
                         offsetX: this._mousemoveEvent.offsetX,
                         offsetY: this._mousemoveEvent.offsetY,
                         x: this._mousemoveEvent.x,
-                        y: this._mousemoveEvent.y
+                        y: this._mousemoveEvent.y,
                     });
                 }
-                if (this.hasEvent(this._mesh_Down, ["leftclick"]) && (e.button === 0)) {
+                if (this.hasEvent(this._mesh_Down, ["leftclick"]) && e.button === 0) {
                     this._mesh_Down.dispatchEvent({
                         e: this._mouseEvent,
                         ...intersection,
@@ -360,10 +382,10 @@ export default class ThreeMouse {
                         offsetX: this._mousemoveEvent.offsetX,
                         offsetY: this._mousemoveEvent.offsetY,
                         x: this._mousemoveEvent.x,
-                        y: this._mousemoveEvent.y
+                        y: this._mousemoveEvent.y,
                     });
                 }
-                if (this.hasEvent(this._mesh_Down, ["rightclick"]) && (e.button === 2)) {
+                if (this.hasEvent(this._mesh_Down, ["rightclick"]) && e.button === 2) {
                     this._mesh_Down.dispatchEvent({
                         e: this._mouseEvent,
                         ...intersection,
@@ -374,7 +396,7 @@ export default class ThreeMouse {
                         offsetX: this._mousemoveEvent.offsetX,
                         offsetY: this._mousemoveEvent.offsetY,
                         x: this._mousemoveEvent.x,
-                        y: this._mousemoveEvent.y
+                        y: this._mousemoveEvent.y,
                     });
                 }
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "three-base",
-  "version": "2.0.115",
+  "version": "2.0.117",
   "description": "three 3d three-base",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/pass/glow_pass.js

@@ -556,14 +556,12 @@ export default function glow_pass(renderer, camera, object3d, baseDepthTexture)
     blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
     blurShader.uniforms.opacity.value = 0.1;
     fsQuad.render(renderer, blurShader);
-    //最后抗锯齿
     renderer.setRenderTarget(blur1TextureTarget);
-    FXAAShaderMaterial.uniforms.tDiffuse.value = blur2TextureTarget.texture;
-    fsQuad.render(renderer, FXAAShaderMaterial);
+    copyShader.uniforms.map.value = blur2TextureTarget.texture;
+    fsQuad.render(renderer, copyShader);
     // 还原帧缓冲区 减去原始纹理保留描边
     renderer.setRenderTarget(originRenderTarget);
-    filterSelectShader.uniforms.selectTexture.value =
-        selectDethpTestTextureTarget.texture;
+    filterSelectShader.uniforms.selectTexture.value = selectDethpTestTextureTarget.texture;
     filterSelectShader.uniforms.blurTexture.value = blur1TextureTarget.texture;
     filterSelectShader.uniforms.opacity.value = glow_opacity;
     filterSelectShader.blending = NormalBlending; // 与有的纹理融合计算 保留前面通道传递下来的纹理

package/pass/stroke_pass.js

@@ -314,7 +314,7 @@ const FXAAShaderMaterial = new ShaderMaterial({
     transparent: true
 });
 // 描边着色器
-const blurShader = new RawShaderMaterial({
+const strokeShader = new RawShaderMaterial({
     uniforms: {
         tDiffuse: { value: null },
         color: { value: new Color("#0f0") },
@@ -483,12 +483,12 @@ export default function stroke_pass(renderer, camera, object3d, baseDepthTexture
     renderer.clear();
     renderer.render(scene, camera);
     // 设置描边着色器的分辨率
-    blurShader.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
+    strokeShader.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
     // 设置抗锯齿着色器的分辨率
     FXAAShaderMaterial.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
     //描边颜色
-    blurShader.uniforms.color.value.set(stroke_color);
-    blurShader.uniforms.width.value = 1;
+    strokeShader.uniforms.color.value.set(stroke_color);
+    strokeShader.uniforms.width.value = 1;
     //深度测试
     renderer.setRenderTarget(selectDethpTestTextureTarget);
     renderer.clear();
@@ -498,26 +498,25 @@ export default function stroke_pass(renderer, camera, object3d, baseDepthTexture
     fsQuad.render(renderer, depthTestShader);
     //一次描边
     renderer.setRenderTarget(blur1TextureTarget);
-    blurShader.uniforms.tDiffuse.value = selectDethpTestTextureTarget.texture;
-    fsQuad.render(renderer, blurShader);
+    strokeShader.uniforms.tDiffuse.value = selectDethpTestTextureTarget.texture;
+    fsQuad.render(renderer, strokeShader);
     //二次描边
     renderer.setRenderTarget(blur2TextureTarget);
-    blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
-    fsQuad.render(renderer, blurShader);
+    strokeShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
+    fsQuad.render(renderer, strokeShader);
     for (let i = 0; i < stroke_width - 2; i++) {
         //一次描边
         renderer.setRenderTarget(blur1TextureTarget);
-        blurShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
-        fsQuad.render(renderer, blurShader);
+        strokeShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
+        fsQuad.render(renderer, strokeShader);
         //二次描边
         renderer.setRenderTarget(blur2TextureTarget);
-        blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
-        fsQuad.render(renderer, blurShader);
+        strokeShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
+        fsQuad.render(renderer, strokeShader);
     }
-    //最后抗锯齿
     renderer.setRenderTarget(blur1TextureTarget);
-    FXAAShaderMaterial.uniforms.tDiffuse.value = blur2TextureTarget.texture;
-    fsQuad.render(renderer, FXAAShaderMaterial);
+    copyShader.uniforms.map.value = blur2TextureTarget.texture;
+    fsQuad.render(renderer, copyShader);
     // 还原帧缓冲区 减去原始纹理保留描边
     renderer.setRenderTarget(originRenderTarget);
     filterSelectShader.uniforms.selectTexture.value = selectDethpTestTextureTarget.texture;

package/shaders/baseTextureToRenderShader.d.ts

@@ -0,0 +1,2 @@
+import { ShaderMaterial } from "three";
+export declare const baseTextureToRenderShader: ShaderMaterial;

package/shaders/baseTextureToRenderShader.js

@@ -0,0 +1,237 @@
+import { ShaderMaterial, Vector2, ShaderChunk, NoBlending } from "three";
+// 渲染目标绘制到渲染器着色器
+export const baseTextureToRenderShader = new ShaderMaterial({
+    uniforms: {
+        tDiffuse: { value: null },
+        resolution: { value: new Vector2(1 / 1024, 1 / 1024) }
+    },
+    vertexShader: `
+        ${ShaderChunk.common}
+        ${ShaderChunk.logdepthbuf_pars_vertex}
+        varying vec2 vUv;
+        void main() {
+            vUv = uv;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+            ${ShaderChunk.logdepthbuf_vertex}
+        }
+    `,
+    fragmentShader: `
+        ${ShaderChunk.logdepthbuf_pars_fragment}
+        precision highp float;
+
+        uniform sampler2D tDiffuse;
+    
+        uniform vec2 resolution;
+    
+        varying vec2 vUv;
+    
+        #ifndef FXAA_DISCARD
+                //
+                // Only valid for PC OpenGL currently.
+                // Probably will not work when FXAA_GREEN_AS_LUMA = 1.
+                //
+                // 1 = Use discard on pixels which don't need AA.
+                //     For APIs which enable concurrent TEX+ROP from same surface.
+                // 0 = Return unchanged color on pixels which don't need AA.
+                //
+                #define FXAA_DISCARD 0
+        #endif
+    
+        /*--------------------------------------------------------------------------*/
+        #define FxaaTexTop(t, p) texture2D(t, p, -100.0)
+        #define FxaaTexOff(t, p, o, r) texture2D(t, p + (o * r), -100.0)
+        /*--------------------------------------------------------------------------*/
+    
+        #define NUM_SAMPLES 5
+    
+        // assumes colors have premultipliedAlpha, so that the calculated color contrast is scaled by alpha
+        float contrast( vec4 a, vec4 b ) {
+                vec4 diff = abs( a - b );
+                return max( max( max( diff.r, diff.g ), diff.b ), diff.a );
+        }
+    
+        /*============================================================================
+    
+                                        FXAA3 QUALITY - PC
+    
+        ============================================================================*/
+    
+        /*--------------------------------------------------------------------------*/
+        vec4 FxaaPixelShader(
+                vec2 posM,
+                sampler2D tex,
+                vec2 fxaaQualityRcpFrame,
+                float fxaaQualityEdgeThreshold,
+                float fxaaQualityinvEdgeThreshold
+        ) {
+                vec4 rgbaM = FxaaTexTop(tex, posM);
+                vec4 rgbaS = FxaaTexOff(tex, posM, vec2( 0.0, 1.0), fxaaQualityRcpFrame.xy);
+                vec4 rgbaE = FxaaTexOff(tex, posM, vec2( 1.0, 0.0), fxaaQualityRcpFrame.xy);
+                vec4 rgbaN = FxaaTexOff(tex, posM, vec2( 0.0,-1.0), fxaaQualityRcpFrame.xy);
+                vec4 rgbaW = FxaaTexOff(tex, posM, vec2(-1.0, 0.0), fxaaQualityRcpFrame.xy);
+                // . S .
+                // W M E
+                // . N .
+    
+                bool earlyExit = max( max( max(
+                        contrast( rgbaM, rgbaN ),
+                        contrast( rgbaM, rgbaS ) ),
+                        contrast( rgbaM, rgbaE ) ),
+                        contrast( rgbaM, rgbaW ) )
+                        < fxaaQualityEdgeThreshold;
+                // . 0 .
+                // 0 0 0
+                // . 0 .
+    
+                #if (FXAA_DISCARD == 1)
+                        if(earlyExit) FxaaDiscard;
+                #else
+                        if(earlyExit) return rgbaM;
+                #endif
+    
+                float contrastN = contrast( rgbaM, rgbaN );
+                float contrastS = contrast( rgbaM, rgbaS );
+                float contrastE = contrast( rgbaM, rgbaE );
+                float contrastW = contrast( rgbaM, rgbaW );
+    
+                float relativeVContrast = ( contrastN + contrastS ) - ( contrastE + contrastW );
+                relativeVContrast *= fxaaQualityinvEdgeThreshold;
+    
+                bool horzSpan = relativeVContrast > 0.;
+                // . 1 .
+                // 0 0 0
+                // . 1 .
+    
+                // 45 deg edge detection and corners of objects, aka V/H contrast is too similar
+                if( abs( relativeVContrast ) < .3 ) {
+                        // locate the edge
+                        vec2 dirToEdge;
+                        dirToEdge.x = contrastE > contrastW ? 1. : -1.;
+                        dirToEdge.y = contrastS > contrastN ? 1. : -1.;
+                        // . 2 .      . 1 .
+                        // 1 0 2  ~=  0 0 1
+                        // . 1 .      . 0 .
+    
+                        // tap 2 pixels and see which ones are "outside" the edge, to
+                        // determine if the edge is vertical or horizontal
+    
+                        vec4 rgbaAlongH = FxaaTexOff(tex, posM, vec2( dirToEdge.x, -dirToEdge.y ), fxaaQualityRcpFrame.xy);
+                        float matchAlongH = contrast( rgbaM, rgbaAlongH );
+                        // . 1 .
+                        // 0 0 1
+                        // . 0 H
+    
+                        vec4 rgbaAlongV = FxaaTexOff(tex, posM, vec2( -dirToEdge.x, dirToEdge.y ), fxaaQualityRcpFrame.xy);
+                        float matchAlongV = contrast( rgbaM, rgbaAlongV );
+                        // V 1 .
+                        // 0 0 1
+                        // . 0 .
+    
+                        relativeVContrast = matchAlongV - matchAlongH;
+                        relativeVContrast *= fxaaQualityinvEdgeThreshold;
+    
+                        if( abs( relativeVContrast ) < .3 ) { // 45 deg edge
+                                // 1 1 .
+                                // 0 0 1
+                                // . 0 1
+    
+                                // do a simple blur
+                                return mix(
+                                        rgbaM,
+                                        (rgbaN + rgbaS + rgbaE + rgbaW) * .25,
+                                        .4
+                                );
+                        }
+    
+                        horzSpan = relativeVContrast > 0.;
+                }
+    
+                if(!horzSpan) rgbaN = rgbaW;
+                if(!horzSpan) rgbaS = rgbaE;
+                // . 0 .      1
+                // 1 0 1  ->  0
+                // . 0 .      1
+    
+                bool pairN = contrast( rgbaM, rgbaN ) > contrast( rgbaM, rgbaS );
+                if(!pairN) rgbaN = rgbaS;
+    
+                vec2 offNP;
+                offNP.x = (!horzSpan) ? 0.0 : fxaaQualityRcpFrame.x;
+                offNP.y = ( horzSpan) ? 0.0 : fxaaQualityRcpFrame.y;
+    
+                bool doneN = false;
+                bool doneP = false;
+    
+                float nDist = 0.;
+                float pDist = 0.;
+    
+                vec2 posN = posM;
+                vec2 posP = posM;
+    
+                int iterationsUsed = 0;
+                int iterationsUsedN = 0;
+                int iterationsUsedP = 0;
+                for( int i = 0; i < NUM_SAMPLES; i++ ) {
+                        iterationsUsed = i;
+    
+                        float increment = float(i + 1);
+    
+                        if(!doneN) {
+                                nDist += increment;
+                                posN = posM + offNP * nDist;
+                                vec4 rgbaEndN = FxaaTexTop(tex, posN.xy);
+                                doneN = contrast( rgbaEndN, rgbaM ) > contrast( rgbaEndN, rgbaN );
+                                iterationsUsedN = i;
+                        }
+    
+                        if(!doneP) {
+                                pDist += increment;
+                                posP = posM - offNP * pDist;
+                                vec4 rgbaEndP = FxaaTexTop(tex, posP.xy);
+                                doneP = contrast( rgbaEndP, rgbaM ) > contrast( rgbaEndP, rgbaN );
+                                iterationsUsedP = i;
+                        }
+    
+                        if(doneN || doneP) break;
+                }
+    
+    
+                if ( !doneP && !doneN ) return rgbaM; // failed to find end of edge
+    
+                float dist = min(
+                        doneN ? float( iterationsUsedN ) / float( NUM_SAMPLES - 1 ) : 1.,
+                        doneP ? float( iterationsUsedP ) / float( NUM_SAMPLES - 1 ) : 1.
+                );
+    
+                // hacky way of reduces blurriness of mostly diagonal edges
+                // but reduces AA quality
+                dist = pow(dist, .5);
+    
+                dist = 1. - dist;
+    
+                return mix(
+                        rgbaM,
+                        rgbaN,
+                        dist * .5
+                );
+        }
+    
+        void main() {
+                const float edgeDetectionQuality = .2;
+                const float invEdgeDetectionQuality = 1. / edgeDetectionQuality;
+    
+                gl_FragColor = sRGBTransferOETF(FxaaPixelShader(
+                        vUv,
+                        tDiffuse,
+                        resolution,
+                        edgeDetectionQuality, // [0,1] contrast needed, otherwise early discard
+                        invEdgeDetectionQuality
+                ));
+            ${ShaderChunk.logdepthbuf_fragment}
+        }
+    `,
+    blending: NoBlending,
+    depthTest: false,
+    depthWrite: false,
+    transparent: true
+});

package/shaders.d.ts

@@ -5,6 +5,3 @@ export declare const orthographicCamera: OrthographicCamera;
 export declare const clearShader: ShaderMaterial;
 export declare const intersectionShader: ShaderMaterial;
 export declare const copyShader: ShaderMaterial;
-export declare const baseTextureToRenderShader: ShaderMaterial;
-export declare const strokeShader: ShaderMaterial;
-export declare const gaussBlurShader: ShaderMaterial;

package/shaders.js

@@ -4,7 +4,7 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2022-04-02 18:28:38
  */
-import { Color, NoBlending, OrthographicCamera, ShaderChunk, ShaderMaterial, Vector2 } from "three";
+import { NoBlending, OrthographicCamera, ShaderChunk, ShaderMaterial } from "three";
 import FullScreenQuad from "./pass/FullScreenQuad";
 // 常用着色器及工具
 // 全屏渲染模型
@@ -95,163 +95,3 @@ export const copyShader = new ShaderMaterial({
     depthWrite: true,
     transparent: true,
 });
-// 渲染目标绘制到渲染器着色器
-export const baseTextureToRenderShader = new ShaderMaterial({
-    uniforms: {
-        map: { value: null },
-        opacity: { value: 1.0 }, // 透明度
-    },
-    vertexShader: `
-        ${ShaderChunk.common}
-        ${ShaderChunk.logdepthbuf_pars_vertex}
-        varying vec2 vUv;
-        void main() {
-            vUv = uv;
-            gl_Position = vec4(position, 1.0);
-            ${ShaderChunk.logdepthbuf_vertex}
-        }
-    `,
-    fragmentShader: `
-    ${ShaderChunk.logdepthbuf_pars_fragment}
-    uniform sampler2D map;
-    uniform float opacity;
-    varying vec2 vUv;
-    void main() {
-        gl_FragColor = sRGBTransferOETF(texture(map, vUv));
-        ${ShaderChunk.logdepthbuf_fragment}
-    }
-`,
-    depthTest: true,
-    depthWrite: true,
-    transparent: true,
-});
-// 描边着色器
-export const strokeShader = new ShaderMaterial({
-    uniforms: {
-        map: { value: null },
-        resolution: { value: new Vector2(512, 512) },
-        strokeWidth: { value: 1.0 },
-        strokeColor: { value: new Color("#B2F2FF") },
-        opacity: { value: 1.0 }, // 透明度
-    },
-    vertexShader: `
-            varying vec2 vUv;
-            void main() {
-                vUv = uv;
-                gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
-            }
-        `,
-    fragmentShader: `
-            uniform sampler2D map;
-            uniform vec2 resolution;
-            uniform vec3 strokeColor; // 描边颜色
-            uniform float strokeWidth; // 描边厚度
-            uniform float opacity; // 透明度
-            
-            varying vec2 vUv;
-
-            // 获取当前叠加vu坐标偏移量的颜色值
-            vec4 offsetColor(vec2 vu){
-                return texture2D(map, vUv + (vu * (strokeWidth / resolution) ) );
-            }
-
-            vec4 fragColor(){
-
-                vec4 currentColor = offsetColor(vec2(0.0, 0.0));
-
-                if(
-                    currentColor.a < min(0.2, opacity) && (
-                        offsetColor(vec2(0.0, 1.0)).a > 0.0 ||
-                        offsetColor(vec2(0.0, -1.0)).a > 0.0 ||
-                        offsetColor(vec2(1.0, 0.0)).a > 0.0 ||
-                        offsetColor(vec2(-1.0, 0.0)).a > 0.0 ||
-
-                        offsetColor(vec2(1.0) * 0.7).a > 0.0 ||
-                        offsetColor(vec2(-1.0) * 0.7).a > 0.0 ||
-                        offsetColor(vec2(-1.0, 1.0) * 0.7).a > 0.0 ||
-                        offsetColor(vec2(1.0, -1.0) * 0.7).a > 0.0
-                    )
-                ){
-                    return vec4( strokeColor, opacity);
-                }else{
-                    // discard;
-                    return offsetColor(vec2(0.0, 0.0));
-                }
-
-            }
-
-            void main() {
-                gl_FragColor = fragColor();
-            }
-        `,
-    blending: NoBlending,
-    depthTest: true,
-    depthWrite: true,
-    transparent: true,
-});
-// 高斯模糊着色器 让颜色过渡更自然
-export const gaussBlurShader = new ShaderMaterial({
-    uniforms: {
-        map: { value: null },
-        opacity: { value: 1.0 },
-        radius: { value: 3.0 },
-        resolution: { value: new Vector2(512, 512) }, // 渲染器的分辨率
-    },
-    vertexShader: `
-		varying vec2 vUv;
-		void main() {
-			vUv = uv;
-			gl_Position = vec4(position, 1.0);
-		}
-	`,
-    fragmentShader: `
-		uniform sampler2D map;
-		uniform float opacity;
-		uniform vec2 resolution;
-		uniform float radius;
-		varying vec2 vUv;
-
-        vec4 offsetColor( vec2 uv){
-            return texture2D(map, vUv + (uv / resolution * radius) );
-        }
-
-        vec4 blurColor(){
-
-            vec4 leftColor = offsetColor( vec2(-1.0, 0.0) );
-
-            vec4 rightColor = offsetColor( vec2(1.0, 0.0) );
-
-            // 左右颜色混合
-            vec4 leftRightColor = vec4( 
-                mix( leftColor.rgb ,rightColor.rgb, rightColor.a / (leftColor.a + rightColor.a)),
-                (leftColor.a + rightColor.a) / 2.0
-            );
-
-            vec4 downColor =  offsetColor( vec2(0.0, -1.0));
-
-            vec4 upColor =  offsetColor( vec2(0.0, 1.0));
-
-            // 上下颜色混合
-            vec4 upDownColor = vec4(
-                mix( downColor.rgb, upColor.rgb, upColor.a / (downColor.a + upColor.a) ),
-                (downColor.a + upColor.a) / 2.0
-            );
-           
-            vec4 color = vec4(
-                mix( leftRightColor.rgb, upDownColor.rgb, upDownColor.a / (leftRightColor.a + upDownColor.a) ),
-                (leftRightColor.a + upDownColor.a) / 2.0
-            );
-                
-            return color;
-        }
-
-		void main() {
-			gl_FragColor = blurColor();
-            gl_FragColor.a *= opacity;
-		}
-	`,
-    blending: NoBlending,
-    depthTest: false,
-    depthWrite: false,
-    transparent: true,
-});