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

最新推荐文章于 2024-06-14 10:30:12 发布

qq_37591637

最新推荐文章于 2024-06-14 10:30:12 发布

阅读量3.1k

点赞数 2

分类专栏：手机软件h5应用制作

本文链接：https://blog.csdn.net/qq_37591637/article/details/90597344

版权

手机软件h5应用制作专栏收录该内容

43 篇文章 1 订阅

订阅专栏

我的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

3.安装cnpm

npm的国内镜像—cnpm

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

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

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

第四步、创建threejs工程

4.1、在vscode里面打开文件夹

4.2、打开终端

4.3、创建 package.json

输入cnpm init

然后就会出现package.json文件

安装typescript

npm install -g typescript

4.4、创建 tsconfig.json

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

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

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

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

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

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

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

在文件里面输入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:构建

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

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

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

7、配置view in browser插件

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

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

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

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

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

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

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

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

qq_37591637

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
H5开发3D引擎：VSCode+TS开发环境搭建

我的qq 2038373094我做的是微信小程序、网站、手机app，后端java+前端vue、bootstrap框架、原生的html+css+js都会做过律师在线咨询系统、共享农场手机app、在线心理咨询系统使用的工具vscode开始部署的第一步 node.js的安装 1、首先安装node.js 官网https://nodejs.org/en/do...
复制链接

扫一扫