three-base 2.0.1 → 2.0.2

package/shaders.ts

@@ -0,0 +1,264 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-03-24 16:38:35
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2022-04-02 18:28:38
+ */
+
+import { BufferGeometry, Color, Float32BufferAttribute, Mesh, NoBlending, OrthographicCamera, ShaderChunk, ShaderMaterial, Vector2, WebGLRenderer } from "three";
+
+
+
+// https://github.com/mrdoob/three.js/pull/21358
+
+const _geometry = new BufferGeometry();
+_geometry.setAttribute("position", new Float32BufferAttribute([- 1, 3, 0, - 1, - 1, 0, 3, - 1, 0], 3));
+_geometry.setAttribute("uv", new Float32BufferAttribute([0, 2, 0, 0, 2, 0], 2));
+
+class FullScreenQuad {
+    constructor() {
+        this._mesh = new Mesh(_geometry);
+    }
+    _mesh!: Mesh;
+    dispose() {
+        this._mesh.geometry.dispose();
+    }
+    render(renderer: WebGLRenderer) {
+        renderer.render(this._mesh, orthographicCamera);
+    }
+    get material() {
+        return this._mesh.material;
+    }
+    set material(value) {
+        this._mesh.material = value;
+    }
+}
+
+
+// 常用着色器及工具
+
+
+// 全屏渲染模型
+export const fullScreenMesh = new FullScreenQuad();
+
+export const orthographicCamera = new OrthographicCamera(- 1, 1, 1, - 1, 0, 1);
+
+// 清理着色器
+export const clearShader = new ShaderMaterial({
+    vertexShader: `
+        varying vec2 vUv;
+        void main() {
+            vUv = uv;
+            gl_Position = vec4(position, 1.0);
+        }
+    `,
+    fragmentShader: `
+        void main() {
+            gl_FragColor = vec4(0.0);
+        }
+    `,
+    blending: NoBlending, // 渲染时不与背景融合计算 直接替换
+    depthTest: false,
+    depthWrite: false,
+    transparent: true
+});
+
+// 交集着色器提取相同的像素点
+export const intersectionShader = new ShaderMaterial({
+    uniforms: {
+        map1: { value: null }, // 贴图纹理1
+        map2: { value: null }, // 贴图纹理2
+    },
+    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 map1;
+        uniform sampler2D map2;
+        varying vec2 vUv;
+        void main() {
+            if(texture2D(map1, vUv) ==  texture2D(map2, vUv)){
+                gl_FragColor = texture2D(map1, vUv);
+            }else{
+                discard;
+            }
+            ${ShaderChunk.logdepthbuf_fragment}
+        }
+    `,
+    blending: NoBlending, // 渲染时不与背景融合计算 直接替换
+    depthTest: true,
+    depthWrite: true,
+    transparent: true
+});
+
+
+// 拷贝着色器
+export const coptyShader = new ShaderMaterial({
+    uniforms: {
+        map: { value: null }, // 纹理
+        opacity: { value: 1.0 } // 透明度
+    },
+    vertexShader: `
+        varying vec2 vUv;
+        void main() {
+            vUv = uv;
+            gl_Position = vec4(position, 1.0);
+        }
+    `,
+    fragmentShader: `
+        uniform sampler2D map;
+        uniform float opacity;
+        varying vec2 vUv;
+        void main() {
+
+            gl_FragColor = texture2D(map, vUv) * opacity;
+
+        }
+    `,
+    // blending: NoBlending, // 渲染时不与背景融合计算 直接替换
+    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
+});

package/threeLoader.d.ts

@@ -0,0 +1,20 @@
+import { CanvasTexture, EventDispatcher, Texture, TextureLoader } from "three";
+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";
+declare class ThreeLoader extends EventDispatcher {
+    constructor();
+    anisotropy: number;
+    setAnisotropy(v: number): void;
+    textureMap: Map<string, Texture>;
+    textureLoader: TextureLoader;
+    getTexture(src: string | HTMLCanvasElement): CanvasTexture | Texture;
+    fbxLoader: FBXLoader;
+    objLoader: OBJLoader;
+    mtlLoader: MTLLoader;
+    gltfLoader: GLTFLoader;
+    onload: boolean;
+}
+declare const threeLoader: ThreeLoader;
+export default threeLoader;

package/threeLoader.js

@@ -0,0 +1,118 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-04-07 16:42:26
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-02-07 11:11:48
+ */
+import { CanvasTexture, DefaultLoadingManager, EventDispatcher, RepeatWrapping, SRGBColorSpace, TextureLoader, VideoTexture } from "three";
+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 { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
+// 引入静态资源
+//@ts-ignore
+import dracoWasmWrapperJS from "./lib/draco/draco_wasm_wrapper.js?url";
+//@ts-ignore
+import dracoDecoderJS from "./lib/draco/draco_decoder.js?url";
+//@ts-ignore
+import dracoDecoderWASM from "./lib/draco/draco_decoder.wasm?url";
+// 加载器
+class ThreeLoader extends EventDispatcher {
+    constructor() {
+        super();
+        DefaultLoadingManager.onStart = () => {
+            this.onload = false;
+        };
+        // 有资源加载完成时通知渲染器
+        DefaultLoadingManager.onProgress = () => {
+            this.dispatchEvent({ type: "progress" });
+        };
+        DefaultLoadingManager.onLoad = () => {
+            this.onload = true;
+        };
+    }
+    // 各向异性
+    anisotropy = 1;
+    // 设置各向异性 由渲染器来调用并设置
+    setAnisotropy(v) {
+        this.anisotropy = v;
+    }
+    ;
+    // 纹理对向缓存
+    textureMap = new Map();
+    // 纹理加载器
+    textureLoader = new TextureLoader();
+    // 获取地址对应的单例纹理对象
+    getTexture(src) {
+        if (src instanceof HTMLCanvasElement) {
+            const canvasTexture = new CanvasTexture(src);
+            canvasTexture.wrapS = canvasTexture.wrapT = RepeatWrapping;
+            canvasTexture.anisotropy = this.anisotropy;
+            canvasTexture.colorSpace = SRGBColorSpace;
+            return canvasTexture;
+        }
+        let texture = this.textureMap.get(src);
+        if (!texture) {
+            if (/\.mp4$/.test(src)) {
+                const videoDom = document.createElement("video");
+                videoDom.autoplay = true;
+                videoDom.loop = true;
+                videoDom.muted = true;
+                videoDom.preload = "auto";
+                videoDom.playsInline = true;
+                videoDom.src = src;
+                document.addEventListener("pointerup", () => {
+                    videoDom.pause();
+                    videoDom.play();
+                });
+                texture = new VideoTexture(videoDom);
+            }
+            else {
+                texture = this.textureLoader.load(src, tex => {
+                    tex.image.crossOrigin = "anonymous";
+                });
+            }
+            this.textureMap.set(src, texture);
+        }
+        texture.wrapS = texture.wrapT = RepeatWrapping;
+        texture.anisotropy = this.anisotropy;
+        texture.colorSpace = SRGBColorSpace;
+        return texture;
+    }
+    ;
+    // fbx模型加载器
+    fbxLoader = new FBXLoader();
+    //obj 加载器
+    objLoader = new OBJLoader();
+    // 材质加载器
+    mtlLoader = new MTLLoader();
+    // gltf 加载器
+    gltfLoader = (() => {
+        const loader = new GLTFLoader();
+        const dracoLoader = new class ThreeBaseDRACOLoader extends DRACOLoader {
+            _loadLibrary(url, responseType) {
+                //@ts-ignore
+                let urlConf = (process.env.NODE_ENV === "development") ? {
+                    "draco_decoder.js": "draco_decoder.js",
+                    "draco_wasm_wrapper.js": "draco_wasm_wrapper.js",
+                    "draco_decoder.wasm": "draco_decoder.wasm"
+                } : {
+                    "draco_decoder.js": dracoWasmWrapperJS,
+                    "draco_wasm_wrapper.js": dracoDecoderJS,
+                    "draco_decoder.wasm": dracoDecoderWASM
+                };
+                //@ts-ignore
+                return super._loadLibrary(urlConf[url], responseType);
+            }
+        }();
+        //@ts-ignore
+        dracoLoader.setDecoderPath((process.env.NODE_ENV === "development") ? '/node_modules/three/examples/jsm/libs/draco/' : '');
+        loader.setDRACOLoader(dracoLoader);
+        return loader;
+    })();
+    // 是否加载完成
+    onload = true;
+}
+const threeLoader = new ThreeLoader();
+export default threeLoader;

package/threeLoader.ts

@@ -0,0 +1,147 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2022-04-07 16:42:26 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-02-07 11:11:48
+ */
+
+import { CanvasTexture, DefaultLoadingManager, EventDispatcher, RepeatWrapping, SRGBColorSpace, Texture, TextureLoader, VideoTexture } from "three";
+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 { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
+
+// 引入静态资源
+//@ts-ignore
+import dracoWasmWrapperJS from "./lib/draco/draco_wasm_wrapper.js?url";
+//@ts-ignore
+import dracoDecoderJS from "./lib/draco/draco_decoder.js?url";
+//@ts-ignore
+import dracoDecoderWASM from "./lib/draco/draco_decoder.wasm?url";
+
+// 加载器
+class ThreeLoader extends EventDispatcher {
+
+    constructor() {
+        super();
+
+        DefaultLoadingManager.onStart = () => {
+            this.onload = false;
+        }
+
+        // 有资源加载完成时通知渲染器
+        DefaultLoadingManager.onProgress = () => {
+            this.dispatchEvent({ type: "progress" });
+        }
+
+        DefaultLoadingManager.onLoad = () => {
+            this.onload = true;
+        }
+    }
+
+    // 各向异性
+    anisotropy = 1;
+
+    // 设置各向异性 由渲染器来调用并设置
+    setAnisotropy(v: number) {
+        this.anisotropy = v;
+    };
+
+    // 纹理对向缓存
+    textureMap = new Map() as Map<string, Texture>;
+
+    // 纹理加载器
+    textureLoader = new TextureLoader();
+
+    // 获取地址对应的单例纹理对象
+    getTexture(src: string | HTMLCanvasElement) {
+
+        if (src instanceof HTMLCanvasElement) {
+
+            const canvasTexture = new CanvasTexture(src);
+            canvasTexture.wrapS = canvasTexture.wrapT = RepeatWrapping;
+            canvasTexture.anisotropy = this.anisotropy;
+            canvasTexture.colorSpace = SRGBColorSpace;
+
+            return canvasTexture;
+        }
+
+        let texture = this.textureMap.get(src);
+
+        if (!texture) {
+            if (/\.mp4$/.test(src)) {
+                const videoDom = document.createElement("video");
+                videoDom.autoplay = true;
+                videoDom.loop = true;
+                videoDom.muted = true;
+                videoDom.preload = "auto";
+                videoDom.playsInline = true;
+                videoDom.src = src;
+                document.addEventListener("pointerup", () => {
+                    videoDom.pause();
+                    videoDom.play();
+                });
+                texture = new VideoTexture(videoDom);
+            } else {
+
+                texture = this.textureLoader.load(src, tex => {
+                    tex.image.crossOrigin = "anonymous";
+                });
+
+            }
+
+            this.textureMap.set(src, texture);
+        }
+
+        texture.wrapS = texture.wrapT = RepeatWrapping;
+        texture.anisotropy = this.anisotropy;
+        texture.colorSpace = SRGBColorSpace;
+
+        return texture as Texture;
+    };
+
+    // fbx模型加载器
+    fbxLoader = new FBXLoader();
+
+    //obj 加载器
+    objLoader = new OBJLoader();
+
+    // 材质加载器
+    mtlLoader = new MTLLoader();
+
+    // gltf 加载器
+    gltfLoader = (() => {
+        const loader = new GLTFLoader();
+        const dracoLoader = new class ThreeBaseDRACOLoader extends DRACOLoader {
+
+            _loadLibrary(url: string, responseType: string) {
+                //@ts-ignore
+                let urlConf = (process.env.NODE_ENV === "development") ? {
+                    "draco_decoder.js": "draco_decoder.js",
+                    "draco_wasm_wrapper.js": "draco_wasm_wrapper.js",
+                    "draco_decoder.wasm": "draco_decoder.wasm"
+                } : {
+                    "draco_decoder.js": dracoWasmWrapperJS,
+                    "draco_wasm_wrapper.js": dracoDecoderJS,
+                    "draco_decoder.wasm": dracoDecoderWASM
+                }
+                //@ts-ignore
+                return super._loadLibrary(urlConf[url], responseType);
+            }
+
+        }();
+        //@ts-ignore
+        dracoLoader.setDecoderPath((process.env.NODE_ENV === "development") ? '/node_modules/three/examples/jsm/libs/draco/' : '');
+        loader.setDRACOLoader(dracoLoader);
+        return loader;
+    })()
+
+    // 是否加载完成
+    onload = true;
+
+}
+
+const threeLoader = new ThreeLoader();
+export default threeLoader;
+

package/threeUtils.d.ts

@@ -0,0 +1,44 @@
+import { Box3, BufferGeometry, Clock, EventDispatcher, Object3D, Vector3 } from "three";
+declare class ThreeUtils extends EventDispatcher {
+    constructor();
+    isProd: boolean;
+    isDev: boolean;
+    _timeTemp: number;
+    _accumulate: number;
+    _box3: Box3;
+    _size: Vector3;
+    _center: Vector3;
+    _clock: Clock;
+    requestAnimationFrame(): void;
+    private _keepZoomDoms;
+    /**
+     *计算需要保持比例的元素
+     */
+    private _computerDomZoom;
+    /**
+     * dom元素保持比例
+     */
+    keepZoom(dom: HTMLElement | null, width?: number, height?: number): void;
+    workList: Array<() => void>;
+    clock: Clock;
+    /**
+     * @param {() => void} [callback]
+     * @param {boolean} [first=true] 需要优先执行
+     */
+    addWork(work?: () => void, first?: boolean): void;
+    /**
+     *判断一个元素是否在页面上
+     */
+    inDocument(dom: ParentNode | null): boolean;
+    getCenter(object3d: Object3D | BufferGeometry): Vector3;
+    getSize(object3d: Object3D | BufferGeometry): Vector3;
+    alignBottom(object3d: Object3D | BufferGeometry, y?: number): void;
+    centerObject3D(object3d: Object3D | BufferGeometry): void;
+    center(object3d: Object3D | BufferGeometry): void;
+    scaleTo(object3d: Object3D | BufferGeometry, size?: number, key?: Partial<["x", "y", "z"]>): void;
+    exportGLB(input: Object3D): void;
+    getVolume(geometry: BufferGeometry): number;
+    signedVolumeOfTriangle(p1: Vector3, p2: Vector3, p3: Vector3): number;
+}
+declare const threeUtils: ThreeUtils;
+export default threeUtils;