three-base 0.0.1 → 1.0.1

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/text/Text2D.ts

@@ -0,0 +1,63 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2022-05-23 13:53:06 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2022-05-23 19:38:24
+ */
+
+import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three";
+import SpriteText from "three-spritetext";
+
+
+
+type Props = {
+    text?: string;
+    textHeight?: number;
+    color?: string;
+    backgroundColor?: string;
+    fontFace?: string;
+    fontSize?: number;
+    fontWeight?: string;
+    padding?: number | [number, number];
+    borderWidth?: number;
+    borderRadius?: number;
+    borderColor?: string;
+    strokeWidth?: number;
+    strokeColor?: string;
+}
+
+/**
+ * 2d文字
+ * @export
+ * @class PlaneBtn
+ * @extends {Mesh}
+ */
+export default class Text2D extends Mesh {
+
+    constructor(text: string = "Text2D") {
+        super(Text2D.geometry);
+        this.set({ text });
+        this.material = new MeshBasicMaterial({ transparent: true, side: DoubleSide, map: this.spriteText.material.map });
+    }
+
+    type = "Text2D";
+
+    static geometry = new PlaneGeometry(1, 1, 1, 1);
+
+    spriteText = new SpriteText("");
+
+    material = new MeshBasicMaterial({ transparent: true, side: DoubleSide, map: this.spriteText.material.map });
+
+    minScale = new Vector3(0.1, 0.1, 0.1);
+
+    set(parame: Props) {
+        for (let key in parame) {
+            //@ts-ignore
+            this.spriteText[key] = parame[key];
+        }
+        this.scale.copy(this.spriteText.scale);
+        this.scale.multiplyScalar(0.1);
+        this.scale.max(this.minScale);
+    }
+
+}

package/lib/text/Text3D.ts

@@ -0,0 +1,20 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-06-14 09:48:00
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2022-06-14 10:01:13
+ */
+
+import { Mesh } from "three";
+
+// 三维空间中的3D文字模型
+export default class Text3D extends Mesh {
+
+    constructor() {
+        super();
+    }
+
+    
+
+
+}

package/lib/threeLoader.ts

@@ -0,0 +1,119 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2022-04-07 16:42:26 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-02-07 11:11:48
+ */
+
+import { DefaultLoadingManager, EventDispatcher, RepeatWrapping, Texture, TextureLoader } 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) {
+            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 ThreePlusDRACOLoader 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;
+

package/lib/threeUtils.ts

@@ -0,0 +1,84 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-02-24 22:49:42
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2022-06-21 16:45:33
+ */
+
+import { Box3, Clock, EventDispatcher, Object3D, Vector3 } from "three";
+
+class ThreeUtils extends EventDispatcher {
+
+    constructor() {
+        super();
+
+        this.requestAnimationFrame();
+    }
+
+    isProd = process.env.NODE_ENV === "production";
+
+    isDev = process.env.NODE_ENV === "development";
+
+    timeTemp = performance.now();
+
+    accumulate = 0;// 事件分发次数
+
+    box3 = new Box3();
+    size = new Vector3();
+    center = new Vector3();
+
+    clock = new Clock();
+
+    requestAnimationFrame() {
+        this.accumulate += 1;
+        const timeTemp = this.timeTemp = performance.now();
+        this.dispatchEvent({
+            type: "requestAnimationFrame",
+            timeTemp,
+            accumulate: this.accumulate
+        });
+
+        setTimeout(() => {
+            this.requestAnimationFrame();
+        }, 45 - this.clock.getDelta());
+    }
+
+    // 获取模型大小
+    getSize(object3d: Object3D) {
+        this.box3.setFromObject(object3d);
+        this.box3.getSize(this.size);
+        return this.size;
+    }
+
+    // 模型对齐底面
+    alignButton(object3d: Object3D, y = 0) {
+        this.box3.setFromObject(object3d);
+        this.box3.getCenter(this.center);
+        this.box3.getSize(this.size);
+        object3d.position.y -= (this.center.y - (this.size.y * 0.5));
+        object3d.position.y += y;
+        object3d.updateMatrixWorld(true);
+    }
+
+    // 居中对象
+    centerObject3D(object3d: Object3D) {
+        this.box3.setFromObject(object3d);
+        this.box3.getCenter(this.center);
+        object3d.position.sub(this.center);
+        object3d.updateMatrixWorld(true);
+    }
+
+    //缩放至指定大小
+    scaleTo(object3d: Object3D, size: number = 1) {
+        this.box3.setFromObject(object3d);
+        this.box3.getSize(this.size);
+        const scale = size / Math.max(this.size.x, this.size.y, this.size.z);
+        object3d.scale.multiplyScalar(scale);
+        object3d.updateMatrixWorld(true);
+    }
+
+}
+
+const threeUtils = new ThreeUtils();
+
+export default threeUtils;

package/lib/type.ts

@@ -0,0 +1,11 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2021-12-20 14:21:54
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2022-01-05 14:21:42
+ */
+
+declare module '*?url' {
+    const src: string
+    export default src
+}

package/package.json

@@ -1,27 +1,45 @@
-{
-  "name": "three-base",
-  "version": "0.0.1",
-  "description": "three base",
-  "main": "./dist/index.js",
-  "scripts": {
-    "build": "tsc",
-    "example": "tsc && node ./example/index.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/fengtianxi001/NPM-THREE.git"
-  },
-  "author": "fengtianxi001",
-  "license": "ISC",
-  "homepage": "https://github.com/fengtianxi001/NPM-THREE",
-  "dependencies": {
-    "@tweenjs/tween.js": "^18.6.4",
-    "@types/three": "^0.141.0",
-    "three": "^0.141.0",
-    "tsc": "^2.0.4",
-    "typescript": "^4.7.3"
-  },
-  "devDependencies": {
-    "@types/node": "^17.0.8"
-  }
-}
+{
+    "name": "three-base",
+    "version": "1.0.1",
+    "description": "three 3d three-basic",
+    "keywords": [
+        "three",
+        "3d",
+        "three-base",
+        "three-basic",
+        "xsh"
+    ],
+    "main": "lib/index.ts",
+    "module": "lib/index.ts",
+    "types": "lib/index.ts",
+    "files": [
+        "declare.d.ts",
+        "lib/*.js",
+        "lib/*.ts",
+        "lib/**/*.ts",
+        "lib/**/*.js",
+        "lib/**/*.tsx",
+        "lib/**/*.css",
+        "lib/**/*.jpg",
+        "lib/**/*.png",
+        "lib/**/*.jpeg",
+        "lib/**/*.svg",
+        "lib/**/*.obj",
+        "lib/**/*.gltf",
+        "lib/**/*.fbx",
+        "lib/**/*.glb",
+        "lib/**/*.json",
+        "lib/**/*.wasm"
+    ],
+    "license": "ISC",
+    "devDependencies": {
+        "@types/three": "^0"
+    },
+    "dependencies": {
+        "apng-js": "^1",
+        "element-resize-event": "^3",
+        "lodash": "^4",
+        "three": "^0",
+        "three-spritetext": "^1"
+    }
+}

package/.gitattributes

@@ -1,2 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto

package/.github/workflows/npm-publish.yml

@@ -1,22 +0,0 @@
-name: Node.js Package
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  publish-npm:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: 14
-          registry-url: https://registry.npmjs.org/
-      - run: npm install
-      - run: npm build
-      - run: npm config set //registry.npmjs.org/:_authToken=$NPM_TOKEN
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 肛肠科冯主任
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.