H5开发3D引擎：VSCode+TS开发环境搭建

痛定思痛。 2022-01-27 14:37 829阅读 0赞

### 我的qq 2038373094 ###

我做的是微信小程序、网站、手机app，后端java+前端vue、bootstrap框架、原生的html+css+js都会

做过律师在线咨询系统、共享农场手机app、在线心理咨询系统

**使用的工具vscode**

### ***开始部署的第一步  node.js的安装*** ###

1、首先安装node.js

官网https://nodejs.org/en/download/

安装教程：都是直接下一步(安装位置可以变更一下)

测试是否安装成功，windows+r  输入node -v和node --version cha  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

**3.安装cnpm**

**npm的国内镜像—cnpm**

npm install -g cnpm --registry=https://registry.npm.taobao.org

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]

### *** 第二步、安装vscode（去官网下载，跟装qq，微信一样安装）*** ###

### ***第三步、在d盘新建一个文件夹如threejs*** ###

### ***第四步、创建threejs工程*** ###

### ***4.1、在vscode里面打开文件夹*** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2][]

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3][]*** *** ###

### ***4.2、打开终端***  ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 4][]

### **4.3、创建 package.json**  ###

### *** 输入cnpm init*** ###

***然后就会出现package.json文件***

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 5][]

### ***安装typescript*** ###

npm install -g typescript

### ***4.4、创建 tsconfig.json *** ###

***打开终端，输入 tsc --init就会生成配置文件***

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 6][]

### ***4.5、 建立工程所需要的目录结构*** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 7][]

src 目录：存放源码，比如ts文件。

lib  目录：存放库文件，比如第三方js库引用。

bin 目录：存放编译结果输出。

### ***4.6、编写第一个ts文件：Main.ts*** ###

***src文件夹下面新建一个Main.ts***

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 8][]

***在文件里面输入**console.log("hello world");*

TypeScript语言是JavaScript的超集，所以我们需要将它先编译成js才能使用。

***4.7、初步配置tsconfig.json（这一步很重要）***

{ "compilerOptions": 
      { "target": "es5", 
        "noImplicitAny": false,
         "module": "amd", 
         "removeComments": false,
         "sourceMap": false, 
         "outDir": "lib/js/"//你要生成js的目录,可自由命名 
         } 
        }

***4.8、ts文件编译成js***

1、ctrl+shift+B

2、选择第一个tsc:构建

![20190527120732611.png][]

3、控制台会出现如下所示，这个是正确的 （我以为错误的，百度了很多次）

![20190527120816642.png][]

4、刷新一下文件列表，就会出现Main.js了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 9][]

**4.9、在lib文件夹下面新建一个index.html**

如下所示，引入了Main.js

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
     
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>threejs第一个案例</title>
        <script type="text/javascript" src="js/Main.js"></script>
    </head>
     
    <body>
        <img src="" id="img"/>
        <canvas id='my-canvas' width='480' height='400'>
            对不起，您的浏览器未支持H5内容.
        </canvas>
    </body>
     
    </html>

**5、安装web浏览的http服务插件：lite-server**

npm install --save-dev lite-server

**6、在商店里面安装view in brower**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 10][]

**7、配置view in browser插件**

*如果不配置的话，有可能会报如下错误*

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 11][]

**7.1、配置如下**  菜单栏“文件”——“首选项”——“设置”

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 12][]

**7.2、在搜索框输入view in browser configuration，然后选择一个浏览器，选择的前提是你的电脑上面安装了这个浏览器，我是谷歌**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 13][]

**8、在启动项目之前，打开终端，输入一下几个命令，看看底层环境配置有没有搭建好**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 14][]

** 9、在package.json里面加入lite-server启动的快捷命令*****     "dev": "lite-server"***

***               ***

{
      "name": "threejs",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "lite-server"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "lite-server": "^2.4.0"
      }
    }

** 10、现在就可以用cnpm run dev启动了**

如果有异常的可以看这里[https://blog.csdn.net/qq\_37591637/article/details/90610304][https_blog.csdn.net_qq_37591637_article_details_90610304]

强烈推荐先使用简单/自己擅长的工具，然后再用强大的工具如webstrom或者vscode来做项目

2019.5.27我搞了一天，但是一直报错，可能是环境冲突了！

2019.5.28我用了我擅长的myeclispe来做threejs；因为这个的基础需要引入一个three.js就可以了；因为时间比较赶，所以我就没有一点点尝试其他的了，还是先入门，再晋级吧！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220127/78b54f6b851a4e2fb74ed2cdd2debd23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: /images/20220127/a86017fc15e54607b9395b540740bad5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2]: /images/20220127/d9767bddf86841a09ab65586e6d5f5b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3]: /images/20220127/7a64cacf7cf54c1198a90ff67007ec56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 4]: /images/20220127/f4932d6f4e7349b69dff841fcc2531d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 5]: /images/20220127/0b8504ee993048498ab44c1feef3060d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 6]: /images/20220127/371ec55e571a4c56baf5b6a44717a614.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 7]: /images/20220127/ebbbcf22b4da44528cfd61185976b0c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 8]: /images/20220127/31d448ccdb414d898c7e659d223d76ea.png
[20190527120732611.png]: /images/20220127/3c42f77d1e044e9e98bbc1d30c465ac1.png
[20190527120816642.png]: /images/20220127/ce378d44f95a43eb84b9da124527fce4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 9]: /images/20220127/8498302333604c11b8cfdff12bc2bbae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 10]: /images/20220127/0273a53b22eb46c6a46e36d1f366d3ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 11]: /images/20220127/97015f28f8724ca5bf9af3eccda4d1ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 12]: /images/20220127/ad39aae3918b4a8e931d81b87739b587.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 13]: /images/20220127/9ebe816fae4541ed8f1b20963e957bf2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 14]: /images/20220127/00000f9cf9e64464a7de168f05177d3e.png
[https_blog.csdn.net_qq_37591637_article_details_90610304]: https://blog.csdn.net/qq_37591637/article/details/90610304