Sign in to follow this  
BritneyWatch

How to change Babylon.js's default canvas size ?

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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:

image.thumb.png.a68e62c1af04f5d13bed58647e9b8eff.png

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 */

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.