BritneyWatch Posted November 25, 2018 Share Posted November 25, 2018 This is the base code, as simple as it could possibly be: <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Babylon.js Bare Minimum Setup</title> <style type="text/css"> <!-- You NEED these styles --> html, body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; background-color: #000000; } #my_canvas { width:100%; height:100%; touch-action:none; } </style> <script src="pep.js"></script> <script src="babylon.js"></script> <script> var canvas_id; var engine; var scene; var camera; var light; var sphere; var ground; function init() { if (BABYLON.Engine.isSupported()) { console.log("Babylon.js is supported !"); setup_Babylon_Scene(); } else { console.log("Babylon.js is not supported :-("); } } function setup_Babylon_Scene() { canvas_id = document.getElementById("my_canvas"); engine = new BABYLON.Engine(canvas_id, true); scene = new BABYLON.Scene(engine); scene.clearColor = new BABYLON.Color3(0,0,0); //Background Color. camera = new BABYLON.FreeCamera("Camera1", new BABYLON.Vector3( 0, 6, -15),scene); camera.setTarget(BABYLON.Vector3.Zero()); camera.attachControl(canvas_id,true); light = new BABYLON.HemisphericLight("HemiLight1",new BABYLON.Vector3(0,1,0), scene); light.groundColor = new BABYLON.Color3(1,0,0); light.intensity = 0.8; sphere = BABYLON.Mesh.CreateSphere("Sphere1",16,2,scene); sphere.showBoundingBox = true; sphere.position.y = 1; var material = new BABYLON.StandardMaterial("standardMaterial1", scene); material.diffuseColor = new BABYLON.Color3(0.3,0.2,1); sphere.material = material; ground = BABYLON.Mesh.CreateGround("Ground1",6,6,2,scene); engine.runRenderLoop(function(){scene.render();}); window.addEventListener("resize", function(){engine.resize();}); } </script> </head> <body onLoad="init()"> <canvas id="my_canvas"></canvas> </body> </html> If you just copy and paste this in, you will see that this canvas defaults to a 16:9 ratio leaving the bottom of the browser white and blank EVENTHOUGH I already set the background-color of my body to black through CSS which is very strange. How do I change the ratio of babylon's default screensize to say may 4:3 aspect ratio ? And how do I actually make the rest of my page black ? Thanks. Quote Link to comment Share on other sites More sharing options...
Sebavan Posted November 25, 2018 Share Posted November 25, 2018 This is all control by CSS and in your html and css, the body and html tags styles limits the size the canvas can take, there is no ratio involved: I see you tried to do it with <!-- You NEED these styles --> But this is HTML comments and not CSS. Try replacing the comment line with : /* You NEED these styles */ Quote Link to comment Share on other sites More sharing options...
BritneyWatch Posted November 26, 2018 Author Share Posted November 26, 2018 Hello @Sebavan, thank you for trying to help You know like when you expand your window or maximize it, BabylonJS have like blank space on the bottom ? Hence BabylonJS do have an inherent screen ratio, how to change it ? Quote Link to comment Share on other sites More sharing options...
Sebavan Posted November 26, 2018 Share Posted November 26, 2018 Nope, As I said, if you have blank space, it comes from your CSS not from Babylon. Did you try removing the wrong comment line in your css ? Quote Link to comment Share on other sites More sharing options...
Dad72 Posted November 26, 2018 Share Posted November 26, 2018 I confirm, everything is with the css: /* Your comment */ html, body { width: 100%; height:100%; margin: 0px; paddin: 0px; } canvas { width: 100%; height:100%; } Quote Link to comment Share on other sites More sharing options...
BritneyWatch Posted November 27, 2018 Author Share Posted November 27, 2018 Thank you to the both of you @Dad72 and @Sebavan ! It is now filling up the whole inner width and height. But then another issue, if I were to resize the window, the 3D sphere gets distorted...how do I make sure everything is not distorted ? I rather everything scale to fit then being distorted. Quote Link to comment Share on other sites More sharing options...
Dad72 Posted November 27, 2018 Share Posted November 27, 2018 This should be done with: window.addEventListener("resize", function(){ engine.resize(); }); Or canvas_id.addEventListener("resize", function(){ engine.resize(); }); Sebavan 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.