BabylonJS - IcoSphere



This is one of the shapes used with the MeshBuilder.

Syntax

var icosphere = BABYLON.MeshBuilder.CreateIcoSphere("ico", {radius: 5, radiusY: 3, subdivisions: 2}, scene);

Parameters

Consider the following parameters to create an IcoSphere −

  • Radius − The radius of the sphere.

  • RadiusY − The radius along the y-axis.

  • Subdivisions − The number of rings.

  • Scene − The scene to which the sphere needs to be attached.

The following Demo example contains the shapes of Ground, Cone, Plane, Disc, Torus, Polyhedron, and IcoSphere.

<!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);
            // Setup environment
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);	

            var gmat = new BABYLON.StandardMaterial("mat1", scene);
            gmat.alpha = 1.0;
            //gmat.diffuseColor = new BABYLON.Color3(1, 0, 0);
            var texture = new BABYLON.Texture("images/mat.jpg", scene);
            gmat.diffuseTexture = texture;		

            var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 150, height:15}, scene);
            ground.material = gmat;

            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(1, 0, 0);
            var texture = new BABYLON.Texture("images/rugby.jpg", scene);
            mat.diffuseTexture = texture;

            var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, diameterX: 3}, scene);
            sphere.position= new BABYLON.Vector3(15,1,0);
            sphere.material = mat;

            var faceColors = new Array();
            faceColors[1] = new BABYLON.Color4(0,1,0,1);   // green front

            var matcone = new BABYLON.StandardMaterial("mat1", scene);
            matcone.alpha = 1.0;
            matcone.diffuseColor = new BABYLON.Color3(0.9, 0, 2);
            
            var texture = new BABYLON.Texture("images/cone.jpg", scene);
            matcone.diffuseTexture = texture;

            var cone = BABYLON.MeshBuilder.CreateCylinder("cone", {diameterTop: 0, tessellation: 4}, scene);
            cone.position= new BABYLON.Vector3(12,1,0);
            cone.material = matcone;	

            var matplane = new BABYLON.StandardMaterial("matplane", scene);
            matplane.alpha = 1.0;
            matplane.diffuseColor = new BABYLON.Color3(0.9, 0, 2);
            
            var texture = new BABYLON.Texture("images/board.jpg", scene);
            matplane.diffuseTexture = texture;
           
            var plane = BABYLON.MeshBuilder.CreatePlane("plane", {width: 5, height : 5}, scene);
            plane.position= new BABYLON.Vector3(9,2.5,0);
            plane.material = matplane;

            var disc = BABYLON.MeshBuilder.CreateDisc("disc", {tessellation: 3}, scene);
            disc.position= new BABYLON.Vector3(5,1,0);

            var mattorus = new BABYLON.StandardMaterial("matoct", scene);
            mattorus.alpha = 1.0;
            
            var texture = new BABYLON.Texture("images/ring.jpg", scene);
            mattorus.diffuseTexture = texture;
            
            var torus = BABYLON.MeshBuilder.CreateTorus("torus", {thickness: 0.5}, scene);		
            torus.position= new BABYLON.Vector3(3,1,0);
            torus.material = mattorus;

            var matoct = new BABYLON.StandardMaterial("matoct", scene);
            matoct.alpha = 1.0;
            
            var texture = new BABYLON.Texture("images/d1.png", scene);
            matoct.diffuseTexture = texture;
            
            var octahedron = BABYLON.MeshBuilder.CreatePolyhedron("oct", {type: 1, size: 3}, scene);
            octahedron.position= new BABYLON.Vector3(-2,5,0);
            octahedron.material = matoct;

            var matico = new BABYLON.StandardMaterial("matico", scene);
            matico.alpha = 1.0;
            //matico.diffuseColor = new BABYLON.Color3(0.9, 0, 2);
            
            var texture = new BABYLON.Texture("images/diamond.jpg", scene);
            matico.diffuseTexture = texture;

            var icosphere = BABYLON.MeshBuilder.CreateIcoSphere("ico", {radius: 5, radiusY: 3, subdivisions: 2}, scene);
            icosphere.position= new BABYLON.Vector3(-13,3,0);

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

Output

The above line of code generates the following output −

IcoSphere

In this demo, we have used these images - mat.jpg, rugby.jpg, cone.jpg, board.jpg, ring.jpg, d1.png, diamond.jpg. The images are stored in the images/ folder locally and are also pasted below for reference. You can download any image of your choice and use in the demo link.

Images used for mesh texture

The images used for mesh texture are shown below −

images/mat.jpg

Mat Image

images/rugby.jpg

Rugby Image

images/cone.jpg

Cone Image

images/board.jpg

Board Image

images/ring.jpg

Ring Image

images/d1.png

D1 Image

images/diamond.jpg

Diamond Image
babylonjs_mesh.htm
Advertisements