615 WebGL，zrender，d3，Three.js
WebGL
WebGL（Web Graphics Library）是一种 3D 绘图协议，WebGL可以为 HTML5 Canvas 提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。
WebGL 案例分享
WebGL 绘制点
<html>
<body>
<canvas id="canvas" width="200px" height="200px"></canvas>
<script>
window.onload = function () {
//顶点着色器程序
var VSHADER_SOURCE =
"void main() {" +
//设置坐标
"gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +
//设置尺寸
"gl_PointSize = 10.0; " +
"} ";
//片元着色器
var FSHADER_SOURCE =
"void main() {" +
//设置颜色
"gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
"}";
//获取canvas元素
var canvas = document.getElementById('canvas');
//获取绘制二维上下文
var gl = canvas.getContext('webgl');
if (!gl) {
console.log("Failed");
return;
}
//编译着色器
var vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, VSHADER_SOURCE);
gl.compileShader(vertShader);
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, FSHADER_SOURCE);
gl.compileShader(fragShader);
//合并程序
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
//绘制一个点
gl.drawArrays(gl.POINTS, 0, 1);
}
</script>
</body>
</html>
zrender
zrender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。
入门案例：绘制点、矩形、直线和圆形
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/zrender@4.3.0/dist/zrender.js"></script>
</head>
<body>
<div id="container" style="width: 800px;height: 800px;"></div>
<script>
var zr = zrender.init(document.getElementById('container'));
var rect = new zrender.Rect({
shape: {
x: 0,
y: 0,
width: 50,
height: 50
},
style: {
fill: 'red',
lineWidth: 0
}
});
var line = new zrender.Polyline({
shape: {
points:[
[100, 100],
[250, 75],
[300, 100]
]
},
style: {
stroke: 'blue',
lineWidth: 1
}
});
var circle = new zrender.Circle({
shape: {
cx: 200,
cy: 200,
r: 50
},
style: {
fill: 'red',
stroke: 'green',
lineWidth: 2
}
});
var point = new zrender.Polyline({
shape: {
points:[
[300, 300],
[301, 301]
]
},
style: {
stroke: 'red',
lineWidth: 1
}
});
zr.add(rect);
zr.add(line);
zr.add(circle);
zr.add(point);
</script>
</body>
</html>
思考：你能否总结出 zrender 绘图的流程？
-
引入 zrender 库
-
编写 div 容器
-
初始化 zrender 对象
-
初始化 zrender 绘图对象
-
调用 zrender add 方法绘图
想深入学习 zrender 的可以参考官方案例，源码可以在 zrender-docs 中找到
D3
D3（Data-Driven Documents） 是一个 Javascript 图形库，基于 Canvas、Svg 和 HTML。
TIP
D3 是一个较为复杂的图形库，如果想入门 D3 可以从 这里开始
入门案例：数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.js"></script>
</head>
<body>
<p>Vue</p>
<p>React</p>
<p>Agular</p>
<button id="datum">datum</button>
<button id="data">data</button>
<script>
var body = d3.select("body");
var p = body.selectAll("p");
function doDatum() {
// datum
var str = "Framework";
p.datum(str);
p.text(function(d, i) {
return `${d}-${i}`;
});
}
function doData() {
// data
var dataset = ['Vue', 'React', 'Agular'];
p.data(dataset)
.text(function(d, i) {
return `${d}-${i}`;
});
}
document.getElementById('datum').addEventListener('click', function(e) {
doDatum();
});
document.getElementById('data').addEventListener('click', function(e) {
doData();
});
</script>
</body>
</html>
进阶案例：思维导图
这里为大家找了一个非常不错的 D3 入门案例：如何绘制思维导图，案例源码点击这里下载
Three.js
Three.js 是一个基于 WebGL 的 Javascript 3D 图形库
官方案例：旋转正方体
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/three@0.116.1/build/three.js"></script>
</head>
<body>
<script>
var camera, scene, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
scene = new THREE.Scene();
geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render( scene, camera );
}
</script>
</body>
</html>
