内容简介:和其他 GUI 系统一样,web 也提供了一个使用 canvas 来绘制图形的基础环境。利用 canvas 我们可以绘制矩形,三角形,直线,圆弧和曲线等比较复杂的图形。具体可以参考WebGL 本质上也是在 canvas 上作画,只不过它基于是一个 3D 的场景。而在 ThreeJs 中,提供了一个套 Shape 和 Curve 相关的 API 来帮助我们在 3D 场景中绘制出我们想要的图形。
和其他 GUI 系统一样,web 也提供了一个使用 canvas 来绘制图形的基础环境。利用 canvas 我们可以绘制矩形,三角形,直线,圆弧和曲线等比较复杂的图形。具体可以参考
WebGL 本质上也是在 canvas 上作画,只不过它基于是一个 3D 的场景。而在 ThreeJs 中,提供了一个套 Shape 和 Curve 相关的 API 来帮助我们在 3D 场景中绘制出我们想要的图形。
二、图形绘制主要流程
图形绘制一般流程为:构造 Shape、构造 BufferGeometry 、构造 Mesh 并添加到场景中。
1.构造 Shape
在构造 Shape 之前,我们先来了解一下 ThreeJs 中的图形绘制基础。
图形绘制的基础有 3 个比较核心的类:Curve,Path 以及 Shape。如下是用于进行图形绘制的一个比较全局的类图。
在实际的开发过程中,我们一般使用 Shape 来绘制出我们想要的形状,和 canvas 一样,也可以绘制出矩形、三角形、直线、圆弧等,甚至可以一并绘制出更复杂的图形,如鱼形、剪刀等。
而在上图中,Shape 继承自 Path,Path 又间接继承自 Curve,Path 封装了各种绘制图形的 API 接口,如 :
lineTo: 绘制直线
quadraticCurveTo: 二次贝塞尔曲线
bezierCurveTo: 三次贝塞尔曲线
arc: 弧线
ellipse: 椭圆
......
在 Path 的各绘制 API 中,又是进步构造相应的曲线,如 new 一个 LineCurve,CubicBezierCurve 等,从而完成曲线的构造。
有了这些图形绘制的 API,在 3D 场景中,利用这些 API 不仅可以绘制 2D 的图形,还可以绘制 3D 的图形。上面类图中,***Curve 带后缀 3 的都是进行 3D 的图形绘制,其他自然就都是 2D 的绘制了。
如下,我们利用 Bezier 来构造一个圆。关于如何用 Bezier 来构造圆,就不在这里展开了。
var circleRadius = 40; var circleShape = new THREE.Shape(); circleShape.moveTo( 0, circleRadius ); circleShape.quadraticCurveTo( circleRadius, circleRadius, circleRadius, 0 ); circleShape.quadraticCurveTo( circleRadius, - circleRadius, 0, - circleRadius ); circleShape.quadraticCurveTo( - circleRadius, - circleRadius, - circleRadius, 0 ); circleShape.quadraticCurveTo( - circleRadius, circleRadius, 0, circleRadius ); 复制代码
2. 构造 BufferGeometry
上面通过 Shape 构造出了我们想要的图形,下一步我们需要获取图形的所有点,并从这些点构造 BufferGeometry。
Shape 是间接继承自 Curve ,Curve 定义了 getPoints() 的基础。Shape 的 getPoints() 的具体实现在 CurvePath 中的实现,从而获取构造这个图形所需要的点。
var points = shape.getPoints(); var geometryPoints = new THREE.BufferGeometry().setFromPoints( subPoints ); 复制代码
3. 构造网格
拿到 BufferGeometry 就可以构造出我们要的物体了。这里为了效果上表达明显一点,并且炫酷一点,就用 Line 逐段逐段绘制出了我们前面所构造的圆。
效果图如下:
实现代码如下:
function addLineShape( shape, color, x, y, z, rx, ry, rz, s ) { // lines shape.autoClose = true; var points = shape.getPoints(); console.log( "addLineShape ", points ); let length = points.length; let val = 0; function drawLine( ) { if(val == length) return; let subPoints1 = points[val]; let subPoints2 = points[(val + 1) % length]; let subPoints = []; subPoints.push(subPoints1); subPoints.push(subPoints2); var geometryPoints = new THREE.BufferGeometry().setFromPoints( subPoints ); // solid line var line = new THREE.Line( geometryPoints, new THREE.LineBasicMaterial( { color: color } ) ); line.position.set( x, y, z ); line.rotation.set( rx, ry, rz ); line.scale.set( s, s, s ); scene.add( line ); val++; setTimeout(drawLine,16); } drawLine(); } 复制代码
代码比较简单,感兴趣的可以自行分析一下。
三、总结
文章介绍的内容相对比较简单,主要大致梳理了 ThreeJs 所提供的绘图 API 以及绘图的主要流程。其中也以一个实例讲解了整个绘制的过程,以加深对其的理解。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Developer's Guide to Social Programming
Mark D. Hawker / Addison-Wesley Professional / 2010-8-25 / USD 39.99
In The Developer's Guide to Social Programming, Mark Hawker shows developers how to build applications that integrate with the major social networking sites. Unlike competitive books that focus on a s......一起来看看 《Developer's Guide to Social Programming》 这本书的介绍吧!