目录
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文件夹里找到。
点击链接下载并安装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下:
到这里还没有完成,还需要把刚刚的原始的代码:
替换成:
做完上述操作后,ctrl+s保存,刷新结果页面,可以发现模型就展示出来了,且报错也消除了。
如果模型展示不全,只出现了一个202,多刷新几次就出来了。