easy-three-utils 0.0.31 → 0.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-three-utils",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

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 {
@@ -29,7 +29,7 @@ const threeLoaders: IThreeLoaders = {
     TextureLoader: null
 }
 
-const useLoader = () => {
+const useLoader = (decoderPath: string) => {
     const useTextureLoader = (url: string, callback?: (texture: THREE.Texture) => void) => {
         threeLoaders.TextureLoader = new THREE.TextureLoader()
         const texture = threeLoaders.TextureLoader.load(url, (texture) => {
@@ -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(decoderPath)
         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

@@ -1,5 +1,5 @@
 import * as  THREE from 'three'
-import { snowVertexShader, snowFragmentShader } from '../shader/snow'
+import { snowVertexShader, snowFragmentShader } from '../assets/shader/snow'
 
 enum EWeatherType {
     NORMAL = 'normal',
@@ -52,10 +52,10 @@ const useWeather = () => {
 
         switch (type) {
             case EWeatherType.NORMAL:
-                config.scene.remove(snowGroup)
+                config.scene!.remove(snowGroup)
                 break;
             case EWeatherType.SNOW:
-                config.scene.add(snowGroup)
+                config.scene!.add(snowGroup)
                 break;
         }
     }

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: string) => {
+                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"

package/src/draco/README.md

@@ -1,32 +0,0 @@
-# Draco 3D Data Compression
-
-Draco is an open-source library for compressing and decompressing 3D geometric meshes and point clouds. It is intended to improve the storage and transmission of 3D graphics.
-
-[Website](https://google.github.io/draco/) | [GitHub](https://github.com/google/draco)
-
-## Contents
-
-This folder contains three utilities:
-
-* `draco_decoder.js` — Emscripten-compiled decoder, compatible with any modern browser.
-* `draco_decoder.wasm` — WebAssembly decoder, compatible with newer browsers and devices.
-* `draco_wasm_wrapper.js` — JavaScript wrapper for the WASM decoder.
-
-Each file is provided in two variations:
-
-* **Default:** Latest stable builds, tracking the project's [master branch](https://github.com/google/draco).
-* **glTF:** Builds targeted by the [glTF mesh compression extension](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_draco_mesh_compression), tracking the [corresponding Draco branch](https://github.com/google/draco/tree/gltf_2.0_draco_extension).
-
-Either variation may be used with `DRACOLoader`:
-
-```js
-var dracoLoader = new DRACOLoader();
-dracoLoader.setDecoderPath('path/to/decoders/');
-dracoLoader.setDecoderConfig({type: 'js'}); // (Optional) Override detection of WASM support.
-```
-
-Further [documentation on GitHub](https://github.com/google/draco/tree/master/javascript/example#static-loading-javascript-decoder).
-
-## License
-
-[Apache License 2.0](https://github.com/google/draco/blob/master/LICENSE)