BabylonJS - Mesh EdgesRenderer



EdgesRendering is used to draw egdes around the mesh as shown in the output above.

Execute the following line of code to call the following method on the mesh and give color, width of the edge tobe drawn, etc.

var box = BABYLON.Mesh.CreateBox("box1", 2, scene);
box.enableEdgesRendering();	
box.edgesWidth = 4.0;
box.edgesColor = new BABYLON.Color4(0, 0, 1, 1);

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);
            var camera = new BABYLON.ArcRotateCamera("camera1", 0,Math.PI / 3,10.0,new BABYLON.Vector3(0, 0,0), scene);
            camera.setTarget(BABYLON.Vector3.Zero());
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            var box = BABYLON.Mesh.CreateBox("box1", 2, scene);
            
            box.enableEdgesRendering();	
            box.edgesWidth = 4.0;
            box.edgesColor = new BABYLON.Color4(0, 0, 1, 1);	
            box.position.y = 1.2;    
            return scene
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Output

Edges Renderer
babylonjs_mesh.htm
Advertisements