Webpack configuration
At present, the configuration of Webpack is relatively simple, the core configuration is only a Babel-loader, as shown in the following code, if there is any change in the future, we will update the blog in time.
module.exports = {
module: {
rules: [{test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader".options: {"plugins": [["@babel/plugin-transform-runtime",
{
"absoluteRuntime": false."corejs": false."helpers": true."regenerator": true."useESModules": false}}]}}Copy the codeHTML template content
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>It is a Vcrawl!</title>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
</html>
Copy the codeInitialize the WebGL environment
Api on
Get the Canvas element.
let canvas = document.querySelector(el);
Copy the codeGets the WebGL drawing context.
let context = canvas.getContext("webgl");
Copy the codeSet the position and size of the viewport.
context.viewport(0.0, canvas.clientWidth, canvas.clientHeight);
Copy the codeSet background clear color.
context.clearColor(0.8.0.0.0.0.1.0);
Copy the codeClear the background.
context.clear(context.COLOR_BUFFER_BIT);
Copy the codeThe complete code
export default class World {
constructor(el) {
let canvas = document.querySelector(el);
let context = canvas.getContext("webgl");
context.viewport(0.0, canvas.clientWidth, canvas.clientHeight);
context.clearColor(0.8.0.0.0.0.1.0); context.clear(context.COLOR_BUFFER_BIT); }}Copy the code