BabylonJS-リボン

リボンはパスの配列を入力として受け取り、それらのパスに沿って線を引きます。複雑なロジックを使用して座標を取得します。以下の例では、ベジェ曲線式を使用してリボンを描画しています。ベジェ曲線は、主に3Dゲームで滑らかな曲線をモデル化するために使用されます。曲線には制御点が必要で、曲線は制御点に沿って描かれます。

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         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(0.8, 0.8, 0.8);

            var camera = new BABYLON.ArcRotateCamera("Camera", 3 *Math.PI/2, Math.PI/2, 50, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);

           //lights
            var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
            light.groundColor = new BABYLON.Color3(0.2, 0.2, 0.5);
            light.intensity = 0.6;


            var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(-20, 0, -20), scene);
            light2.diffuse = BABYLON.Color3.White();
            light2.specular = BABYLON.Color3.Green();
            light2.intensity = 0.6;

           //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;

           //cubic Bézier function
           //cubicBezier(vector3Origin, vector3Control1, vector3Control2, vector3Destination, segmentNumber)
            var cubicBezier = function(v0, v1, v2, v3, nb) {
               var bez = [];
               var step = 1/nb;
               var equation = function(t, val0, val1, val2, val3) {
                  var res = (1 -t)*(1-t)*(1-t) *val0 + 3* t * (1-t)*(1-t) *val1 + 3* t*t *(1-t) * val2 + t*t*t *val3;
                  return res;
               };

               for(var i = 0; i <= 1; i += step) {
                  bez.push( new BABYLON.Vector3(equation(i, v0.x, v1.x, v2.x, v3.x), equation(i, v0.y, v1.y, v2.y, v3.y), equation(i, v0.z, v1.z, v2.z, v3.z)) );
               }
               bez.push(v3);
               return bez;
            };

            var populatePath = function(p) {
               var pi2 = Math.PI* 2;
               var i = p/25 ;
               var path = cubicBezier( new BABYLON.Vector3(3 *Math.cos(pi2* i),-10, 3 *Math.sin(pi2* i)),
               new BABYLON.Vector3(12 *Math.cos(pi2* i), p/5 ,10 *Math.sin(pi2* i)),
               new BABYLON.Vector3(15 *Math.cos(pi2* i), p/2 ,8 *Math.sin(pi2* i)),
               new BABYLON.Vector3(3 *Math.cos(pi2* i), 10, 3 *Math.sin(pi2* i)), 50);
               return path;
            };

           //path visualizer helper
            var showPath = function(path, scene) {
               var line = BABYLON.Mesh.CreateLines("line", path, scene )
            };

            var paths = [];
            for (var p = 0; p < 20; p++) {
               paths[p] = populatePath(p);
               showPath(paths[p], scene);
            }

            var ribbon = new BABYLON.Mesh.CreateRibbon("ribbon", paths, false, false, null, scene);
            ribbon.material = mat;

            scene.registerBeforeRender(function() {
               light2.position = camera.position;
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

出力

上記のコード行は、次の出力を生成します-

リボン

構文

var ribbon = new BABYLON.Mesh.CreateRibbon("ribbon", paths, false, false, null, scene);

リボンは、x、y、z方向のパスの配列を使用します。上記で使用されたBezeir曲線式は、ここで計算されます-

var cubicBezier = function(v0, v1, v2, v3, nb) {
   var bez = [];
   var step = 1/nb;
   var equation = function(t, val0, val1, val2, val3) {
      var res = (1 -t)*(1-t)*(1-t) *val0 + 3* t * (1-t)*(1-t) *val1 + 3* t*t *(1-t) * val2 + t*t*t * val3;
      return res;
   };

   for(var i = 0; i <= 1; i += step) {
      bez.push( new BABYLON.Vector3(equation(i, v0.x, v1.x, v2.x, v3.x), equation(i, v0.y, v1.y, v2.y, v3.y), equation(i, v0.z, v1.z, v2.z, v3.z)) );
   }

   bez.push(v3);
   return bez;
};

ベジェ曲線方程式

var res = (1 -t)*(1-t)*(1-t) *val0 + 3* t * (1-t)*(1-t) *val1 + 3* t*t *(1-t) * val2 + t*t*t * val3;

Babylonjs-parametric-shapes-ribbon

目次

BabylonJS-リボン

Demo

出力

構文

ベジェ曲線方程式