three-base 1.129.17 → 2.0.1

package/lib/planeModal1/PlaneModal1.ts

@@ -1,150 +0,0 @@
-/*
- * @Author: xiaosihan 
- * @Date: 2023-03-09 18:51:11 
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-03-09 19:15:35
- */
-
-import { MeshBasicMaterial, Mesh, DoubleSide, CanvasTexture, Vector2, BufferGeometry, PlaneGeometry } from "three";
-import planeModalPNG from "./planeModal.png";
-
-
-export type PlaneModal1Config = {
-    size?: number,
-    title?: string,
-    titleColor?: string,
-    texts?: Array<{
-        text?: string,
-        color?: string,
-        size?: number
-    }>
-}
-
-// 平面模型弹窗
-export default class PlaneModal1 extends Mesh {
-
-    constructor(config: PlaneModal1Config = {}) {
-        super();
-        this.updata(config);
-        this.material.map = this.texture;
-        this.scale.set(10, 10, 10);
-    }
-
-    geometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);
-
-    material = new MeshBasicMaterial({
-        side: DoubleSide,
-        transparent: true,
-        alphaTest: 0.01
-    });
-
-    // 背景图
-    static img = (() => {
-        const img = new Image();
-        img.src = planeModalPNG;
-        return img;
-    })();
-
-    canvas = (() => {
-        const canvas = document.createElement("canvas");
-        canvas.width = 660;
-        canvas.height = 481;
-        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: "PlaneModal1",
-            titleColor: "#ffffff",
-            texts: []
-            // [
-            //     {
-            //         text: "1",
-            //         color: "#ffff00",
-            //         size: 40
-            //     },
-            //     {
-            //         text: "2",
-            //         color: "#ff00ff",
-            //         size: 40
-            //     },
-            // ]
-        }
-
-    async updata(config: PlaneModal1Config) {
-
-        Object.assign(this._config, config)
-
-        //绘制背景
-        this.context.clearRect(0, 0, 660, 481);
-
-        while (!PlaneModal1.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, 660, 481);
-
-        //绘制背景
-        this.context.drawImage(PlaneModal1.img, 0, 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, 60, 72);
-
-        let textPos = new Vector2(60, 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;
-
-        this.dispatchEvent({ type: "loaded" });
-    }
-
-
-}

package/lib/shaders.d.ts

@@ -1,17 +0,0 @@
-import { Mesh, OrthographicCamera, ShaderMaterial, WebGLRenderer } from "three";
-declare class FullScreenQuad {
-    constructor();
-    _mesh: Mesh;
-    dispose(): void;
-    render(renderer: WebGLRenderer): void;
-    get material(): import("three").Material | import("three").Material[];
-    set material(value: import("three").Material | import("three").Material[]);
-}
-export declare const fullScreenMesh: FullScreenQuad;
-export declare const orthographicCamera: OrthographicCamera;
-export declare const clearShader: ShaderMaterial;
-export declare const intersectionShader: ShaderMaterial;
-export declare const coptyShader: ShaderMaterial;
-export declare const strokeShader: ShaderMaterial;
-export declare const gaussBlurShader: ShaderMaterial;
-export {};

package/lib/shaders.js

@@ -1,245 +0,0 @@
-/*
- * @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 } 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;
-    dispose() {
-        this._mesh.geometry.dispose();
-    }
-    render(renderer) {
-        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 },
-        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/shaders.ts

@@ -1,264 +0,0 @@
-/*
- * @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.d.ts

@@ -1,30 +0,0 @@
-import { Sprite, CanvasTexture, Raycaster, Intersection } from "three";
-export type SpritModal1Config = {
-    size?: number;
-    title?: string;
-    titleColor?: string;
-    texts?: Array<{
-        text?: string;
-        color?: string;
-        size?: number;
-    }>;
-};
-export default class SpritModal1 extends Sprite {
-    constructor(config?: SpritModal1Config);
-    static img: HTMLImageElement;
-    canvas: HTMLCanvasElement;
-    context: CanvasRenderingContext2D;
-    texture: CanvasTexture;
-    _config: {
-        size: number;
-        title: string;
-        titleColor: string;
-        texts: Array<{
-            text: string;
-            color: string;
-            size: number;
-        }>;
-    };
-    updata(config: SpritModal1Config): Promise<void>;
-    raycast(raycaster: Raycaster, intersects: Intersection[]): void;
-}