BabylonJS - Curve3

BabylonJS Curve3 - 从简单和简单的步骤学习BabylonJS，从基本到高级概念，包括简介，环境设置，概述，基本元素，材料，动画，相机，灯光，参数形状，网格，矢量位置和旋转，贴花，曲线3，动态纹理，视差映射，镜头光晕，创建ScreenShot，反射探测器，标准渲染管道，ShaderMaterial，骨骼和骨架，物理引擎，播放声音和音乐。

BabylonJS内置了api来创建一些复杂的数学曲线.我们之前已经看过使用复杂方程创建的带状线，用于绘制图案并计算给予网格的路径的坐标.我们这里有一个内置的API，以避免进行复杂的计算，就像在Curves API中一样.

解释的曲线如下 :

二次贝塞尔曲线
Cubic Bezier曲线
Hermite spline
Catmull-Rom spline

二次Bezier曲线

在本节中，我们将了解二次贝塞尔曲线.

语法

var bezier = BABYLON.Curve3.CreateQuadraticBezier(origin, control, destination, nb_of_points);

参数

考虑以下与二次贝塞尔曲线相关的参数.

Origin : 曲线的原点.
控制 : 曲线的控制点.
目的地 : 目的地点.
Noofpoints : 数组中的点.

Cubic Bezeir曲线

在本节中，我们将了解Cubic Bezier曲线.

语法

var bezier3 = BABYLON.Curve3.CreateCubicBezier(origin, control1, control2, destination, nb_of_points)

参数

考虑以下与Cubic Bezier曲线相关的参数.

Origin : 原点.
control1 : 矢量形式的第一个控制点.
control2 : 矢量形式的第二个控制点.
目的地 : 矢量形式的目标点.
no_of_points : 数组形式的点数.

HermiteSpline曲线

在本节中，我们将了解Hermite样条曲线.

语法

var hermite = BABYLON.Curve3.CreateHermiteSpline(p1, t1, p2, t2, nbPoints);

参数

考虑以下与Hermite样条曲线相关的参数 :

p1 : 曲线的原点.
t1 : 原点切线向量点.
p2 : 目的地点.
t2 : 目标切线向量.
NbPoints : 最终曲线的点数组.

Catmull-Rom样条曲线

本节内容，我们将了解Catmull-Rom样条曲线.

语法

 var nbPoints = 20;//每个Vector3控制点之间的点数 var points = [vec1，vec2，...，vecN];//曲线必须通过的Vector3数组:控制点 var catmullRom = BABYLON.Curve3.CreateCatmullRomSpline(points，nbPoints);

参数

考虑以下与Catmull-Rom样条曲线相关的参数 :

积分 : 一个Vector3数组，曲线必须通过控制点.
NbPoints : 每个Vector3控制点之间的点数.

 var path = catmullRom.getPoints( );//getPoints()返回连续Vector3的数组.  var l = catmullRom.length();//方法返回曲线长度.

演示

               BabylonJs - Basic Element-Creating Scene                                       var canvas = document.getElementById("renderCanvas");         var engine = new BABYLON.Engine(canvas, true);                  var createScene  = function() {            var scene = new BABYLON.Scene(engine);            scene.clearColor = new BABYLON.Color3( .5, .5, .5);            // camera            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);            camera.setPosition(new BABYLON.Vector3(0, 0, -100));            camera.attachControl(canvas, true);                        // lights            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);            light.intensity = 0.8;            var spot = new BABYLON.SpotLight(            "spot",             new BABYLON.Vector3(25, 15, -10),             new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);            spot.diffuse = new BABYLON.Color3(1, 1, 1);            spot.specular = new BABYLON.Color3(0, 0, 0);            spot.intensity = 0.2;                         // material            var mat = new BABYLON.StandardMaterial("mat1", scene);            mat.alpha = 1.0;            mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);            mat.backFaceCulling = false;                        //mat.wireframe = true;            var makeTextPlane = function(text, color, size) {               var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);               dynamicTexture.hasAlpha = true;               dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);                              var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);                              plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);               plane.material.backFaceCulling = false;               plane.material.specularColor = new BABYLON.Color3(0, 0, 0);               plane.material.diffuseTexture = dynamicTexture;               return plane;            };                        // show axis            var showAxis = function(size) {                var axisX = BABYLON.Mesh.CreateLines("axisX", [                   new BABYLON.Vector3(-size * 0.95, 0.05 * size, 0),                  new BABYLON.Vector3(-size, 0, 0),                   new BABYLON.Vector3(-size * 0.95, -0.05 * size, 0),                  new BABYLON.Vector3(-size, 0, 0),                  new BABYLON.Vector3.Zero(),                   new BABYLON.Vector3(size, 0, 0),                   new BABYLON.Vector3(size * 0.95, 0.05 * size, 0),                   new BABYLON.Vector3(size, 0, 0),                   new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)               ], scene);                              axisX.color = new BABYLON.Color3(1, 0, 0);               var xChar = makeTextPlane("X", "red", size / 10);               xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);                              var xChar1 = makeTextPlane("-X", "red", size / 10);               xChar1.position = new BABYLON.Vector3(-0.9 * size, 0.05 * size, 0);                              var xcor = [];               for (i =- 20; i <= 20; i++) {                  xcor[i] = makeTextPlane(i, "red", size / 10);                  xcor[i].position = new BABYLON.Vector3(i, 0, 0);               }                              var axisY = BABYLON.Mesh.CreateLines("axisY", [                  new BABYLON.Vector3( -0.05 * size, -size * 0.95, 0),                  new BABYLON.Vector3(0, -size, 0),                  new BABYLON.Vector3(0.05 * size, -size * 0.95, 0),                  new BABYLON.Vector3(0, -size, 0),                  new BABYLON.Vector3.Zero(),                  new BABYLON.Vector3(0, size, 0),                   new BABYLON.Vector3( -0.05 * size, size * 0.95, 0),                   new BABYLON.Vector3(0, size, 0),                   new BABYLON.Vector3( 0.05 * size, size * 0.95, 0)               ], scene);                              axisY.color = new BABYLON.Color3(0, 1, 0);               var yChar = makeTextPlane("Y", "green", size / 10);               yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);               var yChar1 = makeTextPlane("-Y", "green", size / 10);               yChar1.position = new BABYLON.Vector3(0, -0.9 * size, 0.05 * size);               var ycor = [];               for (y =- 20; y <= 20; y++) {                  xcor[y] = makeTextPlane(y, "green", size / 10);                  xcor[y].position = new BABYLON.Vector3(0, y, 0);               }               var axisZ = BABYLON.Mesh.CreateLines("axisZ", [                  new BABYLON.Vector3( 0 , -0.05 * size, -size * 0.95),                   new BABYLON.Vector3(0, 0, -size),                  new BABYLON.Vector3( 0 , 0.05 * size, -size * 0.95),                  new BABYLON.Vector3(0, 0, -size),                   new BABYLON.Vector3.Zero(),                   new BABYLON.Vector3(0, 0, size),                   new BABYLON.Vector3( 0 , -0.05 * size, size * 0.95),                  new BABYLON.Vector3(0, 0, size),                   new BABYLON.Vector3( 0, 0.05 * size, size * 0.95)               ], scene);               axisZ.color = new BABYLON.Color3(0, 0, 1);               var zChar = makeTextPlane("Z", "blue", size / 10);               zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);               var zChar1 = makeTextPlane("-Z", "blue", size / 10);               zChar1.position = new BABYLON.Vector3(0, 0.05 * size, -0.9 * size);               var zcor = [];               for (z =- 20; z <= 20; z++) {                  xcor[z] = makeTextPlane(z, "green", size / 10);                  xcor[z].position = new BABYLON.Vector3(0, 0, z);               }            };            var quadraticBezierVectors = BABYLON.Curve3.CreateQuadraticBezier(             BABYLON.Vector3.Zero(),             new BABYLON.Vector3(10, 5, 5),             new BABYLON.Vector3(5, 10, 0), 15);            var quadraticBezierCurve = BABYLON.Mesh.CreateLines("qbezier", quadraticBezierVectors.getPoints(), scene);            quadraticBezierCurve.color = new BABYLON.Color3(1, 1, 0.5);            var cubicBezierVectors = BABYLON.Curve3.CreateCubicBezier(             BABYLON.Vector3.Zero(),             new BABYLON.Vector3(10, 5, 20),             new BABYLON.Vector3(-50, 5, -20),             new BABYLON.Vector3( -10, 20, 10), 60);            var cubicBezierCurve = BABYLON.Mesh.CreateLines("cbezier", cubicBezierVectors.getPoints(), scene);            cubicBezierCurve.color = new BABYLON.Color3(1, 0, 0);            var continued = cubicBezierVectors.continue(cubicBezierVectors).continue(quadraticBezierVectors);            var points = continued.getPoints();            var nbPoints = 60;            var l = continued.length() / 2;            var p1 = points[points.length - 1];            var t1 = (p1.subtract(points[points.length - 2])).scale(l);            var p2 = points[0];            var t2 = (points[1].subtract(p2)).scale(l);            var hermite = BABYLON.Curve3.CreateHermiteSpline(p1, t1, p2, t2, nbPoints);            continued = continued.continue(hermite);            var points = continued.getPoints();            var continuedCurve = BABYLON.Mesh.CreateLines("continued", points, scene);            continuedCurve.position = new BABYLON.Vector3(20, -20, 20);            continuedCurve.color = new BABYLON.Color3(0, 0, 0);            var nbPoints = 20;                     // the number of points between each Vector3 control points            var points = [new BABYLON.Vector3(10, 5, 20),             new BABYLON.Vector3(-20, 5, -20),             new BABYLON.Vector3(-25, 5, -20),             new BABYLON.Vector3( -30, 20, 10),];  // an array of Vector3 the curve must pass through : the control points            var catmullRom = BABYLON.Curve3.CreateCatmullRomSpline(points, nbPoints);            var path = catmullRom.getPoints();            var l = catmullRom.length();            var finalcatmullCurve = BABYLON.Mesh.CreateLines("continued", path, scene);            var mySinus = [];            for (var i = 0; i < 30; i++) {               mySinus.push( new BABYLON.Vector3(i, Math.sin(i / 10), 0) );            }            var mySinusCurve3 = new BABYLON.Curve3(mySinus);            var myFullCurve = mySinusCurve3.continue(cubicBezierVectors).continue(quadraticBezierVectors);            var points1 = myFullCurve.getPoints();            var curve3d = BABYLON.Mesh.CreateLines("continued", points1, scene);            curve3d.color = new BABYLON.Color3(0.9, 1, 0.2);            showAxis(20);            return scene;         };         var scene = createScene();         engine.runRenderLoop(function() {            scene.render();         });

输出

以上代码行将生成以下输出 :

Catmull-Rom Spline Curve