help - htm5js

Some Mathematical Symbols Supported by HTML

Some Greek Letters Supported by HTML

Some Other Entities Supported by HTML

hello code and json or ldap

   <style type="text/css">
        .plantas3d{
            position:fixed;
            z-index: -1;
            top:0%;
            left:0%;
            width: 100%;
            height: 100%;
        /*background-color: #111;*/
    }
    #renderCanvas {
        width: 100%;
        height: 100%;
        touch-action: none;
            position:fixed;
    }
    </style>

    <script>
//<div class="plantas3d">
//    <canvas id="renderCanvas" touch-action="none"></canvas>
//</div>
        const canvas = document.getElementById("renderCanvas"); // Get the canvas element
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        // Add your code here matching the playground format
        const createScene = function () {
        const scene = new BABYLON.Scene(engine); 
//          BABYLON.SceneLoader.ImportMeshAsync("", "https://assets.babylonjs.com/meshes/", "box.babylon");
        // Light
        const light = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(-2, 0, 0), scene);
            // Camera
        const camera = new BABYLON.ArcRotateCamera("Camera", -1.57, 1.0, 200, new BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas);
            //Creation of a sphere (name of the sphere, segments, diameter, scene)
            var sphere = BABYLON.Mesh.CreateSphere("sphere", 100.0, 100.0, scene);
            sphere.position = new BABYLON.Vector3(0, 0, 0);
            sphere.rotation.x = Math.PI;
            //Add material to sphere
            var groundMaterial = new BABYLON.StandardMaterial("mat", scene);
        groundMaterial.diffuseTexture = new BABYLON.Texture("/templates/smart/gl/on/earthmap1k.jpg", scene);
        groundMaterial.specularTexture = new BABYLON.Texture("/templates/smart/gl/on/earthspec1k.jpg", scene);
        groundMaterial.bumpTexture = new BABYLON.Texture("/templates/smart/gl/on/earthbump1k.jpg", scene);
        groundMaterial.invertNormalMapX = true;
        groundMaterial.invertNormalMapY = true;
        sphere.material = groundMaterial;

            //Creation of atmosphere (name of the sphere, segments, diameter, scene)
            var patmosphere = BABYLON.Mesh.CreateSphere("patmosphere", 105.0, 105.0, scene);
            patmosphere.position = new BABYLON.Vector3(0, 0, 0);
            patmosphere.rotation.x = Math.PI;
            var patmosphereS = new BABYLON.StandardMaterial("patmosphereS", scene);
        patmosphereS.diffuseColor = new BABYLON.Color3(0.4, 0.5, 0.3);
        //patmosphereS.bumpTexture = new BABYLON.Texture("/templates/smart/gl/on/lyod.jpg", scene);
        patmosphereS.opacityTexture = new BABYLON.Texture("/templates/smart/gl/on/clouda.png", scene);
        //patmosphere.diffuseTexture.hasAlpha = true;
        patmosphereS.alpha = 0.7;


            //Creation of atmosphere (name of the sphere, segments, diameter, scene)
            var atmosphere = BABYLON.Mesh.CreateSphere("atmosphere", 110.0, 110.0, scene);
            atmosphere.position = new BABYLON.Vector3(0, 0, 0);
            atmosphere.rotation.x = Math.PI;
       
            var atmosphereS = new BABYLON.StandardMaterial("atmosphereS", scene);
        atmosphereS.diffuseColor = new BABYLON.Color3(0.3, 0.3, 0.3);
        //atmosphereS.bumpTexture = new BABYLON.Texture("/templates/smart/gl/on/lyod.jpg", scene);
        atmosphereS.opacityTexture = new BABYLON.Texture("/templates/smart/gl/on/clouda.png", scene);
        //atmosphereS.diffuseTexture.hasAlpha = true;
        atmosphereS.invertNormalMapX = true;
        atmosphereS.invertNormalMapY = true;
        atmosphereS.alpha = 0.9;

//myMaterial.diffuseTexture.hasAlpha = true;
//materialSphere1.wireframe = true;

//        atmosphereS.diffuseTexture = new BABYLON.Texture("/templates/smart/gl/on/lyod.jpg", scene);
//atmosphereS.specularColor = new BABYLON.Color3(0.5, 0.6, 0.87);
//atmosphereS.emissiveColor = new BABYLON.Color3(1, 1, 1);
//atmosphereS.ambientColor = new BABYLON.Color3(0.23, 0.98, 0.53);
        //atmosphereS.invertNormalMapX = true;
        //atmosphereS.invertNormalMapY = true;
        atmosphere.material = atmosphereS;






        var skybox = BABYLON.Mesh.CreateBox("skyBox", 400.0, scene);
        var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
        skyboxMaterial.backFaceCulling = false;
        skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("/templates/smart/gl/on/starbox2", scene);
        skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
        skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
        skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
        skybox.material = skyboxMaterial;


            // Animations - rotate earth
            var alpha = 0;
            scene.beforeRender = function () {
                sphere.rotation.y = alpha;
                atmosphere.rotation.y = alpha;
                alpha -= 0.0015;
            };
            return scene;
        };
        const scene = createScene(); //Call the createScene function
        // Register a render loop to repeatedly render the scene
        engine.runRenderLoop(function () {
                scene.render();
        });
        // Watch for browser/canvas resize events
        window.addEventListener("resize", function () {
                engine.resize();
        });
    </script>

source code help

Demo with just material:

<!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);
            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);
            camera.attachControl(canvas, true);
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;   
            var materialforbox = new BABYLON.StandardMaterial("texture1", scene);
            var box = BABYLON.Mesh.CreateBox("box", '3', scene);   
            box.material = materialforbox;
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Demo with transparency:

<!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);
            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);
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;	
            var materialforbox = new 
            BABYLON.StandardMaterial("texture1", scene);
            
            var box = BABYLON.Mesh.CreateBox("box", '3', scene);	
            box.material  = materialforbox;
            materialforbox.alpha = 0.3; // value of 0.3 is applied fro transparency
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

More: www.tutorialspoint.com/babylonjs/