three-base 0.0.1 → 1.0.2

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.2",
+    "description": "three 3d three-base",
+    "keywords": [
+        "three",
+        "3d",
+        "three-base",
+        "three-base",
+        "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.

package/example/index.html

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
-    <style>
-      * {
-        padding: 0;
-        margin: 0;
-      }
-      #app {
-        width: 100vw;
-        height: 100vh;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="app"></div>
-  </body>
-  <script type="module">
-    import Three from "../dist/index.js";
-    const app = document.querySelector("#app");
-    const three = new Three(app);
-  </script>
-</html>

package/lib/index.ts

@@ -1,112 +0,0 @@
-import * as THREE from "three";
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
-import { CSS2DRenderer } from "three/examples/jsm/renderers/CSS2DRenderer";
-import { GLTFLoader, GLTF } from "three/examples/jsm/loaders/GLTFLoader";
-import { AnimationClip } from "three";
-import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
-import Stats from "three/examples/jsm/libs/stats.module.js";
-//@ts-ignore
-import TWEEN from "@tweenjs/tween.js";
-class Three {
-  scene: THREE.Scene;
-  camera: THREE.PerspectiveCamera;
-  renderer: THREE.WebGLRenderer;
-  control: OrbitControls;
-  CSSRender: CSS2DRenderer;
-  element: HTMLElement;
-  mixers: THREE.AnimationMixer[];
-  composers: Array<EffectComposer>;
-  clock: THREE.Clock;
-  renderMixins: Array<Function>;
-  stats: any;
-  constructor(element: HTMLElement) {
-    this.element = element;
-    this.scene = this.initScene();
-    this.camera = this.initCamera(element);
-    this.renderer = this.initRenderer(element);
-    this.CSSRender = this.initCSSRender(element);
-    this.control = this.initControl();
-    this.stats = null;
-    this.mixers = [];
-    this.composers = [];
-    this.renderMixins = [];
-    this.clock = new THREE.Clock();
-  }
-  initScene(): THREE.Scene {
-    const scene = new THREE.Scene();
-    return scene;
-  }
-  initCSSRender(element: HTMLElement): CSS2DRenderer {
-    const CSSRender = new CSS2DRenderer();
-    CSSRender.setSize(element.offsetWidth, element.offsetHeight);
-    CSSRender.domElement.style.position = "absolute";
-    CSSRender.domElement.style.top = "0px";
-    element.appendChild(CSSRender.domElement);
-    return CSSRender;
-  }
-  initCamera(element: HTMLElement): THREE.PerspectiveCamera {
-    const fov = 20;
-    const aspect = element.offsetWidth / element.offsetHeight;
-    const near = 0.1;
-    const far = 5 * 1000;
-    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
-    camera.position.set(0, 0, 3);
-    return camera;
-  }
-  initRenderer(element: HTMLElement) {
-    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
-    renderer.outputEncoding = THREE.sRGBEncoding;
-    renderer.localClippingEnabled = true;
-    renderer.shadowMap.enabled = true;
-    renderer.setSize(element.offsetWidth, element.offsetHeight);
-    element.appendChild(renderer.domElement);
-    return renderer;
-  }
-  initControl() {
-    const control = new OrbitControls(this.camera, this.CSSRender.domElement);
-    return control;
-  }
-  initHelp(size: number) {
-    const axesHelper = new THREE.AxesHelper(size);
-    this.scene.add(axesHelper);
-  }
-  initStats() {
-    //@ts-ignore
-    this.stats = new Stats();
-    this.element.appendChild(this.stats.dom);
-  }
-  loadGLTF(url: string, onProgress = (progress: number) => {}): Promise<GLTF> {
-    const loader = new GLTFLoader();
-    return new Promise<GLTF>((resolve) => {
-      loader.load(
-        url,
-        (object: any) => resolve(object),
-        (xhr: any) => onProgress(Number((xhr.loaded / xhr.total) * 100))
-      );
-    });
-  }
-  playModelAnimate(
-    mesh: THREE.Object3D | THREE.AnimationObjectGroup,
-    animations: AnimationClip[],
-    animationName: string
-  ) {
-    const mixer = new THREE.AnimationMixer(mesh);
-    const clip = THREE.AnimationClip.findByName(animations, animationName);
-    if (!clip) return void 0;
-    const action = mixer.clipAction(clip);
-    action.play();
-    this.mixers.push(mixer);
-  }
-  render() {
-    const delta = new THREE.Clock().getDelta();
-    this.renderer.render(this.scene, this.camera);
-    requestAnimationFrame(() => this.render());
-    const mixerUpdateDelta = this.clock.getDelta();
-    this.mixers.forEach((mixer) => mixer.update(mixerUpdateDelta));
-    this.composers.forEach((composer) => composer.render(delta));
-    this.renderMixins.forEach((mixin) => mixin());
-    TWEEN.update();
-    this.stats && this.stats?.update();
-  }
-}
-export default Three;

package/tsconfig.json

@@ -1,11 +0,0 @@
-{
-	"include": ["lib"],
-	"moduleResolution": "node",
-	"compilerOptions": {
-		"target": "es5",
-		"module": "es6",
-		"declaration": true,
-		"outDir": "./dist",
-		"strict": true
-	}
-}