Webpack配置
目前，Webpack的配置相对简单，核心配置仅一个babel-loader，如下列代码，以后如有修改会及时更新博客。
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
}
]
]
}
}
]
}
}
HTML模板内容
<!DOCTYPE html>
<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>
初始化WebGL环境
Api讲解
获取Canvas元素。
let canvas = document.querySelector(el);
获取WebGL绘图上下文。
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);
完整代码
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);
}
}
