🍊 image3D
使用webGL绘制三维图片。
鉴于当前浏览器支持情况，本项目只支持webGL 1上下文，更高级版本未来会考虑支持！
问题或交流
使用的时候遇到任何问题或有好的建议，请点击进入issue！
如何使用？
假设我们现在需要绘制一个下面这样的图形（图形在不停的旋转）：
首先，需要安装依赖的包：
npm install --save image3d three-geometry
然后，在页面中准备好着色器片段：
<!-- 顶点着色器 -->
<script type='x-shader/x-vertex' id='vs'>
attribute vec4 a_position;
uniform mat4 u_matrix;
void main(){
gl_Position=u_matrix * a_position;
}
</script><!-- 片段着色器 -->
<script type='x-shader/x-fragment' id='fs'>
precision mediump float;
uniform vec4 u_color;
void main(){
gl_FragColor=u_color;
}
</script>当然，还有画布：
<canvas width=500 height=500>非常抱歉，您的浏览器不支持canvas!</canvas>准备好了以后，使用着色器和画布进行初始化，得到三维绘图对象：
import image3D from 'image3d';
var image3d = new image3D(document.getElementsByTagName('canvas')[0], {
"vertex-shader": document.getElementById("vs").innerText,
"fragment-shader": document.getElementById("fs").innerText,
"depth": true
});然后，获得画笔和相机等：
var painter = image3d.Painter();
var buffer = image3d.Buffer();
var camera = image3d.Camera();可以看到，最终的效果是一个球和一个圆柱，三维几何体的计算，这里依赖three-geometry提供，因此，我们接下来对其进行初始化：
import ThreeGeometry from 'three-geometry';
var threeGeometry = ThreeGeometry({
precision: 0.1
});因为最终的效果是图形在不停的旋转，因此，我们需要不停的通过相机进行旋转，就好像这样：
setInterval(function () {
// 修改相机
// 绘制
}, 20);修改相机很简单：
// 传递照相机
image3d.setUniformMatrix("u_matrix", camera.rotateBody(0.02, -1, 1, 0, 1, -1, 0).value());绘制的话，也很简单，我们以绘制一个球为例子说明（圆柱体类似）。
首先，设置球的颜色：
image3d.setUniformFloat("u_color", 0.1, 0.3, 0.1, 1.0);然后，借助前面几何体的对象计算球的数据：
threeGeometry.sphere(function (data) {
// data中包含了绘制球需要的坐标数据
}, 0, 0.1, 0, 0.5)拿到球的坐标数据以后，使用image3d上的方法绘制即可：
buffer.write(new Float32Array(data.points)).use('a_position', 3, 3, 0);
painter.drawStripTriangle(0, data.length);最终的效果，我们提供了一个在线访问地址，你可以点击此处访问。
怎么样，是不是很简单？完整的代码请点击此处进行查看。
更多细节你可以访问在线接口文档进行查阅。
开源协议
Copyright (c) 2019-2022 hai2007 走一步，再走一步。
![dependabot[bot]](https://avatars.githubusercontent.com/u/49699333?size=120)
