three.js 几何体(二)
上一篇简单的介绍了几何体的构造体参数,这一篇郭先生就更加详细的说一说(十分简单的几何体我就不说了)
1. ShapeGeometry形状几何体
形状几何体方便我们从一个或多个路径形状中创建一个单面多边形几何体,和canvas一样都是二维图形。下面我们只做一颗心形
var shape = new THREE.Shape();
shape.moveTo(0, 1.5);
shape.bezierCurveTo(2, 3.5, 4, 1.5, 2, -0.5);
shape.lineTo(0, -2.5);
shape.lineTo(-2, -0.5);
shape.bezierCurveTo(-4, 1.5, -2, 3.5, 0, 1.5);
var geometry = new THREE.ShapeGeometry(shape);
下面还有THREE.Shape 类的一些绘图函数。
函数名 |
作用 |
---|---|
moveTo(x, y) |
将绘图点移动到指定的 x、y 坐标处 |
lineTo(x, y) |
从当前位置(例如 moveTo 设定的位置)画一条线到指定的 x、y 坐标处 |
quadricCurveTo(cpx, cpy, x, y)(二次曲线) |
此函数为二次曲线。你可以使用两种方法来画曲线:quadricCurveTo 或者 bezierCurveTo。这两种曲线的不同之处在于指定曲线曲率的方法不一样,如下图所示:对于二次曲线,除了指定结束点(x, y)外,还需要额外指定一个点(cpx, cpy)来控制曲线的曲率(不用指定起始点,因为路径的当前位置就是起始点);对于三次曲线,除了指定结束点(x, y)外,还需要额外指定两个点(cpx1, cpy1, cpx2, cpy2)来控制曲线的曲率。 |
bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y)(贝塞尔曲线) |
此函数为三次曲线。相关说明参考上一行的二次曲线。 |
splineThru(vector2Array) |
此函数沿着参数指定的坐标集合绘制一条光滑的样条曲线。其参数为一THREE.Vector2 对象数组。 |
arc(x, y, radius, startAngle, endAngle, clockwise) |
次函数绘制一个圆或者一段弧。x, y 用来指定圆心与当前位置的偏移量。radius 设定圆的大小。而 startAngle 及 endAngle 则用来定义圆弧要画多长。布尔属性 clockwise 决定这段弧是顺时针画还是逆时针画。 |
absArc(x, y, radius, startAngle, endAngle, clockwise) |
参考 arc 函数。只不过其指定的圆心位置是绝对位置,而不是相对当前位置的偏移量。 |
ellipse(x, y, radiusX, radiusY, startAngle, endAngle, clockwise) |
参考 arc 函数。只是椭圆可以分别指定 x 轴半径及 y 轴半径。 |
absEllipse(x, y, radiusX, radiusY, startAngle, endAngle, clockwise) |
参考 ellipse 函数。只不过其指定的圆心位置是绝对位置,而不是相对当前位置的偏移量。 |
2. TextGeometry文本几何体
文本几何体是一个用于将文本生成为单一的几何体的类。 它是由一串给定的文本,以及由加载的Font(字体)和该几何体ExtrudeGeometry父类中的设置所组成的参数来构造的(ShapeGeometry和ExtrudeGeometry的结合),文本几何体使用起来也十分方便,一般都会搭配FontLoader()或者Font()一起使用。代码如下
var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
var geometry = new THREE.TextGeometry( 'three', {
font: font, //THREE.Font的实例
size: 100, //字体大小,默认值为100
height: 50, //挤出文本的厚度。默认值为50
curveSegments: 12, //表示文本的)曲线上点的数量。默认值为12
bevelEnabled: false, //是否开启斜角,默认为false
bevelThickness: 20, //文本上斜角的深度,默认值为20
bevelSize: 8, //斜角与原始文本轮廓之间的延伸距离。默认值为8
bevelSegments: 3 //斜角的分段数。默认值为3
} );
} );
下面是另一种使用方法
var geometry= new THREE.TextGeometry("js", {
font: new THREE.Font(json),
size: 100,
height: 50,
curveSegments: 12,
bevelEnabled: false,
bevelThickness: 20,
bevelSize: 8,
bevelSegments: 3
});
3. PolyhedronGeometry多面几何体
这个几何体其实和Geometry非常相似,通过传递点和面的数组构建几何体,不过他还有两个参数,一个是半径,一个是细分数,简单的说半径越大几何体就越大(大小不仅是通过点坐标控制),细分数越多,每个面会被细分成更多的面,形状就越平滑。不是很难,用的机会不多。
var verticesOfCube = [0,1,0,1,-1,0,0,-1,1,-1,-1,0,0,-1,-1];
var indicesOfFaces = [1,0,2,2,0,3,3,0,4,4,0,1,1,2,3,3,2,4];
var geometry = new THREE.PolyhedronGeometry(verticesOfCube,indicesOfFaces,2,1);
4. TubeGeometry管道几何体
管道几何体顾名思义就是可以非常方便的制作出类似管道的几何体。它的第一个参数是path,即可以是二维的曲线,也可以是三维的曲线,关于曲线的知识我以后会说,
var curve = new THREE.CatmullRomCurve3([ //CatmullRomCurve可以通过一系列点创建一条平滑的曲线。
new THREE.Vector3(-1.5, -1.5, -1.5),
new THREE.Vector3(-1.5, -1.5, 1.5),
new THREE.Vector3(1.5, -1.5, 1.5),
new THREE.Vector3(1.5, -1.5, -1.5),
new THREE.Vector3(1.5, 1.5, -1.5),
new THREE.Vector3(1.5, 1.5, 1.5),
new THREE.Vector3(-1.5, 1.5, 1.5),
new THREE.Vector3(-1.5, 1.5, -1.5),
new THREE.Vector3(-1.5, -1.5, -1.5)
]);
var geometry = new THREE.TubeGeometry(curve, 64, 0.3, 8, false);
这节就先说四种几何体,下节在继续
转载请注明地址:郭先生的博客
- 一次DB time抖动发现的expdp的bug(r6笔记第86天)
- Python中map函数
- 10g,11g中数据库静默安装中的细小差别(r6笔记第85天)
- SDP(8):文本式数据库-MongoDB-Scala基本操作
- SDP(7):Cassandra- Cassandra-Engine:Streaming
- TensorFlow实现神经网络入门篇
- 27.反射,类加载器,设计模式,jdk新特性
- SDP(6):分布式数据库运算环境- Cassandra-Engine
- 配置dg broker的问题分析及修复(r6笔记第84天)
- SDP(5):ScalikeJDBC- JDBC-Engine:Streaming
- SDP(4):ScalikeJDBC- JDBC-Engine:Updating
- SDP(3):ScalikeJDBC- JDBC-Engine:Fetching
- SDP(2):ScalikeJDBC-Connection Pool Configuration
- 使用外部表关联MySQL数据到Oracle(r6笔记第100天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法