- 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 - 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 −
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
images/rugby.jpg
images/cone.jpg
images/board.jpg
images/ring.jpg
images/d1.png
images/diamond.jpg