diff --git a/examples/config.json b/examples/config.json
index dbe1bf3..1ee1acb 100644
--- 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
index 20cd734..8ca87d7 100644
--- 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
index 52514ac..632b41c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,6 @@
             "license": "Apache-2.0",
             "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",
@@ -22,12 +21,14 @@
             "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"
             }
         },
         "node_modules/@babel/runtime": {
@@ -546,7 +547,8 @@
         "node_modules/@tweenjs/tween.js": {
             "version": "23.1.3",
             "resolved": "https://registry.npmmirror.com/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
-            "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA=="
+            "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+            "dev": true
         },
         "node_modules/@types/estree": {
             "version": "1.0.5",
@@ -567,12 +569,14 @@
         "node_modules/@types/stats.js": {
             "version": "0.17.3",
             "resolved": "https://registry.npmmirror.com/@types/stats.js/-/stats.js-0.17.3.tgz",
-            "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ=="
+            "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==",
+            "dev": true
         },
         "node_modules/@types/three": {
-            "version": "0.168.0",
-            "resolved": "https://registry.npmmirror.com/@types/three/-/three-0.168.0.tgz",
-            "integrity": "sha512-qAGLGzbaYgkkonOBfwOr+TZpOskPfFjrDAj801WQSVkUz0/D9zwir4vhruJ/CC/GteywzR9pqeVVfs5th/2oKw==",
+            "version": "0.169.0",
+            "resolved": "https://registry.npmmirror.com/@types/three/-/three-0.169.0.tgz",
+            "integrity": "sha512-oan7qCgJBt03wIaK+4xPWclYRPG9wzcg7Z2f5T8xYTNEF95kh0t0lklxLLYBDo7gQiGLYzE6iF4ta7nXF2bcsw==",
+            "dev": true,
             "dependencies": {
                 "@tweenjs/tween.js": "~23.1.3",
                 "@types/stats.js": "*",
@@ -591,12 +595,14 @@
         "node_modules/@types/webxr": {
             "version": "0.5.20",
             "resolved": "https://registry.npmmirror.com/@types/webxr/-/webxr-0.5.20.tgz",
-            "integrity": "sha512-JGpU6qiIJQKUuVSKx1GtQnHJGxRjtfGIhzO2ilq43VZZS//f1h1Sgexbdk+Lq+7569a6EYhOWrUpIruR/1Enmg=="
+            "integrity": "sha512-JGpU6qiIJQKUuVSKx1GtQnHJGxRjtfGIhzO2ilq43VZZS//f1h1Sgexbdk+Lq+7569a6EYhOWrUpIruR/1Enmg==",
+            "dev": true
         },
         "node_modules/@webgpu/types": {
             "version": "0.1.45",
             "resolved": "https://registry.npmmirror.com/@webgpu/types/-/types-0.1.45.tgz",
-            "integrity": "sha512-0TBBF/mhakJoK0qUWCZugBnh23x+VwmYA5RLmtNQwvZt1pQ4P2fzIvQUiSe6jxzkBi4GF8R4BejJjro0ZSoSXQ=="
+            "integrity": "sha512-0TBBF/mhakJoK0qUWCZugBnh23x+VwmYA5RLmtNQwvZt1pQ4P2fzIvQUiSe6jxzkBi4GF8R4BejJjro0ZSoSXQ==",
+            "dev": true
         },
         "node_modules/acorn": {
             "version": "8.12.1",
@@ -1619,7 +1625,8 @@
         "node_modules/fflate": {
             "version": "0.8.2",
             "resolved": "https://registry.npmmirror.com/fflate/-/fflate-0.8.2.tgz",
-            "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A=="
+            "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+            "dev": true
         },
         "node_modules/figures": {
             "version": "2.0.0",
@@ -2304,7 +2311,8 @@
         "node_modules/meshoptimizer": {
             "version": "0.18.1",
             "resolved": "https://registry.npmmirror.com/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
-            "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw=="
+            "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
+            "dev": true
         },
         "node_modules/mimic-fn": {
             "version": "1.2.0",
@@ -3816,6 +3824,19 @@
                 "node": ">= 0.8.0"
             }
         },
+        "node_modules/typescript": {
+            "version": "5.6.2",
+            "resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.6.2.tgz",
+            "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
+            "dev": true,
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=14.17"
+            }
+        },
         "node_modules/update-browserslist-db": {
             "version": "1.1.0",
             "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
diff --git a/package.json b/package.json
index aa4eb8b..0ff3eba 100644
--- 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
new file mode 100644
index 0000000..e69de29
diff --git a/src/main.mjs b/src/main.mjs
index 731b327..fbc45a9 100644
--- 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
new file mode 100644
index 0000000..14242cb
--- /dev/null
+++ 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"
+    }
+}
