three-base 1.129.9 → 1.129.10

package/lib/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/lib/spriteModal1/SpriteModal1.ts

@@ -0,0 +1,160 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-03-08 00:01:34
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-03-08 02:05:25
+ */
+
+
+
+
+
+import { Sprite, CanvasTexture, Vector2, Raycaster, Intersection } from "three";
+import spriteModal1PNG from "./spriteModal1.png";
+
+export type SpritModal1Config = {
+    size?: number,
+    title?: string,
+    titleColor?: string,
+    texts?: Array<{
+        text?: string,
+        color?: string,
+        size?: number
+    }>
+}
+
+// sprit弹窗1
+export default class SpritModal1 extends Sprite {
+
+    constructor(config: SpritModal1Config = {}) {
+        super();
+        this.updata(config);
+        this.material.map = this.texture;
+        this.material.transparent = true;
+        this.material.alphaTest = 0.01;
+    }
+
+    renderOrder = 99;
+
+    // 背景图
+    static img = (() => {
+        const img = new Image();
+        img.src = spriteModal1PNG;
+        return img;
+    })();
+
+    canvas = (() => {
+        const canvas = document.createElement("canvas");
+        canvas.width = 1024;
+        canvas.height = 1024;
+        return canvas;
+    })();
+
+    context = this.canvas.getContext("2d")!;
+
+    texture = new CanvasTexture(this.canvas);
+
+    // 配置
+    _config: {
+        size: number,
+        title: string,
+        titleColor: string,
+        texts: Array<{
+            text: string,
+            color: string,
+            size: number
+        }>
+    } = {
+            size: 10,
+            title: "SpritModal1",
+            titleColor: "#ffffff",
+            texts: []
+            // [
+            //     {
+            //         text: "1",
+            //         color: "#ffff00",
+            //         size: 40
+            //     },
+            //     {
+            //         text: "2",
+            //         color: "#ff00ff",
+            //         size: 40
+            //     },
+            // ]
+        }
+
+    async updata(config: SpritModal1Config) {
+
+        Object.assign(this._config, config)
+
+        //绘制背景
+        this.context.clearRect(0, 0, 1024, 1024);
+
+        while (!SpritModal1.img.complete) {
+            await new Promise(resolve => setTimeout(resolve, 100));
+        }
+
+        // 设置大小
+        this.scale.set(this._config.size, this._config.size, this._config.size);
+
+        // this.context.fillStyle = "#00000088";
+        // this.context.fillRect(0, 0, 1024, 1024);
+
+        //绘制背景
+        this.context.drawImage(SpritModal1.img, 186, 0);
+
+        // 绘制标题
+        this.context.fillStyle = this._config.titleColor;
+        this.context.font = '40px serif';// 设置字体大小
+        this.context.textAlign = "left";
+        this.context.textBaseline = "top";
+        this.context.fillText(this._config.title, 250, 72);
+
+        let textPos = new Vector2(250, 150);
+        let maxWidth = 530;
+        // 绘制内容
+        this._config.texts.map(({ text = "text", color = "#ffffff", size = 40 }) => {
+            this.context.fillStyle = color;
+            this.context.font = `${size}px serif`;// 设置字体大小
+            this.context.textAlign = "left";
+            this.context.textBaseline = "top";
+
+            // 字符分隔为数组
+            var arrText = text.split('');
+            var line = '';
+
+            // 文字自动换行计算
+            for (var n = 0; n < arrText.length; n++) {
+                var metrics = this.context.measureText(line + arrText[n]);
+                var testWidth = metrics.width;
+                if ((testWidth > maxWidth && n > 0) || arrText[n] === "\n") {
+                    this.context.fillText(line, textPos.x, textPos.y);
+                    line = "";
+                    textPos.y += size;
+                } else {
+                    line += arrText[n];
+                }
+            }
+
+            this.context.fillText(line, textPos.x, textPos.y);
+            textPos.y += size;
+        });
+
+        this.texture.needsUpdate = true;
+
+    }
+
+    //鼠标拾取计算
+    raycast(raycaster: Raycaster, intersects: Intersection[]) {
+
+        let intersect: Intersection[] = [];
+        super.raycast(raycaster, intersect);
+        let inte = intersect[0];
+        if (inte && (inte.uv!.x > 0.22 && inte.uv!.x < 0.78) && (inte.uv!.y > 0.54 && inte.uv!.y < 0.94)) {
+            intersects.push(inte);
+        }
+
+    }
+
+}
+

package/lib/threeLoader.ts

@@ -0,0 +1,136 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2022-04-07 16:42:26 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-03-30 10:52:27
+ */
+
+import { DefaultLoadingManager, EventDispatcher, RepeatWrapping, 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 "./draco/draco_wasm_wrapper.js?url";
+//@ts-ignore
+import dracoDecoderJS from "./draco/draco_decoder.js?url";
+//@ts-ignore
+import dracoDecoderWASM from "./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) {
+
+        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;
+
+        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/js/libs/draco/' : '');
+        loader.setDRACOLoader(dracoLoader);
+        return loader;
+    })()
+
+    // 是否加载完成
+    onload = true;
+
+}
+
+const threeLoader = new ThreeLoader();
+export default threeLoader;
+