GAMES202作业0-环境搭建过程&解决遇到的问题

悠悠 2023-09-28 12:40 121阅读 0赞

**目录**

1 下载Visual Studio Code

2 安装插件 Live Server

3 Node.js

4 打开作业框架查看模型

解决问题

npm WARN config global \`--global\`, \`--local\` are deprecated. Use \`--location=global\` instead

作业0模型不显示

--------------------

## 1 下载Visual Studio Code ##

直接点进链接下载并安装：

[Download Visual Studio Code - Mac, Linux, Windows][Download Visual Studio Code - Mac_ Linux_ Windows]

## 2 安装插件 Live Server ##

打开VS Code -> Extensions -> 搜索Live Server ->点击 install安装即可

![15dab8365e364faaa3e659da656159f7.png][]

题外话：VS Code安装的插件都可以在C盘 -> Users -> 用户名 -> .vscode文件夹里找到。

![7380553ab35446a9aa218c13afb536fe.png][]

## 3 Node.js ##

点击链接下载并安装Node.js：

[Download | Node.js (nodejs.org)][Download _ Node.js _nodejs.org]

（1）Win+R调出运行栏并输入cmd：

![97413fd25b57451d9d8054c10cd49531.png][]

或者搜索框直接搜cmd都可以：

![324139fa99c5423c9a323df30767c0e0.png][]

（2）输入如下命令：

npm install http-server -g

![fe594b359265408c9e472414cd219d3e.png][]

![fecc7a0ec3ea4f0ba37f25df3ee2857a.png][]

出现上述界面就代表install成功了，如果**报错出现了WARN**，后面部分有说解决办法，可以直接去看看。

## 4 打开作业框架查看模型 ##

（1）在VS Code选择Open new fold并选择作业0的文件夹，打开后如下：

![b045bbedc7ab4cc68332917ebc2ab6f5.png][]

（2）右键index.html文件并选择Open with Live Server：

![757ba68e8b1245398632b82a94ab8f9d.png][]

![84ce5c7d968440cdb1128d23fba22dd7.png][]

就能成功打开作业框架的内容，其中包含：**一个人物模型**和**一个围绕模型运动的光源**。

如果打开出现黑屏或仅有光源没有模型的问题，后面的问题解决有展示解决办法。

## 解决问题 ##

### npm WARN config global \`--global\`, \`--local\` are deprecated. Use \`--location=global\` instead ###

这个问题会在输入npm install http-server -g 的时候出现，如果出现如下错误提示：

npm WARN config global \`--global\`, \`--local\` are deprecated. Use \`--location=global\` instead.

![065575879f344a7aa77513e5896c01ea.png][]

首先，保证npm更新到了最新版本。之后，找到我们安装Noder.js的文件夹，我是安装到了D盘，按照你的保存路径找就行，

并分别打开**npm**和**npm.cmd**这两个文件。

![c072073f38ca403484c410282462dc27.png][]

文件可以直接拖拽进刚刚安装的VS Code里就可以打开了。

ctrl+H分别搜索定位到

prefix -g

npm如下：

![7a9f59f3b3e444beb8646d3f029d7406.png][]

npm.cmd如下：

![742d5513501240b49848b62b7113bcad.png][]

关键的一步来了，分别把prefix -g 替换成如下代码：（注意这里替换最好自己手动输入！）

prefix --location=global

替换后npm和npm.cmd依次如下：

![59fb6f7fa5ae4fa5ab0ed7afedc57ade.png][]

![ca8d7a11c2a647fe8e7273ac07a9d3c2.png][]

ctrl+s分别保存后关掉文件，再进行cmd输入npm install http-server -g，会发现刚刚的WARN就消失了。

### 作业0模型不显示 ###

作业0只有光源/作业0模型不显示/作业0黑屏...等等问题都可以尝试接下来的解决思路：

我最开始出现的是黑屏的问题，光源和模型什么都没有，只有右上角的操作栏

![99f9d4063ffa411ebfe5d644e786bf9b.png][]

这里可以在展示的浏览器中，按F12就能弹出浏览器后台的Console界面：

![49943a3359634d71b5104a561e06dfeb.png][]

看到提示了：

Uncaught ReferenceError: mat4 is not defined

我们再回到VS Code打开的框架，观察index.html文件可以发现，针对mat4的是这句话：

![2848bb9962384bc792fd5d227d659cdd.png][]

我认为这个链接就是加载mat4的部分：[https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js][https_cdnjs.cloudflare.com_ajax_libs_gl-matrix_2.8.1_gl-matrix-min.js]

我发现，我是打不开里面的这个链接的，即使挂了梯也打不了开... 于是想到比较粗暴的解决办法就是，直接下载**gl-matrix-min.js**文件加在框架里，应该就能解决了。

经搜索发现了有人把这个文件上传了github：[gl-matrix-min.js · GitHub][gl-matrix-min.js _ GitHub]

点进去直接下载，并将文件中的对应文件拖入VS Code里就行，我是放在了src下：

![25c99a8a7863411c82db222282c58482.png][]

![6971fab903bb464f8ec1c9bfe37b1cfc.png][]

到这里还没有完成，还需要把刚刚的原始的代码：

替换成：

做完上述操作后，ctrl+s保存，刷新结果页面，可以发现模型就展示出来了，且报错也消除了。

![3eb2b63555884c4094011d47b037931b.png][]

如果模型展示不全，只出现了一个202，多刷新几次就出来了。

[Download Visual Studio Code - Mac_ Linux_ Windows]: https://code.visualstudio.com/Download
[15dab8365e364faaa3e659da656159f7.png]: https://img-blog.csdnimg.cn/15dab8365e364faaa3e659da656159f7.png
[7380553ab35446a9aa218c13afb536fe.png]: https://img-blog.csdnimg.cn/7380553ab35446a9aa218c13afb536fe.png
[Download _ Node.js _nodejs.org]: https://nodejs.org/en/download/
[97413fd25b57451d9d8054c10cd49531.png]: https://img-blog.csdnimg.cn/97413fd25b57451d9d8054c10cd49531.png
[324139fa99c5423c9a323df30767c0e0.png]: https://img-blog.csdnimg.cn/324139fa99c5423c9a323df30767c0e0.png
[fe594b359265408c9e472414cd219d3e.png]: https://img-blog.csdnimg.cn/fe594b359265408c9e472414cd219d3e.png
[fecc7a0ec3ea4f0ba37f25df3ee2857a.png]: https://img-blog.csdnimg.cn/fecc7a0ec3ea4f0ba37f25df3ee2857a.png
[b045bbedc7ab4cc68332917ebc2ab6f5.png]: https://img-blog.csdnimg.cn/b045bbedc7ab4cc68332917ebc2ab6f5.png
[757ba68e8b1245398632b82a94ab8f9d.png]: https://img-blog.csdnimg.cn/757ba68e8b1245398632b82a94ab8f9d.png
[84ce5c7d968440cdb1128d23fba22dd7.png]: https://img-blog.csdnimg.cn/84ce5c7d968440cdb1128d23fba22dd7.png
[065575879f344a7aa77513e5896c01ea.png]: https://img-blog.csdnimg.cn/065575879f344a7aa77513e5896c01ea.png
[c072073f38ca403484c410282462dc27.png]: https://img-blog.csdnimg.cn/c072073f38ca403484c410282462dc27.png
[7a9f59f3b3e444beb8646d3f029d7406.png]: https://img-blog.csdnimg.cn/7a9f59f3b3e444beb8646d3f029d7406.png
[742d5513501240b49848b62b7113bcad.png]: https://img-blog.csdnimg.cn/742d5513501240b49848b62b7113bcad.png
[59fb6f7fa5ae4fa5ab0ed7afedc57ade.png]: https://img-blog.csdnimg.cn/59fb6f7fa5ae4fa5ab0ed7afedc57ade.png
[ca8d7a11c2a647fe8e7273ac07a9d3c2.png]: https://img-blog.csdnimg.cn/ca8d7a11c2a647fe8e7273ac07a9d3c2.png
[99f9d4063ffa411ebfe5d644e786bf9b.png]: https://img-blog.csdnimg.cn/99f9d4063ffa411ebfe5d644e786bf9b.png
[49943a3359634d71b5104a561e06dfeb.png]: https://img-blog.csdnimg.cn/49943a3359634d71b5104a561e06dfeb.png
[2848bb9962384bc792fd5d227d659cdd.png]: https://img-blog.csdnimg.cn/2848bb9962384bc792fd5d227d659cdd.png
[https_cdnjs.cloudflare.com_ajax_libs_gl-matrix_2.8.1_gl-matrix-min.js]: https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js
[gl-matrix-min.js _ GitHub]: https://gist.github.com/pbfy0/3a1717978fc68adaa7a878a2089db731
[25c99a8a7863411c82db222282c58482.png]: https://img-blog.csdnimg.cn/25c99a8a7863411c82db222282c58482.png
[6971fab903bb464f8ec1c9bfe37b1cfc.png]: https://img-blog.csdnimg.cn/6971fab903bb464f8ec1c9bfe37b1cfc.png
[3eb2b63555884c4094011d47b037931b.png]: https://img-blog.csdnimg.cn/3eb2b63555884c4094011d47b037931b.png