- BabylonJS Tutorial
- BabylonJS - Home
- BabylonJS - Introduction
- BabylonJS - Environment Setup
- BabylonJS - Overview
- BabylonJS - Basic Elements
- BabylonJS - Materials
- BabylonJS - Animations
- BabylonJS - Cameras
- BabylonJS - Lights
- BabylonJS - Parametric Shapes
- BabylonJS - Mesh
- VectorPosition and Rotation
- BabylonJS - Decals
- BabylonJS - Curve3
- BabylonJS - Dynamic Texture
- BabylonJS - Parallax Mapping
- BabylonJS - Lens Flares
- BabylonJS - Create ScreenShot
- BabylonJS - Reflection Probes
- Standard Rendering Pipeline
- BabylonJS - ShaderMaterial
- BabylonJS - Bones and Skeletons
- BabylonJS - Physics Engine
- BabylonJS - Playing Sounds & Music
- BabylonJS Useful Resources
- BabylonJS - Quick Guide
- BabylonJS - Useful Resources
- BabylonJS - Discussion
BabylonJS - Tiled Ground
In this section, we will learn how to create Tiled Ground.
Syntax
Following is the syntax to create Tiled Ground −
var precision = { "w" : 2, "h" : 2 }; var subdivisions = { 'h' : 8, 'w' : 8 }; var tiledGround = BABYLON.Mesh.CreateTiledGround("Tiled Ground", -3, -3, 3, 3, subdivisions, precision, scene, false);
Parameters
Consider the following parameters to create Tiled Ground −
Name − The name of the ground.
Xmin − The map min x coordinate value.
Zmin − The map min z coordinate value.
Xmax − The map max x coordinate value.
Zmax − The map max z coordinate value.
Subdivisions − {w: number, h: number} ) number of subdivisions (tiles) on the height and the width of the map.
Precision − ({w: number, h: number} ) number of subdivisions on the height and the width of each tile.
Scene − The scene to which the tiledground is attached.
Updatable − This is true if the mesh is updatable.
Demo – Tiled Ground
<!doctype html> <html> <head> <meta charset = "utf-8"> <title>MDN Games: Babylon.js demo - shapes</title> <script src = "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); scene.clearColor = new BABYLON.Color3(0,1, 0); var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene); var spot = new BABYLON.PointLight("spot", new BABYLON.Vector3(0, 30, 10), scene); spot.diffuse = new BABYLON.Color3(1, 1, 1); spot.specular = new BABYLON.Color3(0, 0, 0); //<h3>Parameters</h3> var xmin = -3; var zmin = -3; var xmax = 3; var zmax = 3; var precision = { "w" : 2, "h" : 2 }; var subdivisions = { 'h' : 8, 'w' : 8 }; //Create the Tiled Ground var tiledGround = new BABYLON.Mesh.CreateTiledGround("Tiled Ground", xmin, zmin, xmax, zmax, subdivisions, precision, scene); scene.activeCamera.attachControl(canvas); return scene; }; var scene = createScene(); engine.runRenderLoop(function() { scene.render(); }); </script> </body> </html>
Output
babylonjs_basic_elements.htm
Advertisements
To Continue Learning Please Login
Login with Google