Games202 operation 0 - environment building process & solving problems encountered

Catalog

1 download Visual Studio Code

2 Installing a plug-in Live Server

3 Node.js

4 Open the job frame to view the model

solve the problem

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

Homework 0 The model does not show

---

1 download Visual Studio Code

Click the link directly to download and install ：

Download Visual Studio Code - Mac, Linux, Windows

2 Installing a plug-in Live Server

open VS Code -> Extensions -> Search for Live Server -> Click on install Can be installed

Digression ：VS Code The installed plug-ins can be found in C disc -> Users -> user name -> .vscode Found in the folder .

3 Node.js

Click the link to download and install Node.js：

Download | Node.js (nodejs.org)

（1）Win+R Call up the operation column and enter cmd：

Or search directly in the search box cmd Fine ：

（2） Enter the following command ：

npm install http-server -g

 

The appearance of the above interface means install succeed , If The error report appears WARN, The following part talks about the solution , You can go and have a look directly .

4 Open the job frame to view the model

（1） stay VS Code choice Open new fold And choose an assignment 0 Folder , Open it as follows ：

（2） Right click index.html File and select Open with Live Server：

You can successfully open the contents of the job framework , It includes ： A character model and A light source moving around the model . 

If you open it, there is a black screen or there is only a light source without a model , There are solutions to the following problems .

solve the problem

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

This question will be input npm install http-server -g when , If the following error message appears ：

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

First , Guarantee npm Updated to the latest version . after , Find us to install Noder.js Folder , I installed it to D disc , Just follow your save path ,

And open them separately npm and npm.cmd These two documents . 

Files can be directly dragged into the just installed VS Code You can open it in .

ctrl+H Search separately and locate

prefix -g

npm as follows ： 

npm.cmd as follows ：

Here's the key step , Separate prefix -g Replace with the following code ：（ Note that the replacement here is best entered manually ！）

prefix --location=global

After replacement npm and npm.cmd As follows ：

ctrl+s Save separately and close the file , Proceed again cmd Input npm install http-server -g, You'll find what just happened WARN It disappeared .

Homework 0 The model does not show

Homework 0 Only light source / Homework 0 The model does not show / Homework 0 Black screen ... And so on, you can try the next solution ：

What I started with was the problem of black screen , Light source and model have nothing , Only the operation bar in the upper right corner

This can be found in the displayed browser , Press F12 You can pop up the browser background Console Interface ：

See the hint ：

Uncaught ReferenceError: mat4 is not defined

Let's go back to VS Code Open frame , Observe index.html Documents can be found , in the light of mat4 It is this sentence ：

I think this link is loading mat4 Part of ：https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js

I find , I can't open this link inside , Even if the ladder is hung, it cannot be opened ...  So I came up with a rough solution , Direct download gl-matrix-min.js The document is added to the frame , It should be able to solve .

After searching, I found that someone uploaded this file github：gl-matrix-min.js · GitHub

Click in and download directly , And drag the corresponding file in the file into VS Code Just inside , I put it on src Next ：

It's not finished yet , You also need to put the original code just ：

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

Replace with ：

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

After doing the above ,ctrl+s preservation , Refresh the results page , The model can be found and displayed , And the error report is eliminated .

If the model is not fully displayed , There was only one 202, Refresh a few more times and it will come out .