Babylonjs-dynamic-texture

提供：Dev Guides
移動先:案内、検索

BabylonJS-動的テクスチャ

BabylonJSの動的テクスチャはキャンバスを作成し、テクスチャに簡単にテキストを書き込むことができます。 また、キャンバスを操作して、html5キャンバスで使用可能なすべての機能を使用して、動的テクスチャで使用することもできます。

テクスチャにテキストを書き込む方法を示し、作成するメッシュにベジェ曲線を描画する例に取り組みます。

構文

以下は、動的テクスチャを作成するための構文です- 

var myDynamicTexture = new BABYLON.DynamicTexture(name, option, scene);

パラメーター

以下は、動的テクスチャを作成するために必要なパラメータです-

  • name -動的テクスチャの名前
  • option -動的テクスチャの幅と高さがあります
  • scene -作成されたシーン

構文

以下は、テクスチャにテキストを書き込むための構文です- 

myDynamicTexture.drawText(text, x, y, font, color, canvas color, invertY, update);

パラメーター

以下は、テクスチャにテキストを書き込むために必要なパラメータです-

  • text -書き込まれるテキスト。
  • x -左端からの距離。
  • Y -invertYに応じて、上端または下端からの距離。
  • font -font-style、font-size、font_nameの形式のフォント定義。
  • invertY -デフォルトではtrueで、yは上からの距離です。falseの場合、yは下からの距離で、文字が反転します。
  • update -デフォルトではtrueで、動的テクスチャはすぐに更新されます。

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>MDN Games: Babylon.js demo - shapes</title>
      <script src = "https://end3r.github.io/MDN-Games-3D/Babylon.js/js/babylon.js"></script>
      <style>
         html,body,canvas { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; }
      </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);

            var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI/2, Math.PI/3, 25, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;

            var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
            box.position = new BABYLON.Vector3(0, 0, -5);

           //Create dynamic texture
            var textureGround = new BABYLON.DynamicTexture("dynamic texture", {width:512, height:256}, scene);
            var textureContext = textureGround.getContext();

            var materialGround = new BABYLON.StandardMaterial("Mat", scene);
            materialGround.diffuseTexture = textureGround;
            box.material = materialGround;

           //Add text to dynamic texture
            var font = "bold 60px Arial";
            textureGround.drawText("Box", 200, 150, font, "green", "white", true, true);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

出力

動的テクスチャ

動的テクスチャは、次のように動的テクスチャのhtml5キャンバスメソッドとプロパティを操作することもできます-

構文

var ctx = myDynamicTexture.getContext();

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title> Babylon.JS : Demo2</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);

            var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI/2, Math.PI/3, 25, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;

            var ground = BABYLON.MeshBuilder.CreateGround("ground1", {width: 20, height: 10, subdivisions: 25}, scene);

           //Create dynamic texture
            var textureGround = new BABYLON.DynamicTexture("dynamic texture", 512, scene);
            var textureContext = textureGround.getContext();

            var materialGround = new BABYLON.StandardMaterial("Mat", scene);
            materialGround.diffuseTexture = textureGround;
            ground.material = materialGround;

           //Draw on canvas
            textureContext.beginPath();
            textureContext.moveTo(75,40);
            textureContext.bezierCurveTo(75,37,70,25,50,25);
            textureContext.bezierCurveTo(20,25,20,62.5,20,62.5);
            textureContext.bezierCurveTo(20,80,40,102,75,120);
            textureContext.bezierCurveTo(110,102,130,80,130,62.5);
            textureContext.bezierCurveTo(130,62.5,130,25,100,25);
            textureContext.bezierCurveTo(85,25,75,37,75,40);
            textureContext.fillStyle = "red";
            textureContext.fill();
            textureGround.update();

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

出力

動的テクスチャ1

説明

グラウンドメッシュを作成し、ダイナミックテクスチャを追加しました。 

//ground mesh
var ground = BABYLON.MeshBuilder.CreateGround("ground1", {width: 20, height: 10, subdivisions: 25}, scene);

//Create dynamic texture
var textureGround = new BABYLON.DynamicTexture("dynamic texture", 512, scene);

//adding dynamic texture to ground using standard material
var materialGround = new BABYLON.StandardMaterial("Mat", scene);
materialGround.diffuseTexture = textureGround;
ground.material = materialGround;

動的テクスチャでキャンバスを操作するには、最初にキャンバスメソッドを呼び出す必要があります- 

var textureContext = textureGround.getContext()

キャンバスに、次のようにbezierCurveを追加します- 

textureContext.beginPath();
textureContext.moveTo(75,40);

textureContext.bezierCurveTo(75,37,70,25,50,25);
textureContext.bezierCurveTo(20,25,20,62.5,20,62.5);
textureContext.bezierCurveTo(20,80,40,102,75,120);
textureContext.bezierCurveTo(110,102,130,80,130,62.5);
textureContext.bezierCurveTo(130,62.5,130,25,100,25);
textureContext.bezierCurveTo(85,25,75,37,75,40);

textureContext.fillStyle = "red";
textureContext.fill();
textureGround.update();
「https://www.finddevguides.com/index.php?title=Babylonjs-dynamic-texture&oldid=35038」から取得
Powered by MediaWiki