Merge pull request #3 from Bi2Nb9O3-Studio/dev

移动功能补全及TypeScript支持
Bi2Nb9O3-Studio · Oct 2, 2024 · ed0ffcb · ed0ffcb
2 parents 3162526 + 5c5ca83
commit ed0ffcb
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 24 deletions.
diff --git a/examples/config.json b/examples/config.json
@@ -1,6 +1,5 @@
 {
     "picFolder": ["resources/images/", "resources/images1/"],
-    "canvasElementID": "canvas",
     "camera": {
         "FOV": 75,
         "position": {
@@ -18,5 +17,6 @@
         "maxZ": -0.5
     },
     "modelURL": "../Deprecated/static/model/model.glb",
-    "divElementID": "cav"
+    "divElementID": "cav",
+    "moveDistance": 0.05
 }
diff --git a/examples/example.html b/examples/example.html
@@ -6,12 +6,7 @@
         <title>Document</title>
     </head>
     <body>
-        <div id="cav" style="width: 100vw; height: 100vh; margin: 0; padding: 0">
-            <canvas id="canvas" style="width: 100%; height: 100%">
-                Your browser does not support the HTML5 canvas element.
-            </canvas>
-        </div>
-
+        <ext id="cav" style="width: 100vw; height: 100vh; margin: 0; padding: 0"></ext>
         <script type="module">
             import * as bundle from "../build/bundle.js";
             var exhition = new bundle.$Exhibition("/examples/config.json");

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,9 @@
     "scripts": {
         "check": "eslint . && prettier --check .",
         "fix": "eslint . --fix && prettier --write .",
-        "build": "rollup -c"
+        "build": "rollup -c && npx -p typescript tsc",
+        "build:types": "npx -p typescript tsc",
+        "build:rollup": "rollup -c"
     },
     "repository": {
         "type": "git",
@@ -23,16 +25,17 @@
     "devDependencies": {
         "@eslint/js": "^9.10.0",
         "@lopatnov/rollup-plugin-uglify": "^2.1.5",
+        "@types/three": "^0.169.0",
         "eslint": "^9.10.0",
         "eslint-plugin-prettier": "^5.2.1",
         "globals": "^15.9.0",
         "rollup": "^4.21.3",
         "rollup-plugin-javascript-obfuscator": "^1.0.4",
-        "terser": "^5.33.0"
+        "terser": "^5.33.0",
+        "typescript": "^5.6.2"
     },
     "dependencies": {
         "@rollup/plugin-node-resolve": "^15.2.3",
-        "@types/three": "^0.168.0",
         "eslint-config-prettier": "^9.1.0",
         "prettier": "^3.3.3",
         "rollup-plugin-node-externals": "^7.1.3",

diff --git a/src/handlers/pic_handler.js b/src/handlers/pic_handler.js
diff --git a/src/main.mjs b/src/main.mjs
@@ -28,6 +28,7 @@ class $Exhibition {
             this.stats.update();
             requestAnimationFrame(this.$animate);
         };
+        this.keypressed;
     }
 
     init() {
@@ -49,6 +50,7 @@ class $Exhibition {
                 this.loadScence()
                     .then(_ => {
                         this.$startAnimate();
+                        this.$startMotionCheck();
                         console.log("加载场景成功!");
                     })
                     .catch(error => {
@@ -76,6 +78,43 @@ class $Exhibition {
             });
     }
 
+    $startMotionCheck() {
+        this.keypressed = { KeyW: 0, KeyS: 0, KeyA: 0, KeyD: 0 };
+        let that = this;
+        document.addEventListener("keydown", function (event) {
+            if (event.code == "KeyW" || event.code == "KeyS" || event.code == "KeyA" || event.code == "KeyD") {
+                that.keypressed[event.code] = 1;
+            }
+        });
+
+        document.addEventListener("keyup", event => {
+            if (event.code == "KeyW" || event.code == "KeyS" || event.code == "KeyA" || event.code == "KeyD") {
+                that.keypressed[event.code] = 0;
+            }
+        });
+
+        this.movdis = this.config.getValue("moveDistance");
+
+        this.motionCheck = setInterval(() => {
+            if (this.keypressed.KeyW) {
+                that.controls.moveForward(this.movdis);
+                that.$checkBoundaries();
+            }
+            if (this.keypressed.KeyA) {
+                that.controls.moveRight(-this.movdis);
+                that.$checkBoundaries();
+            }
+            if (this.keypressed.KeyS) {
+                that.controls.moveForward(-this.movdis);
+                that.$checkBoundaries();
+            }
+            if (this.keypressed.KeyD) {
+                that.controls.moveRight(this.movdis);
+                that.$checkBoundaries();
+            }
+        }, 10);
+    }
+
     /**
      * @name isMobileUserAgent
      * @description 检查是否是移动端用户代理
@@ -165,7 +204,12 @@ class $Exhibition {
         return new Promise((resolve, reject) => {
             try {
                 this.scene = new THREE.Scene();
-                this.canvasElement = document.getElementById(this.config.getValue("canvasElementID"));
+                this.divEle = document.getElementById(this.config.getValue("divElementID"));
+                this.canvasElement = document.createElement("canvas");
+                this.canvasElement.style.width = "100%";
+                this.canvasElement.style.height = "100%";
+                // this.canvasElement.style.margin = "0";
+                this.divEle.appendChild(this.canvasElement);
                 this.camera = new THREE.PerspectiveCamera(
                     this.config.getValue("camera")["FOV"],
                     this.canvasElement.clientWidth / this.canvasElement.clientHeight,
@@ -221,7 +265,7 @@ class $Exhibition {
                 directLigt.position.set(0, 100, 0);
                 this.scene.add(directLigt);
                 this.stats = new Stats();
-                document.getElementById("cav").appendChild(this.stats.domElement);
+                this.divEle.appendChild(this.stats.domElement);
                 resolve(null);
             } catch (error) {
                 reject(error);

diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,24 @@
+{
+    // 将此更改以匹配你的项目
+    "include": ["src/**/*"],
+    "compilerOptions": {
+        // 告诉 TypeScript 读取 JS 文件，因为
+        // 通常它们被忽略为源文件
+        "allowJs": true,
+        // 生成 d.ts 文件
+        "declaration": true,
+        // 此编译器运行应
+        // 只输出 d.ts 文件
+        "emitDeclarationOnly": true,
+        // 类型应该进入此目录。
+        // 删除它会将 .d.ts 文件放置在
+        // 与 .js 文件相邻的位置
+        "outDir": "build/types",
+        // 在使用 IDE 功能时转到 js 文件，如
+        // VSCode 中的"转到定义"
+        "declarationMap": true,
+        "lib": ["es6", "dom", "ESNext"],
+        "moduleResolution": "Bundler",
+        "module": "ESNext"
+    }
+}