zoukankan      html  css  js  c++  java
  • three.js 曲线

    上几篇说了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);

    如下图

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

  • 相关阅读:
    【开卷故意】JAVA正則表達式模版
    CSS控制显示超出部分,用省略号显示
    1星《微信软文营销实战技巧》:标题党,作者没有实战经验
    3星|《强势谈判》:有趣的绑匪谈判故事
    3星|《赢者的诅咒》:新晋诺奖得主92年作品,博弈论在拍卖、薪酬、股市、彩票、赛马、汇市等领域的应用,偏专业
    4星|《OKR实践指南》:老司机经验谈
    3星|《华为管理变革》:华为有史以来为了变革而开展的项目的概述。
    3星|《信号》:全球经济的坏消息
    2星|《麦肯锡图表工作法》:用图表做商业分析的入门演示
    2星|《麦肯锡与贝恩的团队管理智慧》:从投入、产出两个维度把下属分到4个象限
  • 原文地址:https://www.cnblogs.com/vadim-web/p/13297192.html
Copyright © 2011-2022 走看看