three-base 0.0.1

package/.gitattributes

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

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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,21 @@
+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/README.md

@@ -0,0 +1,2 @@
+# NPM-THREE
+> 对THREE简单的封装.....

package/example/index.html

@@ -0,0 +1,27 @@
+<!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

@@ -0,0 +1,112 @@
+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/package.json

@@ -0,0 +1,27 @@
+{
+  "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"
+  }
+}

package/tsconfig.json

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