首先，需要安装依赖的包：
```
npm install --save image3d three-geometry
```
然后，在页面中准备好着色器片段：
```html
```
```html
```
当然，还有画布：
```html
```
准备好了以后，使用着色器和画布进行初始化，得到三维绘图对象：
```js
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
});
```
然后，获得画笔和相机等：
```js
var painter = image3d.Painter();
var buffer = image3d.Buffer();
var camera = image3d.Camera();
```
可以看到，最终的效果是一个球和一个圆柱，三维几何体的计算，这里依赖[three-geometry](https://github.com/clunch-contrib/Three-Geometry)提供，因此，我们接下来对其进行初始化：
```js
import ThreeGeometry from 'three-geometry';
var threeGeometry = ThreeGeometry({
precision: 0.1
});
```
因为最终的效果是图形在不停的旋转，因此，我们需要不停的通过相机进行旋转，就好像这样：
```js
setInterval(function () {
// 修改相机
// 绘制
}, 20);
```
修改相机很简单：
```js
// 传递照相机
image3d.setUniformMatrix("u_matrix", camera.rotateBody(0.02, -1, 1, 0, 1, -1, 0).value());
```
绘制的话，也很简单，我们以绘制一个球为例子说明（圆柱体类似）。
首先，设置球的颜色：
```js
image3d.setUniformFloat("u_color", 0.1, 0.3, 0.1, 1.0);
```
然后，借助前面几何体的对象计算球的数据：
```js
threeGeometry.sphere(function (data) {
// data中包含了绘制球需要的坐标数据
}, 0, 0.1, 0, 0.5)
```
拿到球的坐标数据以后，使用```image3d```上的方法绘制即可：
```js
buffer.write(new Float32Array(data.points)).use('a_position', 3, 3, 0);
painter.drawStripTriangle(0, data.length);
```
最终的效果，我们提供了一个在线访问地址，你可以[点击此处](https://agile-contrib.github.io/image3d-learn/src/4.sphere&cylinder.html)访问。
怎么样，是不是很简单？完整的代码请[点击此处](https://github.com/agile-contrib/image3d-learn/blob/master/src/4.sphere&cylinder.html)进行查看。
更多细节你可以访问[在线接口文档](https://hai2007.gitee.io/image3D/)进行查阅。
开源协议
---------------------------------------
[MIT](https://github.com/hai2007/image3D/blob/master/LICENSE)
Copyright (c) 2019-2022 [hai2007](https://hai2007.gitee.io/sweethome/) 走一步，再走一步。