上几篇说了three.js的曲线,这篇来郭先生来说说three.js曲线,在线案例点击郭先生的博客查看。

1. 了解three.js曲线

之前已经说了一些three.js的几何体,这篇说一说three.js曲线。曲线的种类主要分两种,二维曲线和三维曲线。下面整理了这些曲线

名称 参数
ArcCurve(弧线) aX – 圆的中心的X坐标,默认值为0。aY – 圆的中心的Y坐标,默认值为0。aRadius – 圆的半径,默认值为1。aStartAngle – 以弧度来表示,从正X轴算起曲线开始的角度,默认值为0。aEndAngle – 以弧度来表示,从正X轴算起曲线终止的角度,默认值为2 x Math.PI。aClockwise – 圆是否按照顺时针方向来绘制,默认值为false。aRotation – 以弧度表示,圆从X轴正方向逆时针的旋转角度(可选),默认值为0。
EllipseCurve(椭圆曲线) aX – 椭圆的中心的X坐标,默认值为0。aY – 椭圆的中心的Y坐标,默认值为0。xRadius – X轴向上椭圆的半径,默认值为1。yRadius – Y轴向上椭圆的半径,默认值为1。aStartAngle – 以弧度来表示,从正X轴算起曲线开始的角度,默认值为0。aEndAngle – 以弧度来表示,从正X轴算起曲线终止的角度,默认值为2 x Math.PI。aClockwise – 椭圆是否按照顺时针方向来绘制,默认值为false。aRotation – 以弧度表示,椭圆从X轴正方向逆时针的旋转角度(可选),默认值为0。
LineCurve(二维线段曲线) 参数为起点v1:Vector2,和终点v2:Vector2
LineCurve3(三维线段曲线) 参数为起点v1:Vector3,和终点v2:Vector3
QuadraticBezierCurve(二维二次贝塞尔曲线) 参数为起点v1:Vector2,中间控制点a1:Vector2,终点v2:Vector2
QuadraticBezierCurve3(三维二次贝塞尔曲线) 参数为起点v1:Vector3,中间控制点a1:Vector3,终点v2:Vector3
CubicBezierCurve(二维三次贝塞尔曲线) 参数为起点v1:Vector2,中间控制点a1:Vector2,中间控制点a2:Vector2,终点v2:Vector2
CubicBezierCurve3(三维三次贝塞尔曲线) 参数为起点v1:Vector3,中间控制点a1:Vector3,中间控制点a2:Vector3,终点v2:Vector3
SplineCurve(样条曲线) points – 定义曲线的Vector2点的数组。
CatmullRomCurve3(三维样条曲线) points – Vector3点数组closed – 该曲线是否闭合,默认值为false。curveType – 曲线的类型,默认值为centripetal。tension – 曲线的张力,默认为0.5。

基本曲线主要是这些,ArcCurve和EllipseCurve是绘制圆和椭圆的,EllipseCurve是ArcCurve的基类,LineCurve和LineCurve3分别是二维和三维的曲线(数学曲线的定义包括直线),他们都是有起始点和终止点组成。QuadraticBezierCurve、QuadraticBezierCurve3、CubicBezierCurve和CubicBezierCurve3分别是二维和三维的二阶和三阶贝塞尔曲线,不知道贝塞尔曲线的人请移步至贝塞尔曲线
SplineCurve和CatmullRomCurve3分别是二维和三维的样条曲线,它们使用Catmull-Rom算法,从一系列的点创建一条平滑的样条曲线。

2. 曲线的使用

这里我选取几个代表性的曲线

//椭圆曲线
var geometry = new THREE.Geometry();
var curve = new THREE.EllipseCurve(0,0,10,20);
var points = curve.getPoints(100);
geometry.setFromPoints(points);
var material = new THREE.LineBasicMaterial({color: 0xff0000});
var line = new THREE.Line(geometry, material);
scene.add(line);
//三维线段
var geometry = new THREE.Geometry();
var curve = new THREE.LineCurve3(new THREE.Vector3(10, 20, 10), new THREE.Vector3(-10, -20, -10));
var points = curve.getPoints(100);
geometry.setFromPoints(points);
var material = new THREE.LineBasicMaterial({color: 0xff0000});
var line = new THREE.Line(geometry, material);
scene.add(line);
//三维三阶贝塞尔曲线
var geometry = new THREE.Geometry();
var curve = new THREE.CubicBezierCurve3(new THREE.Vector3(-10, -20, -10), new THREE.Vector3(-10, 40, -10), new THREE.Vector3(10, 40, 10), new THREE.Vector3(10, -20, 10));
var points = curve.getPoints(100);
geometry.setFromPoints(points);
var material = new THREE.LineBasicMaterial({color: 0xff0000});
var line = new THREE.Line(geometry, material);
scene.add(line);
//三维样条曲线
var geometry = new THREE.Geometry();
var curve = new THREE.CatmullRomCurve3([new THREE.Vector3( -10, -20, -10 ),new THREE.Vector3( -5, 20, -5 ),new THREE.Vector3( 0, -20, 0 ),new THREE.Vector3( 5, 20, 5 ),new THREE.Vector3( 10, -20, 10 )]);
var points = curve.getPoints(100);
geometry.setFromPoints(points);
var material = new THREE.LineBasicMaterial({color: 0xff0000});
var line = new THREE.Line(geometry, material);
scene.add(line);

如下图

转载请注明地址:郭先生的博客

three.js 曲线的更多相关文章

  1. 贝塞尔曲线算法,js贝塞尔曲线路径点

    //anchorpoints:贝塞尔基点 //pointsAmount:生成的点数 //return 路径点的Array function CreateBezierPoints(anchorpoint ...

  2. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  3. [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)

    绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...

  4. JS模拟CSS3动画-贝塞尔曲线

    一.什么是贝塞尔曲线 1962年,法国工程师皮埃尔·贝塞尔(Pierre Bézier),贝塞尔曲线来为为解决汽车的主体的设计问题而发明了贝塞尔曲线.如今,贝赛尔曲线是计算机图形学中相当重要的一种曲线 ...

  5. THREE.js代码备份——canvas - lines - colors(希尔伯特曲线3D、用HSL设置线颜色)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - l ...

  6. js+画曲线和圆 并限制圆的渲染范围

    通过三个点的坐标可确定一条双曲线. 公式: 1)y=ax^2+bx+c; 2) y=a(x-k)+h; 通过已知三点可确定a,b,c,h,k 2.通过圆心坐标(a,b)和半径r可确定一个圆,和已知的x ...

  7. js 斐波那契数列的获取和曲线的实现(每日一更)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  8. 深度掌握SVG路径path的贝塞尔曲线指令

    一.数字.公式.函数.变量,哦,NO! 又又一次说起贝塞尔曲线(英语:Bézier curve,维基百科详尽中文释义戳这里),我最近在尝试实现复杂的矢量图形动画,发现对贝塞尔曲线的理解馒头那么厚,是完 ...

  9. D3.js学习(一)

    从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...

随机推荐

  1. spark源码分析以及优化

    第一章.spark源码分析之RDD四种依赖关系 一.RDD四种依赖关系 RDD四种依赖关系,分别是 ShuffleDependency.PrunDependency.RangeDependency和O ...

  2. 在Unix系统中执行可执行文件

    这篇文章是我在一个叫做Charlotte数据挖掘的公众号上看到的文章,文首提到转载自"朱小厮的博客",当我今天执行一个自己编译的可执行文件后的运行阶段想到了这篇文章,直接一次成功. ...

  3. AsyncOperation和SceneManager.LoadSceneAsync协同加载场景

    这篇属于杂记,用于记录不甚理解的AsyncOperation AsyncOperation: //加载进度条 public Silder silder; 加载场景 public void LoginG ...

  4. Selenium自动化测试与练习

    Selenium WebDriver 提供了web自动化各种语言(java python ruby等等) 调用接口库 提供 各种浏览器的驱动(web driver) 来驱动浏览器的 特点 测试程度可以 ...

  5. Vmaware克隆虚拟机后无法上网

    问题: 使用快照克隆了一台虚拟机 打开后发现无法上网,ifconfig查看状态 解决办法: 1.点击右下角的网络设置,点击设置,查看mac地址与文件/etc/udev/rules.d/70-persi ...

  6. 解决 React Native Android:app:validateSigningRelease FAILED 错误

    RN 运行的时候报这个错这咋办:

  7. MongoDB快速入门教程 (3.3)

    3.4.聚合 3.4.1.什么是聚合? MongoDB中聚合(aggregate)主要用于处理数据(诸如统计平均值,求和等),并返回计算后的数据结果.有点类似sql语句中的 count(*) 例如上图 ...

  8. Java中栈和堆讲解

    之前对JVM中堆内存和栈内存都是一直半解,今天有空就好好整理一下,用作学习笔记. 包括Java程序在内,任何程序在运行时都是要开辟内存空间的.JVM运行时在内存中开辟一片内存区域,启动时在自己的内存区 ...

  9. 大厂程序员因厌恶编程,辞去月薪2w+的工作去当司机?

    世界好小啊,刚在一个 UP 主的群里看到一个视频,标题叫做:"失业了工作没找到,却稀里糊涂上了知乎热搜,2000 多万人围观,我--" 说实话,看到视频的封面,我的下巴当时就掉到了 ...

  10. Linux服务器定时脚本

    crontab -e 进入编辑模式,同vi编辑器操作. 用户所建立的crontab文件中,每一行都代表一项任务,每行的每个字段代表一项设置,它的格式共分为六个字段,前五段是时间设定段,第六段是要执行的 ...