GAMES202作业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

2 安装插件 Live Server

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

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

3 Node.js

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

Download | Node.js (nodejs.org)

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

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

（2）输入如下命令：

npm install http-server -g

 

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

4 打开作业框架查看模型

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

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

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

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

解决问题

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.

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

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

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

ctrl+H分别搜索定位到

prefix -g

npm如下： 

npm.cmd如下：

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

prefix --location=global

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

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

作业0模型不显示

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

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

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

看到提示了：

Uncaught ReferenceError: mat4 is not defined

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

我认为这个链接就是加载mat4的部分：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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
        integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
        crossorigin="anonymous" defer> </script>

替换成：

<script src="src/gl-matrix-min.js" defer> </script>

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

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