easy-three-utils 0.0.3 → 0.0.32

package/index.ts

@@ -3,6 +3,7 @@ import { useMark, EMarkDefaultStyle } from './src/common/useMark'
 import { useLine2 } from './src/common/useLine2'
 import { useLocationCalculator } from './src/common/useLocationCalculator'
 import { Animation } from './src/common/useTween'
+import { useWeather, EWeatherType } from './src/common/useWeather'
 import { useThree } from './src/core/main'
 
 import type { IPathItem } from './src/common/useTween'
@@ -17,7 +18,10 @@ export {
 
     useLocationCalculator,
 
-    Animation
+    Animation,
+
+    useWeather,
+    EWeatherType
 }
 
 export type {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-three-utils",
-  "version": "0.0.3",
+  "version": "0.0.32",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -9,4 +9,4 @@
   "license": "ISC",
   "types": "./index.d.ts",
   "description": ""
-}
+}

package/src/assets/shader/snow.ts

@@ -0,0 +1,48 @@
+const snowVertexShader = `
+        varying vec2 vUv;
+        void main() {
+        vUv = uv;
+        vec4 viewPosition = modelViewMatrix * vec4(position, 1.0);
+        gl_Position = projectionMatrix * viewPosition;
+      }`
+
+const snowFragmentShader = `
+        varying vec2 vUv;
+        uniform vec3 iResolution;     
+        uniform float iTime;             
+        void main()
+        {
+            float snow = 0.0;
+            float gradient = (1.0-float(gl_FragCoord.y / iResolution.x))*0.4;
+            float random = fract(sin(dot(gl_FragCoord.xy,vec2(12.9898,78.233)))* 43758.5453);
+            for(int k=0;k<6;k++){
+            for(int i=0;i<12;i++){
+                float cellSize = 2.0 + (float(i)*3.0);
+                float downSpeed = 0.3+(sin(iTime*0.4+float(k+i*20))+1.0)*0.00008;
+                vec2 uv = (gl_FragCoord.xy / iResolution.x)+vec2(0.01*sin((iTime+float(k*6185))*0.6+float(i))*(5.0/float(i)),downSpeed*(iTime+float(k*1352))*(1.0/float(i)));
+                vec2 uvStep = (ceil((uv)*cellSize-vec2(0.5,0.5))/cellSize);
+                float x = fract(sin(dot(uvStep.xy,vec2(12.9898+float(k)*12.0,78.233+float(k)*315.156)))* 43758.5453+float(k)*12.0)-0.5;
+                float y = fract(sin(dot(uvStep.xy,vec2(62.2364+float(k)*23.0,94.674+float(k)*95.0)))* 62159.8432+float(k)*12.0)-0.5;
+
+                float randomMagnitude1 = sin(iTime*2.5)*0.7/cellSize;
+                float randomMagnitude2 = cos(iTime*2.5)*0.7/cellSize;
+
+                float d = 5.0*distance((uvStep.xy + vec2(x*sin(y),y)*randomMagnitude1 + vec2(y,x)*randomMagnitude2),uv.xy);
+
+                float omiVal = fract(sin(dot(uvStep.xy,vec2(32.4691,94.615)))* 31572.1684);
+                if(omiVal<0.08?true:false){
+                    float newd = (x+1.0)*0.4*clamp(1.9-d*(15.0+(x*6.3))*(cellSize/1.4),0.0,1.0);
+                    /*snow += d<(0.08+(x*0.3))/(cellSize/1.4)?
+                        newd
+                        :newd;*/
+                    snow += newd;
+                }
+            }
+        }
+        gl_FragColor = vec4(snow)+gradient*vec4(0.4,0.8,1.0,0.0) + random*0.01;
+      }`
+
+export {
+    snowVertexShader,
+    snowFragmentShader
+}

package/src/common/useLoader.ts

@@ -5,8 +5,8 @@ import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js"
 import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
 import { TGALoader } from 'three/examples/jsm/loaders/TGALoader.js'
-import { TilesRenderer } from '../tileRenderer'
-import { GoogleCloudAuthPlugin } from '../tileRenderer/plugins';
+import { TilesRenderer } from '../assets/tileRenderer'
+import { GoogleCloudAuthPlugin } from '../assets/tileRenderer/plugins';
 import { enableDefaultEvent, EDefaultEvent } from '../../index'
 
 interface IThreeLoaders {
@@ -44,7 +44,9 @@ const useLoader = () => {
     }
 
     const useFBXLoader = (url: string, callback: (object: THREE.Group & Record<'mixer', THREE.AnimationMixer>) => void, xhrCallback?: (xhr: ProgressEvent<EventTarget>) => void) => {
-        setFBXLoader()
+        if (!threeLoaders.FBXLoader) {
+            setFBXLoader()
+        }
 
         threeLoaders.FBXLoader!.load(url, (object) => {
             object.traverse((child) => {
@@ -66,7 +68,7 @@ const useLoader = () => {
 
     const setGLTFLoader = () => {
         threeLoaders.DRACOLoader = new DRACOLoader()
-        threeLoaders.DRACOLoader.setDecoderPath('/draco/gltf/');
+        threeLoaders.DRACOLoader.setDecoderPath('../assets/draco/gltf/');
         threeLoaders.DRACOLoader.preload()
 
         threeLoaders.GLTFLoader = new GLTFLoader()
@@ -126,13 +128,11 @@ const useLoader = () => {
         tilesRenderer.registerPlugin(new GoogleCloudAuthPlugin({ url: config.url }));
         tilesRenderer.setLatLonToYUp(config.lat * THREE.MathUtils.DEG2RAD, config.lon * THREE.MathUtils.DEG2RAD);
 
-        const dracoLoader = new DRACOLoader();
-        dracoLoader.setDecoderPath('../draco/gltf/');
-
-        const loader = new GLTFLoader(tilesRenderer.manager);
-        loader.setDRACOLoader(dracoLoader);
+        if (!threeLoaders.GLTFLoader) {
+            setGLTFLoader()
+        }
 
-        tilesRenderer.manager.addHandler(/\.gltf$/, loader);
+        tilesRenderer.manager.addHandler(/\.gltf$/, threeLoaders.GLTFLoader!);
 
         enableDefaultEvent(EDefaultEvent.INSERTANIMATIONS, {
             cb() {

package/src/common/useWeather.ts

@@ -0,0 +1,71 @@
+import * as  THREE from 'three'
+import { snowVertexShader, snowFragmentShader } from '../assets/shader/snow'
+
+enum EWeatherType {
+    NORMAL = 'normal',
+    SNOW = 'snow'
+}
+
+const useWeather = () => {
+    const snowGroup = new THREE.Group()
+    snowGroup.name = 'weather_' + 'snow_' + new Date().getTime()
+    let globalConfig: ITHREEConfiguration | null = null
+
+    const initSnow = (config: ITHREEConfiguration) => {
+        const { width, height } = config.renderer!.getDrawingBufferSize(
+            new THREE.Vector2()
+        );
+
+        const shader = new THREE.ShaderMaterial({
+            vertexShader: snowVertexShader,
+            fragmentShader: snowFragmentShader,
+            uniforms: {
+                iResolution: { value: new THREE.Vector2(width, height) },
+                iTime: { value: 0 }
+            },
+        });
+
+        const plane = new THREE.Mesh(new THREE.PlaneGeometry(1000, 1000), shader);
+        plane.name = 'snowPlane'
+        plane.material.transparent = true
+        plane.onBeforeRender = () => {
+            shader.uniforms.iTime.value += 0.01;
+        };
+
+        config.control?.addEventListener('change', () => {
+            const plane = config.scene?.getObjectByName('snowPlane')
+            if (plane) {
+                plane.position.copy(config.camera!.position);
+                plane.rotation.copy(config.camera!.rotation);
+                plane.translateZ(-10);
+            }
+        })
+
+        snowGroup.add(plane)
+    }
+
+    const updateWeatherEffect = (type: EWeatherType, config: ITHREEConfiguration) => {
+        if (!globalConfig) {
+            globalConfig = config
+            initSnow(config)
+        }
+
+        switch (type) {
+            case EWeatherType.NORMAL:
+                config.scene!.remove(snowGroup)
+                break;
+            case EWeatherType.SNOW:
+                config.scene!.add(snowGroup)
+                break;
+        }
+    }
+
+    return {
+        updateWeatherEffect
+    }
+}
+
+export {
+    useWeather,
+    EWeatherType
+}

package/src/core/basic/control.ts

@@ -11,6 +11,7 @@ export type TControl = {
     },
     minDistance: number;
     maxDistance: number;
+    enableDamping: boolean;
     minPolarAngle?: number;
     maxPolarAngle?: number;
 }
@@ -20,7 +21,7 @@ const createControl = (options: TControl) => {
     control.target.set(options.pos.x, options.pos.y, options.pos.z)
     control.minDistance = options.minDistance
     control.maxDistance = options.maxDistance
-    control.enableDamping = true
+    control.enableDamping = options.enableDamping
     control.maxPolarAngle = options.maxPolarAngle ? options.maxPolarAngle : 3 * Math.PI / 8
     control.minPolarAngle = options.minPolarAngle ? options.minPolarAngle : 0
 

package/src/core/main.ts

@@ -1,6 +1,5 @@
 import * as THREE from 'three'
 // import { AxesHelper, GridHelper, Line } from 'three'
-// import { TransformControlsGizmo, TransformControlsPlane } from 'three/examples/jsm/controls/TransformControls'
 import {
     createScene,
     createCamera,
@@ -36,6 +35,15 @@ interface ITHREEOptions {
     light: ILight;
     renderer: Omit<TRenderer, 'element'>;
     camera: TCamera;
+    optimization: {
+        motionBlur: {
+            enabled: Boolean;
+            value: number;
+        };
+        mouseMoveEvent: {
+            enabled: boolean;
+        };
+    }
 }
 
 interface ITHREEAction {
@@ -54,7 +62,7 @@ type TNeedlessParamskeys<T> = {
  *          todo     
  *          1.雾气设置
  *          2.设置是否开启动画
- *          3.提高帧数（移动时释放部分模型细节，切片加载，着色器）
+ *         *3.提高帧数(已完成)
  *          4.是否加载hepler
  *          5.设置帧数（30帧）
  *          6.图层优化
@@ -87,6 +95,8 @@ const useThree = () => {
         }
     }
 
+    let mouseMoveEventEnabled = false
+
     const loadThree = (options: ITHREEOptions, succeededCallback: (config: ITHREEConfiguration) => void) => {
         threeConfiguration.scene = createScene()
         threeConfiguration.camera = createCamera(Object.assign({}, options.camera, {
@@ -109,9 +119,21 @@ const useThree = () => {
         threeConfiguration.light.ambient = createAmbientLight(options.light.ambientLight)
         threeConfiguration.light.directional = createDirectionalLight(options.light.directionalLight)
 
+        mouseMoveEventEnabled = options.optimization.mouseMoveEvent.enabled
+
         setScene(options)
         render()
 
+        if (options.optimization.motionBlur.enabled) {
+            options.element.addEventListener('mousedown', () => {
+                threeConfiguration.renderer!.setPixelRatio(window.devicePixelRatio * options.optimization.motionBlur.value)
+            })
+
+            options.element.addEventListener('mouseup', () => {
+                threeConfiguration.renderer!.setPixelRatio(window.devicePixelRatio)
+            })
+        }
+
         window.onresize = () => {
             threeConfiguration.camera!.aspect = window.innerWidth / window.innerHeight
             threeConfiguration.camera!.updateProjectionMatrix()
@@ -127,7 +149,7 @@ const useThree = () => {
         threeConfiguration.scene?.add(threeConfiguration.light.directional.light!)
         // threeConfiguration.scene?.add(threeConfiguration.light.directional.directionalLightHelper!)
         // if (options.showShadowCameraHelper) {
-
+        //todo
         // }
     }
 
@@ -275,7 +297,9 @@ const useThree = () => {
 
     const moveHandler = (e: MouseEvent) => {
         e.stopPropagation()
-        mouseEvent(e, threeAction.movementHandler!)
+        if (mouseMoveEventEnabled) {
+            mouseEvent(e, threeAction.movementHandler!)
+        }
     }
 
     const mousedownHandler = (e: MouseEvent) => {
@@ -367,6 +391,8 @@ const useThree = () => {
         threeConfiguration.stats = null;
         window.removeEventListener('click', clickHandler, false)
         window.removeEventListener('mousemove', moveHandler, false)
+        window.removeEventListener('mousedown', mousedownHandler, false);
+        window.removeEventListener('mouseup', mouseupHandler, false);
         threeAction.animation = null
         threeAction.clickHandler = null
         threeAction.movementHandler = null

package/src/utils/index.ts

@@ -0,0 +1,5 @@
+import { useZip } from './useZip'
+
+export {
+    useZip
+}

package/src/utils/useZip.ts

@@ -0,0 +1,66 @@
+import JSZip from 'jszip';
+import crypto from 'crypto-js';
+
+const useZip = () => {
+    const dataURLtoBlob = (url: string) => {
+        let arr = url.split(','),
+            mime = arr[0].match(/:(.*?);/)![1],
+            bstr = atob(arr[1]),
+            n = bstr.length,
+            u8arr = new Uint8Array(n);
+        while (n--) {
+            u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new Blob([u8arr], { type: mime });
+    }
+
+    const encryptByDES = (data: string, key: string) => {
+        const keyHex = crypto.enc.Utf8.parse(key);
+        const encrypted = crypto.AES.encrypt(data, keyHex, {
+            mode: crypto.mode.ECB,
+            padding: crypto.pad.Pkcs7
+        });
+        return encrypted.toString();
+    }
+
+    const decryptByDES = (data: string, key: string) => {
+        const keyHex = crypto.enc.Utf8.parse(key);
+        const decrypted = crypto.AES.decrypt({
+            ciphertext: crypto.enc.Base64.parse(data)
+        }, keyHex, {
+            mode: crypto.mode.ECB,
+            padding: crypto.pad.Pkcs7
+        });
+        return decrypted.toString(crypto.enc.Utf8);
+    }
+
+    const encrypt = (blob: Blob, id: string, cb: (blob: Blob) => void) => {
+        const reader = new FileReader()
+        reader.readAsDataURL(blob)
+        reader.onload = () => {
+            const encrypted = encryptByDES((reader.result as string), id)
+            cb(new Blob([encrypted]))
+        }
+    }
+
+    const decrypt = async (blob: Blob, id: string, cb: (url: string) => void) => {
+        const zip = new JSZip();
+        const file = await zip.loadAsync(blob)
+        for (let key in file.files) {
+            zip.file(key)!.async('text').then(content => {
+                const data = decryptByDES(content, id)
+                const url = URL.createObjectURL(dataURLtoBlob(data))
+                cb(url)
+            })
+        }
+    }
+
+    return {
+        decrypt,
+        encrypt
+    }
+}
+
+export {
+    useZip
+}

package/tsconfig.json

@@ -33,7 +33,7 @@
     "src/**/*.vue",
     "src/*.d.ts",
     "typings/*.d.ts"
-  ],
+, "../useIndexedDB.ts"  ],
   "references": [
     {
       "path": "./tsconfig.node.json"