three-base 1.0.62 → 1.0.64

package/lib/Text3D/fontController.js

@@ -0,0 +1,200 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2021-04-15 00:34:44
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2022-06-08 14:33:45
+ */
+import Dexie from "dexie";
+import { filter, first, isEmpty } from "lodash";
+import { Font } from "three/examples/jsm/loaders/FontLoader.js";
+import threeUtils from "../threeUtils";
+import gentilisJSON from "./gentilis.json";
+class indexBD extends Dexie {
+    constructor(dbName) {
+        super(dbName);
+    }
+    threeFont;
+}
+// 字体加载器
+class fontContorl {
+    constructor() { }
+    THREEFontMap = new Map();
+    // 专门存储字体的数据库
+    fontBD = (() => {
+        let fontDB = new indexBD("three-base-font");
+        fontDB.version(1).stores({ threeFont: "++KeyPath,fontType,fontName,fontJson" });
+        return fontDB;
+    })();
+    /**
+     * 保存 字体json到本地数据库中
+     * @param {saveFontParam} { fontType = "simhei", fontName, fontJson }
+     * @memberof fontContorl
+     */
+    async saveFont({ fontType = "simhei", fontName, fontJson = "" }) {
+        let findResult = await this.getFont({ fontType, fontName });
+        if (isEmpty(findResult)) {
+            await this.fontBD.threeFont.add({ fontType, fontName, fontJson });
+        }
+    }
+    /**
+     * 通过 fontType 和 fontName 查询 fontJson
+     * @param {getFontParam} { fontType = "simhei", fontName }
+     * @returns
+     * @memberof fontContorl
+     */
+    async getFont({ fontType = "simhei", fontName }) {
+        let fondResult = await this.fontBD.threeFont
+            .filter(d => (d.fontType === fontType && d.fontName === fontName))
+            .toArray();
+        if (isEmpty(fondResult)) {
+            return undefined;
+        }
+        else {
+            return first(fondResult).fontJson;
+        }
+    }
+    // 加载字体的回调函数们
+    _loadTextCall = new Map();
+    // 加载文字 提供给需要创建字体模型的方法使用 以节流的形式调用 回调函数
+    async loadText({ fontType = "simhei", text = "", fontBasePath, callback }) {
+        // 加载字体容器
+        await this._loadFontIndexJson({ fontType, fontBasePath });
+        let newCallback = () => {
+            let fontFamily = this.THREEFontMap.get(fontType);
+            if (callback && fontFamily) {
+                callback(fontFamily);
+            }
+        };
+        // 遍历文本
+        filter(text).map(fontName => {
+            // 没有的就去加载
+            if (!this.hasFont({ fontType, fontName })) {
+                // 添加文字的默认模型 避免报错
+                let fontFamily = this.THREEFontMap.get(fontType);
+                // 创建 three 字体对象
+                if (fontFamily) {
+                    //@ts-ignore
+                    fontFamily.data.glyphs[fontName] = { "ha": 1389, "x_min": 477, "x_max": 949, "o": "m 700 901 q 906 770 830 906 q 770 477 949 618 q 711 288 711 412 l 613 288 q 781 608 613 494 q 819 722 825 651 q 700 808 808 803 l 684 808 q 581 673 575 803 l 477 673 q 613 884 477 836 q 700 901 629 901 m 732 184 l 732 71 l 591 71 l 591 184 l 732 184 z " };
+                }
+                this._loadFontJson({ fontType, fontName, fontBasePath });
+            }
+            // 加入待执行的回调
+            let origin_callbacks = this._loadTextCall.get(`${fontType}_${fontName}`) || [];
+            if (newCallback) {
+                this._loadTextCall.set(`${fontType}_${fontName}`, [...origin_callbacks, newCallback]);
+            }
+        });
+        // 执行任务队列
+        threeUtils.addWork(newCallback);
+    }
+    // 加载字体
+    async _loadFontIndexJson({ fontType = "simhei", fontBasePath }) {
+        let fontFamily = this.THREEFontMap.get(fontType);
+        // 创建 three 字体对象
+        if (!fontFamily) {
+            // 初始字体结构
+            fontFamily = new Font({
+                "underlineThickness": 69,
+                "underlinePosition": -174,
+                "resolution": 1000,
+                "original_font_information": {},
+                "familyName": "Source Han Sans CN Normal",
+                "descender": -167,
+                "cssFontWeight": "normal",
+                "cssFontStyle": "normal",
+                "boundingBox": {
+                    "yMin": -700,
+                    "xMin": -1389,
+                    "yMax": 700,
+                    "xMax": 4067
+                },
+                "glyphs": {}
+            });
+            this.THREEFontMap.set(fontType, fontFamily);
+            // 读取本地数据库中的字体初始结构文件
+            let fontFamilyIndexJson = await this.getFont({ fontType, fontName: "index" });
+            // 加载外部字体初始结构文件
+            if (!fontFamilyIndexJson) {
+                this._loadFontJson({ fontType, fontName: "index", fontBasePath });
+            }
+        }
+    }
+    // 加载外部字体.js
+    async _loadFontJson({ fontType = "simhei", fontName, fontBasePath }) {
+        let fontJson = await this.getFont({ fontType, fontName });
+        if (!fontJson) {
+            fontJson = gentilisJSON.glyphs[fontName];
+        }
+        // 数据库中没有 就去加载字体js
+        if (!fontJson) {
+            // 加载字体js 
+            await new Promise(resolve => {
+                let script = document.createElement("script");
+                Object.assign(script, {
+                    type: "text/javascript",
+                    src: `${fontBasePath}${fontType}/${fontName}.js`,
+                    async: true,
+                    onload: () => {
+                        script.remove();
+                        resolve();
+                    },
+                    onerror: () => {
+                    }
+                });
+                document.head.appendChild(script);
+            });
+        }
+        else {
+            // 数据库或者默认字体中 有就加入字体文件中
+            let fontFamily = this.THREEFontMap.get(fontType);
+            // 创建 three 字体对象
+            if (fontFamily) {
+                //@ts-ignore
+                fontFamily.data.glyphs[fontName] = fontJson;
+            }
+        }
+        // 执行相应的回调函数
+        let origin_callbacks = this._loadTextCall.get(`${fontType}_${fontName}`) || [];
+        // // 删除待执行的回调
+        this._loadTextCall.delete(`${fontType}_${fontName}`);
+        origin_callbacks.map(callback => {
+            // 执行任务队列
+            threeUtils.addWork(callback);
+        });
+    }
+    // 判断是否有这个文字
+    hasFont({ fontType, fontName }) {
+        return !isEmpty(this.THREEFontMap.get(fontType) &&
+            //@ts-ignore
+            this.THREEFontMap.get(fontType).data.glyphs[fontName]);
+    }
+    // 这个方法是提供给外部字体文件调用的
+    addFont({ fontType = "simhei", fontName, fontJson }) {
+        // 保存字体json到本地数据中
+        this.saveFont({ fontType, fontName, fontJson });
+        let fontFamily = this.THREEFontMap.get(fontType);
+        // 创建 three 字体对象
+        if (fontFamily) {
+            //@ts-ignore
+            fontFamily.data.glyphs[fontName] = fontJson;
+        }
+    }
+    // 这个方法是提供给外部字体文件调用的
+    addFontFamily({ fontType = "simhei", fontFamilyJson }) {
+        // 保存字体初始结构到数据库中
+        this.saveFont({ fontType, fontName: "index", fontJson: fontFamilyJson });
+        let fontFamily = this.THREEFontMap.get(fontType);
+        // 创建 three 字体对象
+        if (fontFamily) {
+            //@ts-ignore
+            fontFamily.data = {
+                ...fontFamilyJson,
+                //@ts-ignore
+                glyphs: fontFamily.data.glyphs
+            };
+        }
+    }
+}
+const fontContorller = new fontContorl();
+Object.assign(window, { fontContorller });
+export default fontContorller;

package/lib/ThreeBase.js

@@ -0,0 +1,393 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2021-12-20 13:38:22
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-03-16 14:31:32
+ */
+import elementResizeEvent from "element-resize-event";
+import { round } from "lodash";
+import { AxesHelper, EventDispatcher, GridHelper, LinearFilter, Mesh, MOUSE, NoBlending, NormalBlending, PerspectiveCamera, RGBAFormat, Scene, TOUCH, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import { generateUUID } from "three/src/math/MathUtils";
+import { clearShader, coptyShader, fullScreenMesh, gaussBlurShader, strokeShader } from "./shaders";
+import threeLoader from "./threeLoader";
+import ThreeMouse from "./ThreeMouse";
+import threeUtils from "./threeUtils";
+import Transition from "./Transition";
+// three.js 的基础对象
+export default class ThreeBase extends EventDispatcher {
+    constructor() {
+        super();
+        this.init();
+    }
+    // 公用渲染目标1
+    renderTarget = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
+    // 渲染目标2
+    renderTarget2 = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
+    // 公用二维向量
+    tempVector2 = new Vector2();
+    // 公用的三维向量
+    tempVector3 = new Vector3();
+    //渲染器的尺寸
+    size = new Vector2(0, 0);
+    // 渲染器对象
+    renderer = (() => {
+        const renderer = new WebGLRenderer({
+            alpha: true,
+            antialias: true,
+            precision: "highp",
+            logarithmicDepthBuffer: true,
+            preserveDrawingBuffer: false,
+            stencil: false, // 模版
+        });
+        renderer.domElement.id = generateUUID();
+        renderer.localClippingEnabled = true;
+        renderer.setPixelRatio(window.devicePixelRatio);
+        renderer.autoClear = false;
+        threeLoader.setAnisotropy(renderer.capabilities.getMaxAnisotropy());
+        return renderer;
+    })();
+    //透视相机
+    camera = new PerspectiveCamera(45, 1, 0.0001, 10000);
+    // 场景对象
+    scene = new Scene();
+    ///鼠标事件对象
+    threeMouse = new ThreeMouse(this.renderer, this.camera, this.scene);
+    // 轨道控制器
+    controls = (() => {
+        const controls = new OrbitControls(this.camera, this.renderer.domElement);
+        controls.addEventListener("change", () => {
+            this.needRender = true;
+        });
+        controls.rotateSpeed = 0.2;
+        controls.maxPolarAngle = Math.PI;
+        controls.enableDamping = true;
+        controls.dampingFactor = 0.1;
+        controls.screenSpacePanning = true;
+        return controls;
+    })();
+    // 上下文是否被销毁了
+    isRendererContextLost = false;
+    // 设置 dom 容器
+    async setContainer(div) {
+        if (div) {
+            //删除这个容器里面的所有canvas
+            const canvas = div.getElementsByTagName("canvas");
+            for (let c of canvas)
+                c.remove();
+            div.append(this.renderer.domElement);
+            // 监听容器的尺寸的改变
+            elementResizeEvent(div, () => {
+                let rect = window.getComputedStyle(div);
+                let width = parseInt(rect.width);
+                let height = parseInt(rect.height);
+                this.resize(width, height);
+            });
+            // 如果上下文被销毁了,  就恢复上下文
+            if (this.isRendererContextLost) {
+                this.renderer.forceContextRestore();
+                await new Promise(resolve => requestAnimationFrame(resolve));
+                await new Promise(resolve => requestAnimationFrame(resolve));
+                this.renderer.domElement.style.opacity = "1";
+            }
+            let rect = window.getComputedStyle(div);
+            let width = parseInt(rect.width);
+            let height = parseInt(rect.height);
+            this.resize(width, height);
+            // 开启时时渲染
+            threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
+            threeUtils.addEventListener("requestAnimationFrame", this.renderBindThis);
+        }
+    }
+    // 修改尺寸
+    resize(width, height) {
+        this.camera.aspect = width / height;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setPixelRatio(window.devicePixelRatio);
+        this.renderer.setSize(width, height);
+        this.size.set(width, height);
+        // 渲染场景
+        this.renderer.clear();
+        this.renderer.render(this.scene, this.camera);
+    }
+    // 控制器的位置缓动的计算的顶点对象
+    controlsPosition = (() => {
+        const controlsPosition = new Transition({ x: 100, y: 100, z: 100 });
+        controlsPosition.setDuration(1000);
+        controlsPosition.onChange(({ x, y, z }) => {
+            this.camera.position.set(x, y, z);
+            this.camera.lookAt(this.controls.target);
+            this.needRender = true;
+        });
+        return controlsPosition;
+    })();
+    // 控制器的 朝向带缓动的计算的顶点对象
+    controlsCenter = (() => {
+        const controlsCenter = new Transition({ x: 0, y: 0, z: 0 });
+        controlsCenter.setDuration(1000);
+        controlsCenter.onChange(({ x, y, z }) => {
+            this.controls.target.set(x, y, z);
+            this.camera.lookAt(this.controls.target);
+            this.needRender = true;
+        });
+        return controlsCenter;
+    })();
+    init() {
+        // 非开发模式添加网格辅助线
+        if (threeUtils.isDev) {
+            const gridHelper = new GridHelper(1000, 100, 0x303030, 0x303030);
+            gridHelper.position.set(0, -0.001, 0);
+            this.scene.add(gridHelper);
+            const axesHelper = new AxesHelper(10000);
+            this.scene.add(axesHelper);
+        }
+        // 资源加载进度有更新时, 需要渲染
+        threeLoader.addEventListener("progress", () => {
+            this.needRender = true;
+        });
+    }
+    // 重置控制器的位置
+    resetLookAt({ position, center, }) {
+        // 停止控制器的惯性
+        this.controls.enableDamping = false;
+        this.controls.saveState();
+        this.controls.update();
+        this.controls.reset();
+        this.controls.enableDamping = true;
+        position && this.controlsPosition.reset({ x: position.x, y: position.y, z: position.z });
+        center && this.controlsCenter.reset({ x: center.x, y: center.y, z: center.z });
+        this.needRender = true;
+    }
+    // 设置控制器的位置 以动画的方式移动控制器
+    async setLookAt({ position, center, duration = 1000 }) {
+        // 停止控制器的惯性
+        this.controls.enableDamping = false;
+        this.controls.saveState();
+        this.controls.update();
+        this.controls.reset();
+        this.controls.enableDamping = true;
+        let currentPosition = this.camera.position.clone();
+        let currentCenter = this.controls.target.clone();
+        // 等待动画执行完成
+        await Promise.all([
+            new Promise(async (resolve, reject) => {
+                if (position) {
+                    this.controlsPosition.setDuration(duration).reset({ x: currentPosition.x, y: currentPosition.y, z: currentPosition.z });
+                    await this.controlsPosition.set({ x: position.x, y: position.y, z: position.z });
+                }
+                resolve();
+            }),
+            new Promise(async (resolve, reject) => {
+                if (center) {
+                    this.controlsCenter.setDuration(duration).reset({ x: currentCenter.x, y: currentCenter.y, z: currentCenter.z });
+                    await this.controlsCenter.set({ x: center.x, y: center.y, z: center.z });
+                }
+                resolve();
+            }),
+        ]);
+    }
+    // 获取控制的位置和朝向 保留3位小数
+    getLookAt() {
+        const position = this.camera.position.toArray().map(v => round(v, 3));
+        const center = this.controls.target.toArray().map(v => round(v, 3));
+        return {
+            center: new Vector3(...center),
+            position: new Vector3(...position),
+            centerPosition: `center: new Vector3(${center.join(",")}),position: new Vector3(${position.join(",")})`
+        };
+    }
+    // 三维向量转化成屏幕上的2维向量
+    v3tov2(v3) {
+        v3.project(this.camera);
+        const v2 = new Vector2((v3.x + 1) * this.size.x * 0.5, (-v3.y + 1) * this.size.y * 0.5);
+        return v2;
+    }
+    // 控制器类型
+    controlType = "OrbitControls";
+    // 记录一下空间平移方式 在切换控制器的时候保留一下平移方式
+    originScreenSpacePanning = false;
+    //改变控制器的类型
+    setControlType(controlType) {
+        if (controlType === "OrbitControls") {
+            this.controls.screenSpacePanning = this.originScreenSpacePanning;
+            this.controls.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
+            this.controls.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN };
+        }
+        else if (controlType === "MapControls") {
+            this.originScreenSpacePanning = this.controls.screenSpacePanning;
+            // pan orthogonal to world-space direction camera.up
+            this.controls.screenSpacePanning = false;
+            this.controls.mouseButtons.LEFT = MOUSE.PAN;
+            this.controls.mouseButtons.RIGHT = MOUSE.ROTATE;
+            this.controls.touches.ONE = TOUCH.PAN;
+            this.controls.touches.TWO = TOUCH.DOLLY_ROTATE;
+        }
+    }
+    // 是否自动渲染
+    autoRender = true;
+    //是否需要渲染, 当autoRender=false的时候就需要 手动触发渲染
+    needRender = false;
+    // 停止渲染
+    stopRender() {
+        threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
+        this.renderer.forceContextLoss();
+        // 标记上下文被销毁了
+        this.isRendererContextLost = true;
+        this.resize(100, 100);
+        this.renderer.domElement.style.opacity = "0";
+    }
+    // 渲染场景
+    render() {
+        // 控制器在移动时鼠标不能操作
+        this.controls.enabled = (this.controlsPosition.isDone() || this.controlsCenter.isDone());
+        // canvas 没有在页面上面的话 就跳过渲染
+        if (!threeUtils.inDocument(this.renderer.domElement)) {
+            this.stopRender();
+            return;
+        }
+        // 分发鼠标事件
+        this.threeMouse.dispatchEvent();
+        // 在不自动渲染时, needRender=false 就跳过渲染
+        if (!this.autoRender && !this.needRender) {
+            return;
+        }
+        this.needRender = false;
+        if (this.controls.enabled) {
+            this.controls.update();
+        }
+        this.renderer.clear();
+        // 渲染场景
+        this.dispatchEvent({ type: "beforeRender" });
+        this.renderer.render(this.scene, this.camera);
+        this.dispatchEvent({ type: "afterRender" });
+    }
+    renderBindThis = this.render.bind(this);
+    // 下载渲染图
+    download(fileName = "download") {
+        this.render();
+        const base64 = this.renderer.domElement.toDataURL('image/png');
+        let saveLink = document.createElement("a");
+        saveLink.download = `${fileName}.png`;
+        saveLink.href = base64;
+        document.body.append(saveLink);
+        saveLink.click();
+    }
+    _preMesh = new Mesh();
+    _preRT = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
+    //预加载纹理图片
+    async preloadTexture(src) {
+        const texture = threeLoader.getTexture(src);
+        while (texture && !texture.image || !texture.image.complete) {
+            await new Promise(resolve => setTimeout(resolve, 50));
+        }
+        // 添加到计划任务中去
+        threeUtils.addWork(() => {
+            const originRenderTarget = this.renderer.getRenderTarget();
+            this.renderer.setRenderTarget(this._preRT);
+            this._preMesh.material.map = texture;
+            this.renderer.render(this._preMesh, this.camera);
+            this.renderer.setRenderTarget(originRenderTarget);
+        });
+    }
+    //预加载网格
+    async preloadGeometry(geometry) {
+        // 添加到计划任务中去
+        threeUtils.addWork(() => {
+            const originRenderTarget = this.renderer.getRenderTarget();
+            this.renderer.setRenderTarget(this._preRT);
+            this._preMesh.geometry = geometry;
+            this.renderer.render(this._preMesh, this.camera);
+            this.renderer.setRenderTarget(originRenderTarget);
+        });
+    }
+    // 清理渲染目标
+    clearRendererTargte(rendererTarget) {
+        const originTarget = this.renderer.getRenderTarget();
+        this.renderer.setRenderTarget(rendererTarget);
+        fullScreenMesh.material = clearShader;
+        fullScreenMesh.render(this.renderer);
+        this.renderer.clearDepth();
+        this.renderer.setRenderTarget(originTarget);
+    }
+    // 拷贝纹理到渲染目标
+    copyTextureToRenderTarget(texture, rendererTarget, alpha = false, opactity = 1) {
+        const originTarget = this.renderer.getRenderTarget();
+        if (rendererTarget) {
+            this.renderer.getSize(this.tempVector2);
+            rendererTarget.setSize(this.tempVector2.x, this.tempVector2.y);
+        }
+        this.renderer.setRenderTarget(rendererTarget);
+        fullScreenMesh.material = coptyShader;
+        coptyShader.uniforms.map.value = texture;
+        coptyShader.uniforms.opacity.value = opactity;
+        coptyShader.blending = alpha ? NoBlending : NormalBlending;
+        fullScreenMesh.render(this.renderer);
+        this.renderer.setRenderTarget(originTarget);
+    }
+    // 把对象绘制到渲染目标中
+    object3dToRendererTarget(obj, rendererTarget) {
+        this.clearRendererTargte(rendererTarget);
+        const originTarget = this.renderer.getRenderTarget();
+        this.renderer.setRenderTarget(rendererTarget);
+        this.renderer.getSize(this.tempVector2);
+        rendererTarget.setSize(this.tempVector2.x, this.tempVector2.y);
+        this.renderer.render(obj, this.camera);
+        this.renderer.setRenderTarget(originTarget);
+    }
+    // 给渲染目标的内容加描边
+    rendererTagetAddStroke(rendererTarget, strockWidth, color, opacity) {
+        const originTarget = this.renderer.getRenderTarget();
+        this.clearRendererTargte(this.renderTarget2);
+        this.renderer.setRenderTarget(this.renderTarget2);
+        this.renderer.getSize(this.tempVector2);
+        this.renderTarget2.setSize(this.tempVector2.x, this.tempVector2.y);
+        fullScreenMesh.material = strokeShader;
+        strokeShader.uniforms.map.value = rendererTarget.texture;
+        strokeShader.uniforms.resolution.value.set(this.tempVector2.x, this.tempVector2.y);
+        strokeShader.uniforms.strokeWidth.value = strockWidth;
+        strokeShader.uniforms.strokeColor.value.set(color);
+        strokeShader.uniforms.opacity.value = opacity;
+        fullScreenMesh.render(this.renderer);
+        this.copyTextureToRenderTarget(this.renderTarget2.texture, rendererTarget, true);
+        this.renderer.setRenderTarget(originTarget);
+    }
+    // 渲染对象的描边
+    renderObject3dStroke(obj, strockWidth, color, opacity) {
+        this.object3dToRendererTarget(obj, this.renderTarget);
+        this.rendererTagetAddStroke(this.renderTarget, strockWidth, color, opacity);
+        this.copyTextureToRenderTarget(this.renderTarget.texture, null);
+    }
+    //给渲染目标加上高斯模糊计算
+    renderTargetgaussBlur(rendererTarget, radius, opacity) {
+        const originTarget = this.renderer.getRenderTarget();
+        this.clearRendererTargte(this.renderTarget2);
+        this.renderer.setRenderTarget(this.renderTarget2);
+        this.renderer.getSize(this.tempVector2);
+        this.renderTarget2.setSize(this.tempVector2.x, this.tempVector2.y);
+        fullScreenMesh.material = gaussBlurShader;
+        gaussBlurShader.uniforms.map.value = rendererTarget.texture;
+        gaussBlurShader.uniforms.radius.value = radius;
+        gaussBlurShader.uniforms.opacity.value = opacity;
+        gaussBlurShader.uniforms.resolution.value.set(this.tempVector2.x, this.tempVector2.y);
+        fullScreenMesh.render(this.renderer);
+        this.copyTextureToRenderTarget(this.renderTarget2.texture, rendererTarget, true);
+        this.renderer.setRenderTarget(originTarget);
+    }
+    // 渲染目标上的纹理添加辉光效果
+    renderTargetAddGlow(renderTarget, width, color) {
+        this.rendererTagetAddStroke(renderTarget, 1 * width, color, 0.3);
+        this.rendererTagetAddStroke(renderTarget, 2 * width, color, 0.2);
+        this.rendererTagetAddStroke(renderTarget, 3 * width, color, 0.05);
+        this.renderTargetgaussBlur(renderTarget, 1, 1);
+        this.renderTargetgaussBlur(renderTarget, 1, 1);
+        this.renderTargetgaussBlur(renderTarget, 1, 1);
+    }
+    // 渲染 渲染目标
+    renderRendererTarget(renderTarget, alpha = false) {
+        coptyShader.uniforms.map.value = renderTarget.texture;
+        coptyShader.uniforms.opacity.value = 1.0;
+        fullScreenMesh.material = coptyShader;
+        coptyShader.blending = alpha ? NoBlending : NormalBlending;
+        fullScreenMesh.render(this.renderer);
+    }
+}