devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

WebGL2.0从入门到精通-1、前端项目搭建（html+typescript+vite）

作者：IT小白 | 2024-06-16 15:47:25

赞

踩

webgl2

一、新建 package.json

在一个文件夹下，新建一个 package.json ，并初始填入以下内容

  1. {
  2.     "name": "webgl2-tian-gis",
  3.     "version": "0.1.0",
  4.     "author": "tian",
  5.     "description": "tian webgl2 vite template & samples",
  6.     "repository": {
  7.         "type": "git",
  8.         "url": "git+https://github.com/tian666666/webgl2-tian-gis.git"
  9.     },
  10.     "scripts": {},
  11.     "devDependencies": {},
  12.     "dependencies": {}
  13. }

二、新建 readme.md

新建 readme.md，并填入以下初始化内容

  1. <!--
  2.  * @Description: 
  3.  * @Author: tianyw
  4.  * @Date: 2023-01-25 15:18:01
  5.  * @LastEditTime: 2023-01-25 15:22:17
  6.  * @LastEditors: tianyw
  7. -->
  8. # webgl2-tian-gis
  9.  
  10. ## Description
  11.  
  12. a 3d gis webgl2 application

三、上传至 github

1、git init

执行 git init 命令

2、git add .

执行 git add . 命令

3、git commit -m "first commit"

执行 git commit 命令 提交

4、git branch -M main

执行 git branch -M 命令

5、git remote add origin https://github.com/tian666666/webgl2-tian-gis.git

执行建立远程连接 github

6、git push -u origin main

提交代码

四、vite 、ts 使用及配置

1、yarn add vite

先安装 vite 依赖。

2、npm install -g typescript

全局安装 typescript 后，执行 tsc -version 来查看当前 typescript 版本。

3、tsconfig.json 配置

新建 tsconfig.json ，并配置如下：

  1. {
  2.   "compilerOptions": {
  3.     "target": "ESNext",
  4.     "useDefineForClassFields": true,
  5.     "module": "ESNext",
  6.     "lib": ["ESNext", "DOM"],
  7.     "moduleResolution": "Node",
  8.     "strict": true,
  9.     "sourceMap": true,
  10.     "resolveJsonModule": true,
  11.     "esModuleInterop": true,
  12.     "noEmit": true,
  13.     "noUnusedLocals": true,
  14.     "noUnusedParameters": true,
  15.     "noImplicitReturns": true,
  16.     "types": ["vite/client"]
  17.   },
  18.   "include": ["samples"]
  19. }

​

其中 "include": ["samples"] 表示 设置需要进⾏编译的⽂件，⽀持路径模式匹配

因此需要根目录下新建 samples 文件夹。

4、新建 samples 文件夹

samples 文件夹用于表示所有 webgl 的 demo 的存放位置，这里规定，samples 文件夹下的文件夹具备以下特性：每个文件夹都是一个单独的 demo、每个文件夹至少有 2 个文件：即与文件夹同名的 html 文件 和 与文件夹同名的 ts 文件、且 该 html 引用了同名的 ts 文件。具体如：samples 文件夹下有个 test 文件夹，test 文件夹下有 test.html 和 test.ts，test.html 中引用了 test.ts。本次项目新建如下：

test1.html 中使用了 test1.ts

所有文件夹及文件和代码如下：

test1 文件夹下：

test.html 内容：

  1.     <!--
  2.  * @Description: 
  3.  * @Author: tianyw
  4.  * @Date: 2022-11-11 12:50:23
  5.  * @LastEditTime: 2023-01-25 15:44:42
  6.  * @LastEditors: tianyw
  7. -->
  8. <!DOCTYPE html>
  9. <html lang="en">
  10.  
  11. <head>
  12.     <meta charset="UTF-8" />
  13.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  14.     <title>test1</title>
  15.     <style>
  16.         html,
  17.         body {
  18.             margin: 0;
  19.             width: 100%;
  20.             height: 100%;
  21.             background: #000;
  22.             color: #fff;
  23.             display: flex;
  24.             text-align: center;
  25.             flex-direction: column;
  26.             justify-content: center;
  27.         }
  28.  
  29.         div {
  30.             height: 100%;
  31.             width: 100%;
  32.         }
  33.     </style>
  34. </head>
  35.  
  36. <body>
  37.     <div id="test1"></div>
  38.     <script type="module" src="./test1.ts"></script>
  39.  
  40. </body>
  41.  
  42. </html>

test1.ts 文件内容：

  1.   /*
  2.  * @Description:
  3.  * @Author: tianyw
  4.  * @Date: 2023-01-25 15:40:47
  5.  * @LastEditTime: 2023-01-25 16:07:19
  6.  * @LastEditors: tianyw
  7.  */
  8. import { cprint } from "./c";
  9. function run() {
  10.   const divEl = document.getElementById("test1") as HTMLElement;
  11.  
  12.   const childDivEl = document.createElement("div");
  13.   childDivEl.innerHTML = "I am Test1";
  14.  
  15.   divEl.appendChild(childDivEl);
  16. }
  17. run();
  18. cprint();

​

c.ts 文件内容：

  1.    /*
  2.  * @Description: 
  3.  * @Author: tianyw
  4.  * @Date: 2023-01-25 16:04:28
  5.  * @LastEditTime: 2023-01-25 16:05:32
  6.  * @LastEditors: tianyw
  7.  */
  8. export function cprint() {
  9.   console.log("test1打印");
  10. }

​

可以看到，如果 test1.html 运行的话，test1.html 调用了 test1.ts，test1.ts 的 run 方法执行了向页面中添加 I am Test1，cprint 方法调用了 c.ts 执行了再控制台打印 "test1 打印" 的内容。

test2 文件夹内容：

test2.html 文件内容：

  1. <!--
  2.  * @Description: 
  3.  * @Author: tianyw
  4.  * @Date: 2022-11-11 12:50:23
  5.  * @LastEditTime: 2023-01-25 15:44:32
  6.  * @LastEditors: tianyw
  7. -->
  8. <!DOCTYPE html>
  9. <html lang="en">
  10.  
  11. <head>
  12.     <meta charset="UTF-8" />
  13.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  14.     <title>test2</title>
  15.     <style>
  16.         html,
  17.         body {
  18.             margin: 0;
  19.             width: 100%;
  20.             height: 100%;
  21.             background: #000;
  22.             color: #fff;
  23.             display: flex;
  24.             text-align: center;
  25.             flex-direction: column;
  26.             justify-content: center;
  27.         }
  28.  
  29.         div {
  30.             height: 100%;
  31.             width: 100%;
  32.         }
  33.     </style>
  34. </head>
  35.  
  36. <body>
  37.     <div id="test2"></div>
  38.     <script type="module" src="./test2.ts"></script>
  39.  
  40. </body>
  41.  
  42. </html>

test2.ts 文件内容：

  1.  /*
  2.  * @Description:
  3.  * @Author: tianyw
  4.  * @Date: 2023-01-25 15:40:52
  5.  * @LastEditTime: 2023-01-25 16:17:37
  6.  * @LastEditors: tianyw
  7.  */
  8. function run() {
  9.   const divEl = document.getElementById("test2") as HTMLElement;
  10.  
  11.   const childDivEl = document.createElement("div");
  12.   childDivEl.innerHTML = "I am Test2";
  13.  
  14.   divEl.appendChild(childDivEl);
  15. }
  16. run();

​

可以看到，如果 test2.html 运行的话，test2.html 调用了 test2.ts，test2.ts 的 run 方法执行了向页面中添加 I am Test2。

此时缺少一个如何统一选择运行 samples 下的各个 demo 的入口。

这时就需要 index.html 作为单页面应用的入口。

  1. 新建 index.html

index.html 的完整内容为：

  1.    <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>tian Webgpu Samples</title>
  8.     <style>
  9.         html,
  10.         body {
  11.             font-family: Avenir, Helvetica, Arial, sans-serif;
  12.             -webkit-font-smoothing: antialiased;
  13.             margin: 0;
  14.             width: 100%;
  15.             height: 100%;
  16.             display: flex;
  17.         }
  18.  
  19.         .menu {
  20.             width: 200px;
  21.             height: 100%;
  22.             border-right: 1px solid #888;
  23.             overflow: auto;
  24.             padding: 0 10px;
  25.         }
  26.  
  27.         .menu>a {
  28.             display: block;
  29.             margin: 5px 0;
  30.             color: #045b88;
  31.             text-decoration: none;
  32.             cursor: pointer;
  33.  
  34.         }
  35.  
  36.         a {
  37.             margin-top: 5px;
  38.         }
  39.  
  40.         a:hover {
  41.             text-decoration: underline;
  42.             color: blue;
  43.         }
  44.  
  45.         a.active {
  46.             color: red;
  47.         }
  48.  
  49.         iframe {
  50.             flex-grow: 1;
  51.             border: none;
  52.         }
  53.  
  54.         #webgl2samplediv {
  55.             display: grid;
  56.         }
  57.  
  58.         #webgl2samplediv>a {
  59.             cursor: pointer;
  60.         }
  61.  
  62.         .src {
  63.             position: fixed;
  64.             right: 10px;
  65.             bottom: 10px;
  66.             height: 40px;
  67.             width: 40px;
  68.             background: #fff;
  69.             text-align: center;
  70.             font-size: 16px;
  71.             line-height: 40px;
  72.             border-radius: 50%;
  73.             border: none;
  74.             opacity: 0.6;
  75.             cursor: pointer;
  76.             text-decoration: none !important;
  77.         }
  78.  
  79.         .src:hover {
  80.             opacity: 1;
  81.         }
  82.     </style>
  83. </head>
  84.  
  85. <body>
  86.     <div class="menu">
  87.         <div>
  88.             <h3>WebGL2 Samples</h3>
  89.             <hr>
  90.             <div id="webgl2samplediv">
  91.                 <a class="sample" target="test1">test1</a>
  92.                 <a class="sample" target="test2">test2</a>
  93.             </div>
  94.         </div>
  95.     </div>
  96.     <iframe title="d"></iframe>
  97.     <a class="src" target="_blank">&lt; &gt;</a>
  98.     <script>
  99.         const iframe = document.querySelector('iframe')
  100.         const button = document.querySelector('.src')
  101.         const samples = document.querySelectorAll('.sample')
  102.         for (let sample of samples) {
  103.             sample.addEventListener('click', () => {
  104.                 window.location.hash = sample.target
  105.                 iframe.src = './samples/' + sample.target + "/" + sample.target + '.html'
  106.                 button.href = 'https://github.com/tian666666/webgl2-tian-gis.git' + sample.target + '.ts'
  107.                 const activeEle = document.querySelector('.active');
  108.                 if (activeEle && activeEle.classList) {
  109.                     document.querySelector('.active').classList.remove('active')
  110.                 }
  111.                 sample.classList.add('active')
  112.             })
  113.         }
  114.         if (window.location.hash)
  115.             document.querySelector(`[target=${window.location.hash.slice(1)}]`).click()
  116.         else if (document.querySelector('.sample.active'))
  117.             document.querySelector('.sample.active').click()
  118.     </script>
  119. </body>
  120.  
  121. </html>

可以看到，index.html 核心原理就是 在 id 为 webgl2samplediv 的 div 下手动引入 samples 文件夹下的 demo，target 为 samples 下的文件夹名。

  1.  <div id="webgl2samplediv">
  2.                 <a class="sample" target="test1">test1</a>
  3.                 <a class="sample" target="test2">test2</a>
  4.             </div>

此时还缺少编译、运行的脚本命令，就需要配置 package.json 和 vite 的配置

  1. 配置 package.json

package.json 的完整内容：

  1. {
  2.     "name": "webgl2-tian-gis",
  3.     "version": "0.1.0",
  4.     "author": "tian",
  5.     "description": "tian webgl2 vite template & samples",
  6.     "repository": {
  7.         "type": "git",
  8.         "url": "git+https://github.com/tian666666/webgl2-tian-gis.git"
  9.     },
  10.     "scripts": {
  11.         "dev": "vite",
  12.         "build": "tsc && vite build --config vite.config.github.js",
  13.         "preview": "vite preview"
  14.     },
  15.     "devDependencies": {},
  16.     "dependencies": {
  17.         "vite": "^4.0.4"
  18.     }
  19. }

在 package.json 中 添加 scripts 命令，build 使用了 vite.config.github.js，需要进行新建

7、配置 vite

分别新建 vite.config.js 和 vite.config.github.js ，具体内容如下：

vite.config.github.js 文件内容：

  1.  /*
  2.  * @Description:
  3.  * @Author: tianyw
  4.  * @Date: 2023-01-25 15:30:26
  5.  * @LastEditTime: 2023-01-26 17:46:39
  6.  * @LastEditors: tianyw
  7.  */
  8. const { defineConfig } = require("vite");
  9. const { resolve } = require("path");
  10. const fs = require("fs");
  11.  
  12. const input = {
  13.   main: resolve(__dirname, "index.html")
  14. };
  15. const samples = fs.readdirSync(resolve(__dirname, "samples"));
  16. for (let file of samples) {
  17.   const files = fs.readdirSync(resolve(__dirname, "samples/" + file));
  18.  
  19.   for (const childFile of files) {
  20.     if (childFile.endsWith(".html")) {
  21.       const filePath = resolve(__dirname, "samples/" + file + "/" + childFile);
  22.       input[file] = filePath;
  23.     }
  24.   }
  25. }
  26. // 编译输出目录 输出文件夹 默认为 dist 如果想要生成为其他名称，需要在此处修改，直接修改打包后的文件夹名称会影响 html 中引用的地址导致项目无法正常运行
  27. const outFolderName = "dist";
  28. module.exports = defineConfig({
  29.   base: `/${outFolderName}/`,
  30.   build: {
  31.     outDir: `./${outFolderName}`,
  32.     rollupOptions: {
  33.       input
  34.     }
  35.   }
  36. });

​

vite.config.js 文件内容：

  1. /*
  2.  * @Description: 
  3.  * @Author: tianyw
  4.  * @Date: 2023-01-25 15:30:19
  5.  * @LastEditTime: 2023-01-25 15:50:33
  6.  * @LastEditors: tianyw
  7.  */
  8. import { defineConfig } from "vite";
  9. module.exports = defineConfig({
  10.   server: {
  11.     host: "localhost",
  12.     port: 3000
  13.   }
  14. });

​

至此就可以执行 yarn dev、yarn build 等命令来运行、编译项目了。

8、运行、编译结果

yarn dev 运行结果：

yarn build 结果：

打包后的项目运行 index.html 后，运行结果和 yarn dev 运行结果一致。

9、引入 LICENSE

LICENSE 内容，采用 MIT：

  1.    <!--
  2.  * @Description: 
  3.  * @Author: tianyw
  4.  * @Date: 2023-01-26 18:08:47
  5.  * @LastEditTime: 2023-01-26 18:08:52
  6.  * @LastEditors: tianyw
  7. -->
  8. # Released under MIT License
  9.  
  10. Copyright (c) 2023 tian
  11.  
  12. 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:
  13.  
  14. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  15.  
  16. 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.
10、引入 .gitignore
  1. # Logs
  2. logs
  3. *.log
  4. npm-debug.log*
  5. yarn-debug.log*
  6. yarn-error.log*
  7. pnpm-debug.log*
  8. lerna-debug.log*
  9.  
  10. node_modules
  11. dist
  12. dist-ssr
  13. *.local
  14. yarn-error.log
  15. yarn.lock
  16. package-lock.json
  17.  
  18. # Editor directories and files
  19. .vscode/*
  20. !.vscode/extensions.json
  21. .idea
  22. .DS_Store
  23. *.suo
  24. *.ntvs*
  25. *.njsproj
  26. *.sln
  27. *.sw?

​

11、在 readme.md 中构建初步项目目录结构

完整内容如下：

  1. <!--
  2.  * @Description: 
  3.  * @Author: tianyw
  4.  * @Date: 2023-01-25 15:18:01
  5.  * @LastEditTime: 2023-01-26 18:15:31
  6.  * @LastEditors: tianyw
  7. -->
  8. # webgl2-tian-gis
  9.  
  10. ## Description
  11.  
  12. a 3d gis webgl2 application
  13.  
  14. ## Install and Run
  15.  
  16. Type the following in any terminal:
  17.  
  18. ```bash
  19. # Clone the repo
  20. git clone https://github.com/tian666666/webgl2-tian-gis.git
  21.  
  22. # Go inside the folder
  23. cd webgl2-tian-gis
  24.  
  25. # Start installing dependencies
  26. npm install #or yarn
  27.  
  28. # Run project at localhost:3000
  29. npm run dev #or yarn run dev
  30.  
  31. # Build project
  32. npm run build #or yarn run build
  33. ```
  34.  
  35. ## Project Layout
  36.  
  37. ```bash
  38. ├─ 
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/727237?site
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。