three-base 1.129.1 → 1.129.2

package/lib/{shaders.ts → shaders.js}

@@ -4,26 +4,20 @@
  * @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";
-
-
-
+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("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;
+    _mesh;
     dispose() {
         this._mesh.geometry.dispose();
     }
-    render(renderer: WebGLRenderer) {
+    render(renderer) {
         renderer.render(this._mesh, orthographicCamera);
     }
     get material() {
@@ -33,16 +27,10 @@ class FullScreenQuad {
         this._mesh.material = value;
     }
 }
-
-
 // 常用着色器及工具
-
-
 // 全屏渲染模型
 export const fullScreenMesh = new FullScreenQuad();
-
-export const orthographicCamera = new OrthographicCamera(- 1, 1, 1, - 1, 0, 1);
-
+export const orthographicCamera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
 // 清理着色器
 export const clearShader = new ShaderMaterial({
     vertexShader: `
@@ -57,16 +45,15 @@ export const clearShader = new ShaderMaterial({
             gl_FragColor = vec4(0.0);
         }
     `,
-    blending: NoBlending, // 渲染时不与背景融合计算 直接替换
+    blending: NoBlending,
     depthTest: false,
     depthWrite: false,
     transparent: true
 });
-
 // 交集着色器提取相同的像素点
 export const intersectionShader = new ShaderMaterial({
     uniforms: {
-        map1: { value: null }, // 贴图纹理1
+        map1: { value: null },
         map2: { value: null }, // 贴图纹理2
     },
     vertexShader: `
@@ -93,17 +80,15 @@ export const intersectionShader = new ShaderMaterial({
             ${ShaderChunk.logdepthbuf_fragment}
         }
     `,
-    blending: NoBlending, // 渲染时不与背景融合计算 直接替换
+    blending: NoBlending,
     depthTest: true,
     depthWrite: true,
     transparent: true
 });
-
-
 // 拷贝着色器
 export const coptyShader = new ShaderMaterial({
     uniforms: {
-        map: { value: null }, // 纹理
+        map: { value: null },
         opacity: { value: 1.0 } // 透明度
     },
     vertexShader: `
@@ -128,15 +113,13 @@ export const coptyShader = new ShaderMaterial({
     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") }, // 描边颜色
+        map: { value: null },
+        resolution: { value: new Vector2(512, 512) },
+        strokeWidth: { value: 1.0 },
+        strokeColor: { value: new Color("#B2F2FF") },
         opacity: { value: 1.0 } // 透明度
     },
     vertexShader: `
@@ -189,19 +172,17 @@ export const strokeShader = new ShaderMaterial({
                 gl_FragColor = fragColor();
             }
         `,
-    blending: NoBlending, // 渲染时不与背景融合计算 直接替换
+    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 }, // 模糊半径
+        map: { value: null },
+        opacity: { value: 1.0 },
+        radius: { value: 3.0 },
         resolution: { value: new Vector2(512, 512) }, // 渲染器的分辨率
     },
     vertexShader: `
@@ -257,8 +238,8 @@ export const gaussBlurShader = new ShaderMaterial({
             gl_FragColor.a *= opacity;
 		}
 	`,
-    blending: NoBlending, // 渲染时不与背景融合计算
+    blending: NoBlending,
     depthTest: false,
     depthWrite: false,
     transparent: true
-});
+});

package/lib/spriteModal1/{SpriteModal1.ts → SpriteModal1.js}

@@ -4,121 +4,81 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-03-08 02:05:25
  */
-
-
-
-
-
-import { Sprite, CanvasTexture, Vector2, Raycaster, Intersection } from "three";
+import { Sprite, CanvasTexture, Vector2 } 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 = {}) {
+    constructor(config = {}) {
         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")!;
-
+    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)
-
+    _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.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.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]);
@@ -127,30 +87,23 @@ export default class SpritModal1 extends Sprite {
                     this.context.fillText(line, textPos.x, textPos.y);
                     line = "";
                     textPos.y += size;
-                } else {
+                }
+                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[] = [];
+    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)) {
+        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 → threeLoader.js}

@@ -1,17 +1,15 @@
 /*
- * @Author: xiaosihan 
- * @Date: 2022-04-07 16:42:26 
+ * @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 { DefaultLoadingManager, EventDispatcher, RepeatWrapping, 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";
@@ -19,46 +17,35 @@ import dracoWasmWrapperJS from "./draco/draco_wasm_wrapper.js?url";
 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) {
+    setAnisotropy(v) {
         this.anisotropy = v;
-    };
-
+    }
+    ;
     // 纹理对向缓存
-    textureMap = new Map() as Map<string, Texture>;
-
+    textureMap = new Map();
     // 纹理加载器
     textureLoader = new TextureLoader();
-
     // 获取地址对应的单例纹理对象
-    getTexture(src: string) {
-
+    getTexture(src) {
         let texture = this.textureMap.get(src);
-
         if (!texture) {
             if (/\.mp4$/.test(src)) {
                 const videoDom = document.createElement("video");
@@ -73,38 +60,30 @@ class ThreeLoader extends EventDispatcher {
                     videoDom.play();
                 });
                 texture = new VideoTexture(videoDom);
-            } else {
-
+            }
+            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;
-    };
-
+        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: string, responseType: string) {
+            _loadLibrary(url, responseType) {
                 //@ts-ignore
                 let urlConf = (process.env.NODE_ENV === "development") ? {
                     "draco_decoder.js": "draco_decoder.js",
@@ -114,23 +93,18 @@ class ThreeLoader extends EventDispatcher {
                     "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;
-