上几篇说了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. 当小程序的flex布局遇到button时,justify-content不起作用的原因及解决方案

    当小程序的flex布局遇到button时 发现justify-content不起作用,无论怎么设置都是space-around的效果. 经过排查,发现原因是小程序button中的默认样式中的margi ...

  2. 通用!Python保存一个对象的方式

    参考资料: https://kite.com/python/answers/how-to-save-a-dictionary-to-a-file-in-python 通过如下的代码,可以将Python ...

  3. IntelliJ IDEA中项目import与open的区别

    场景: 从原来公司离职来到新的公司,接手公司项目,先将项目从git或svn项目版本管理上clone下来,如果项目原先是用Eclipse开发的,而你更习惯于使用IntelliJ IDEA,下面是针对使用 ...

  4. Java 内存溢出(java.lang.OutOfMemoryError)的常见情况和处理方式

    导致OutOfMemoryError异常的常见原因有以下几种: 内存中加载的数据量过于庞大,如一次从数据库取出过多数据: 集合类中有对对象的引用,使用完后未清空,使得JVM不能回收: 代码中存在死循环 ...

  5. ASP.NET WebAPI框架解析第一篇

    ASP.NET WebAPI有两种寄宿模式,一种是WebHost,一种是SelfHost,为什么可以有两种模式的原因在于WebAPI有一个相对独立的消息处理管道,只要给这个消息管道传递一个封装好的对象 ...

  6. <react> 组件的详细介绍:

    <react> 组件的详细介绍: 思维导图: 代码介绍: TodoList:(组件) import React, { Component } from 'react' import Sty ...

  7. Elasticsearch系列---生产集群的索引管理

    概要 索引是我们使用Elasticsearch里最频繁的部分日常的操作都与索引有关,本篇从运维人员的视角,来玩一玩Elasticsearch的索引操作. 基本操作 在运维童鞋的视角里,索引的日常操作除 ...

  8. 大文件上传、断点续传、秒传、beego、vue

    大文件上传 0.项目源码地址 源码地址 :https://github.com/zhuchangwu/large-file-upload 它是个demo,仅供参考 前端基于 vue-simple-up ...

  9. xutils工具上传日志文件--后台服务器的搭建

    在上一篇文章中使用xutils将手机上保存的日志上传到后台服务器中,现在我们来讲后台服务器是如何搭建的 后台服务器采用jsp+sevlet+mysql的框架 首先讲mysql数据库的表的建立 在fil ...

  10. vue element安装

    element-ui插件 安装 >: cnpm i element-ui -S main.js配置 import ElementUI from 'element-ui'; import 'ele ...