使用三维软件进行建模的时候,往往会利用二维线条轮廓生成三维几何体或平面,本节课主要内容就是为大家讲解three.js引擎提供的相关API。
执行构造函数ShapeGeometry()和立方体BoxGeometry()、空几何体Geometry()一样都是返回一个几何体对象,可以作为点线面构造函数的几何体参数,
不同的是ShapeGeometry()的封装程序介于BoxGeometry()和Geometry()之间,构造函数BoxGeometry()创建立方体的顶点数据直接定义长宽高和细分参数,
生成顶点数据的工作交给three.js程序自动完成,Geometry()创建的是一个没有顶点数据的空几何体,需要工程师自定义顶点相关数据,
ShapeGeometry()的参数是构造函数Shape()返回的对象,Shape对象具有一系列直线、圆弧、样条曲线创建方法,比如创建圆弧的方法absarc(),
执行absarc()方法会返回一个圆弧,这里说的圆弧其实是一种借用数学里面的概念对顶点数据进行抽象描述,
absarc()方法创建的圆弧本质上可以理解为一系列沿着圆弧分布的顶点数据,至于显示效果取决于你使用点、线、面三种渲染模式中的哪一种。
圆弧——点模式渲染
/**
* 创建点模型
*/varshape =newTHREE.Shape();shape.absarc(0,0,100,0,0.5*Math.PI);vargeometry =newTHREE.ShapeGeometry(shape);varmaterial=newTHREE.PointsMaterial({
color:0x0000ff,size:10.0//点对象像素尺寸});//材质对象varline=newTHREE.Points(geometry,material);//点模型对象scene.add(line);//点模型添加到场景中
圆弧——线模式渲染
/**
* 创建线模型
*/varshape =newTHREE.Shape();shape.absarc(0,0,100,0,0.5*Math.PI);vargeometry =newTHREE.ShapeGeometry(shape);varmaterial=newTHREE.LineBasicMaterial({color:0x0000ff});//材质对象varline=newTHREE.Line(geometry,material);//线模型对象scene.add(line);//线模型添加到场景中
圆弧——面模式渲染
three.js使用Mesh创建网格模型的时候,非闭合轮廓线自动闭合,也就是几何体首尾两顶点相连。
/**
* 创建网格模型
*/varshape =newTHREE.Shape();shape.absarc(0,0,100,0,0.5*Math.PI);vargeometry =newTHREE.ShapeGeometry(shape);varmaterial=newTHREE.MeshLambertMaterial({
color:0x0000ff,//三角面颜色side:THREE.DoubleSide//两面可见});//材质对象varmesh=newTHREE.Mesh(geometry,material);//网格模型对象scene.add(mesh);//网格模型添加到场景中
shape()对象
Shape方法线条绘制几何体对象moveTolineTo直线arcabsarc圆弧ellipseabsellipse椭圆quadraticCurveTobezierCurveToQuadraticBezierCurve贝赛尔曲线...返回ShapeGeometry对象makeGeometry返回几何体Geometry对象,支持自定义细分createPointsGeometry返回几何体Geometry对象,支持自定义细分createSpacedPointsGeometry
Shape对象创建的轮廓线要想渲染出来,首先要转化为为几何体对象Geometry,Shape对象生成几何体对象除了借助构造函数ShapeGeometry,
也可以使用makeGeometry、createPointsGeometry等方法,shape对象执行makeGeometry方法返回的结果是ShapeGeometry几何体对象,
说明makeGeometry方法和构造函数ShapeGeometry是等价的,ShapeGeometry对象有自己默认的曲线细分精度。
shape对象执行createPointsGeometry方法返回的结果同样是几何体对象,与makeGeometry方法不同之处是createPointsGeometry方法细分程序支持自定义,
细分数越大,相同长度的曲线,顶点数量越多,Shape对象本身并不是顶点数据,可以理解为一种绘图方法,就像数学中的中曲线函数,
Shape对象转化为为几何体对象,本质上就是利用Shape定义的曲线函数生成顶点数据供GPU调用。
使用shape对象的方法把Shape对象生成几何体对象。
/**
* 创建点模型
*/varshape =newTHREE.Shape();shape.absarc(0,0,100,0,0.5*Math.PI);vargeometry = shape.makeGeometry();//等价于ShapeGeometry,默认细分数varmaterial=newTHREE.PointsMaterial({
color:0x0000ff,size:10.0//点对象像素尺寸});//材质对象varline=newTHREE.Points(geometry,material);//模型对象scene.add(line);//点模型添加到场景中
ShapeGeometry构造函数
vargeometry =newTHREE.ShapeGeometry(shape);//默认细分数
makeGeometry()方法
vargeometry = shape.makeGeometry();//等价于ShapeGeometry,默认细分数
createPointsGeometry()方法
vargeometry = shape.createPointsGeometry(20);//细分数20
createSpacedPointsGeometry()方法
vargeometry = shape.createSpacedPointsGeometry(15);//细分数15