最终效果如右图（可以用鼠标、手指或键盘控制机器人的旋转）：本项目基于image3D。在正式开始之前，我们需要准备好模型数据，可以到这里下载：model.json如果想快速体验一下最终的效果，可以点这里查看。着色器首先，你需要准备两个着色器。顶点着色器片段着色器画布也是画布：如果没有安装绘图对象，需要提前安装依赖包：npminstall--saveimage3d这个绘图对象有很多方法，通过这个对象上的方法，你可以完成各种操作现在：importimage3Dfrom'image3d'//创建一个3D对象并配置画布和着色器letimage3d=newimage3D(document.getElementsByTagName('canvas')[0],{"vertex-shader":document.getElementById("vs").innerText,"fragment-shader":document.getElementById("fs").innerText,depth:true})后面要用到画笔，这里，我们提前获取：让painter=image3d.Painter()//画笔letbuffer=image3d.Buffer()//数据传输object-bufferletcamera=image3d.Camera()//设置cameracameracamera有很多方法，可以点击这里详细说一下，调用这些方法调整相机等后，需要将数据传递给顶点着色器：image3d.setUniformMatrix("u_matrix",camera.value())顶点数据相机准备好后，是数据，也就是model.js中的Vertex数据：不同格式的模型数据格式可能不同。以我们这里的数据为例，顶点的数据都包含在：model.geometries[index].data.attributes.position.array中。因此，我们只需要将model.geometries一一画出来。我们以第一个几何体为例（一个模型数据可能由一个或多个几何体组成）：令position=model.geometries[0].data.attributes。position.arraybuffer.write(newFloat32Array(position)).use('a_position',3,3,0)上面的作用是将数据position写入GPU，赋值给shader中的变量a_position进行绘制。这时GPU中已经记录了很多点。这3个点相连形成一个三角形，三角形拼接在一起形成一个几何体。现在，如何将这些三角形拼接在一起？使用画笔：painter.drawTriangle(0,position.length/3)最后的效果可以点这里查看。结语本例完整代码保存在Github：https://github.com/clunch-con...。
