three-base 1.129.17 → 2.0.1

package/lib/spriteModal1/SpriteModal1.js

@@ -1,109 +0,0 @@
-/*
- * @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 } from "three";
-import spriteModal1PNG from "./spriteModal1.png";
-// sprit弹窗1
-export default class SpritModal1 extends Sprite {
-    constructor(config = {}) {
-        super();
-        this.updata(config);
-        this.material.map = this.texture;
-        this.material.transparent = true;
-        this.material.alphaTest = 0.01;
-    }
-    // 背景图
-    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: 10,
-        title: "SpritModal1",
-        titleColor: "#ffffff",
-        texts: []
-        // [
-        //     {
-        //         text: "1",
-        //         color: "#ffff00",
-        //         size: 40
-        //     },
-        //     {
-        //         text: "2",
-        //         color: "#ff00ff",
-        //         size: 40
-        //     },
-        // ]
-    };
-    async updata(config) {
-        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;
-        this.dispatchEvent({ type: "loaded" });
-    }
-    //鼠标拾取计算
-    raycast(raycaster, intersects) {
-        let intersect = [];
-        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/spriteModal1/SpriteModal1.ts

@@ -1,159 +0,0 @@
-/*
- * @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;
-    }
-
-    // 背景图
-    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;
-
-        this.dispatchEvent({ type: "loaded" });
-    }
-
-    //鼠标拾取计算
-    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/stroke_pass/FullScreenQuad.d.ts

@@ -1,7 +0,0 @@
-import { BufferGeometry, Material, Mesh, OrthographicCamera, Scene, WebGLRenderer } from "three";
-export default class FullScreenQuad extends Scene {
-    constructor();
-    mesh: Mesh<BufferGeometry, Material>;
-    orthographicCamera: OrthographicCamera;
-    render(renderer: WebGLRenderer, material: Material): void;
-}

package/lib/stroke_pass/FullScreenQuad.js

@@ -1,25 +0,0 @@
-/*
- * @Author: xiaosihan
- * @Date: 2023-05-09 01:36:35
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-05-09 01:47:07
- */
-import { BufferGeometry, Float32BufferAttribute, Mesh, MeshBasicMaterial, OrthographicCamera, Scene } from "three";
-export default class FullScreenQuad extends Scene {
-    constructor() {
-        super();
-    }
-    mesh = (() => {
-        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));
-        const mesh = new Mesh(geometry, new MeshBasicMaterial());
-        this.add(mesh);
-        return mesh;
-    })();
-    orthographicCamera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
-    render(renderer, material) {
-        this.mesh.material = material;
-        renderer.render(this, this.orthographicCamera);
-    }
-}

package/lib/stroke_pass/FullScreenQuad.ts

@@ -1,33 +0,0 @@
-/*
- * @Author: xiaosihan 
- * @Date: 2023-05-09 01:36:35 
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-05-09 01:47:07
- */
-
-
-import { BufferGeometry, Float32BufferAttribute, Material, Mesh, MeshBasicMaterial, OrthographicCamera, Scene, WebGLRenderer } from "three";
-
-
-export default class FullScreenQuad extends Scene {
-    constructor() {
-        super();
-    }
-
-    mesh = (() => {
-        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));
-        const mesh = new Mesh<BufferGeometry, Material>(geometry, new MeshBasicMaterial());
-        this.add(mesh);
-        return mesh;
-    })();
-
-    orthographicCamera = new OrthographicCamera(- 1, 1, 1, - 1, 0, 1);
-
-    render(renderer: WebGLRenderer, material: Material) {
-        this.mesh.material = material;
-        renderer.render(this, this.orthographicCamera);
-    }
-
-}

package/lib/stroke_pass/stroke_pass.d.ts

@@ -1,2 +0,0 @@
-import { Camera, Object3D, WebGLRenderer } from "three";
-export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D): void;

package/lib/stroke_pass/stroke_pass.js

@@ -1,190 +0,0 @@
-/*
- * @Author: xiaosihan
- * @Date: 2023-05-09 00:35:17
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-05-09 02:33:28
- */
-import { LinearFilter, RGBAFormat, Vector2, WebGLRenderTarget, NoBlending, Scene, RawShaderMaterial, Color, NormalBlending } from "three";
-import FullScreenQuad from "./FullScreenQuad";
-// 选中对象的纹理
-const selectTextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
-// 由于不能同时读写自己的纹理 
-const blur1TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
-// 所以需要用2个模糊纹理相互读写
-const blur2TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
-const size = new Vector2();
-// 创建一个渲染工具 用于处理纹理
-const fsQuad = new FullScreenQuad(); // 渲染辅助器
-// 描边着色器
-const blurShader = new RawShaderMaterial({
-    uniforms: {
-        tDiffuse: { value: null },
-        color: { value: new Color("#0f0") },
-        width: { value: 1.0 },
-        opacity: { value: 1.0 },
-        resolution: { value: new Vector2(1 / 512, 1 / 512) },
-        offset: {
-            value: [
-                new Vector2(0.000, 1.000),
-                new Vector2(0.259, 0.966),
-                new Vector2(0.500, 0.866),
-                new Vector2(0.707, 0.707),
-                new Vector2(0.866, 0.500),
-                new Vector2(0.966, 0.259),
-                new Vector2(1.000, 0.000),
-                new Vector2(0.966, -0.259),
-                new Vector2(0.866, -0.500),
-                new Vector2(0.707, -0.707),
-                new Vector2(0.500, -0.866),
-                new Vector2(0.259, -0.966),
-                new Vector2(0.000, -1.000),
-                new Vector2(-0.259, -0.966),
-                new Vector2(-0.500, -0.866),
-                new Vector2(-0.707, -0.707),
-                new Vector2(-0.866, -0.500),
-                new Vector2(-0.966, -0.259),
-                new Vector2(-1.000, -0.000),
-                new Vector2(-0.966, 0.259),
-                new Vector2(-0.866, 0.500),
-                new Vector2(-0.707, 0.707),
-                new Vector2(-0.500, 0.866),
-                new Vector2(-0.259, 0.966)
-            ]
-        }
-    },
-    vertexShader: `
-		attribute vec3 position;
-		attribute vec2 uv;
-		varying vec2 vUv;
-		void main() {
-			vUv = uv;
-			gl_Position = vec4(position, 1.0);
-		}`,
-    fragmentShader: `
-		#ifdef GL_ES
-			precision highp float;
-		#endif
-		uniform sampler2D tDiffuse;
-		uniform vec3 color;
-		uniform float width;
-		uniform float opacity;
-		uniform vec2 resolution;
-		uniform vec2 offset[24];
-		varying vec2 vUv;
-		vec2 piexl = resolution * width; // 描边厚度
-
-		vec4 stroke(){
-			vec4 blurColor = vec4(0.0);
-			vec4 Color = vec4(0.0);
-			int vSum = 0; // 周围像素点中和 visibleColor 相似的数量
-			for (int i = 0; i < 24; i++ ) {
-				Color = texture2D(tDiffuse, vUv + (offset[i] * piexl));
-				if (Color.a > 0.0) {
-					blurColor += Color;
-				}
-			}
-			if (blurColor.a < 0.001) {
-				return vec4(0.0);
-			} else {
-				return vec4(color, opacity);
-			}
-		}
-		void main() {
-			vec4 Color = texture2D(tDiffuse, vUv);
-			if (Color.a > 0.0 || width == 0.0) {
-				gl_FragColor = Color;
-			} else {
-				gl_FragColor = stroke();
-			}
-		}`,
-    blending: NoBlending,
-    depthTest: false,
-    depthWrite: false,
-    transparent: true
-});
-// 过滤着色器
-const filterSelectShader = new RawShaderMaterial({
-    uniforms: {
-        selectTexture: { value: null },
-        blurTexture: { value: null }
-    },
-    vertexShader: `
-		attribute vec3 position;
-		attribute vec2 uv;
-		varying vec2 vUv;
-		void main() {
-			vUv = uv;
-			gl_Position = vec4(position, 1.0);
-		}
-	`,
-    fragmentShader: `
-		#ifdef GL_ES
-			precision highp float;
-		#endif
-		uniform sampler2D selectTexture;
-		uniform sampler2D blurTexture;
-		varying vec2 vUv;
-
-		void main() {
-			gl_FragColor = texture2D(blurTexture, vUv);
-			gl_FragColor.a -= (texture2D(selectTexture, vUv).a);
-		}
-	`,
-    blending: NoBlending,
-    depthTest: false,
-    depthWrite: false,
-    transparent: true
-});
-// 场景对象
-const scene = new Scene();
-// 对象描边
-export default function stroke_pass(renderer, camera, object3d) {
-    const { stroke_enable = false, stroke_color = "#04fa12", stroke_width = 1 } = object3d.userData;
-    if (!stroke_enable) {
-        return;
-    }
-    // 保存原帧缓冲区
-    const originRenderTarget = renderer.getRenderTarget();
-    // 设置选中目标的帧缓冲区
-    renderer.getSize(size);
-    selectTextureTarget.setSize(size.x, size.y);
-    blur1TextureTarget.setSize(size.x, size.y);
-    blur2TextureTarget.setSize(size.x, size.y);
-    renderer.setRenderTarget(selectTextureTarget);
-    scene.children = [object3d];
-    renderer.clear();
-    renderer.render(object3d, camera);
-    // 设置描边着色器的分辨率
-    blurShader.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
-    //描边颜色
-    blurShader.uniforms.color.value.set(stroke_color);
-    blurShader.uniforms.width.value = stroke_width / 4;
-    //一次描边
-    renderer.setRenderTarget(blur1TextureTarget);
-    blurShader.uniforms.tDiffuse.value = selectTextureTarget.texture;
-    fsQuad.render(renderer, blurShader);
-    //二次描边
-    renderer.setRenderTarget(blur2TextureTarget);
-    blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
-    fsQuad.render(renderer, blurShader);
-    //三次描边
-    renderer.setRenderTarget(blur1TextureTarget);
-    blurShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
-    fsQuad.render(renderer, blurShader);
-    //四次描边
-    renderer.setRenderTarget(blur2TextureTarget);
-    blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
-    fsQuad.render(renderer, blurShader);
-    // 还原帧缓冲区 减去原始纹理保留描边
-    renderer.setRenderTarget(originRenderTarget);
-    filterSelectShader.uniforms.selectTexture.value = selectTextureTarget.texture;
-    filterSelectShader.uniforms.blurTexture.value = blur2TextureTarget.texture;
-    filterSelectShader.blending = NormalBlending; // 与有的纹理融合计算 保留前面通道传递下来的纹理
-    fsQuad.render(renderer, filterSelectShader);
-    // 调试代码
-    // renderer.setRenderTarget(null);
-    // renderer.clearDepth();
-    // copyShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
-    // fsQuad.render(renderer, copyShader);
-    // return;
-}