JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://preview.babylonjs.com/babylon.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>Babylon - Getting Started</title>
</head>
<body>
<canvas id="renderCanvas"></canvas>
</body>
</html>
CSS
html, body {
overflow: hidden;
width : 100%;
height : 100%;
margin : 0;
padding : 0;
}
#renderCanvas {
width:500px;
height:500px;
touch-action: none;
}
JavaScript
// get the canvas DOM element
var canvas = document.getElementById('renderCanvas');
// load the 3D engine
var engine = new BABYLON.Engine(canvas, true);
// createScene function that creates and return the scene
var createScene = function(){
// create a basic BJS Scene object
var scene = new BABYLON.Scene(engine);
// This creates and positions a free camera (non-mesh)
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 0, 0), scene);
var cameraPosition =36, meshZOffset = 1000, offsetValue = 100 ;
var planeWidth = engine.getRenderWidth() -offsetValue,
planeHeight = engine.getRenderHeight()- offsetValue;
var plane = BABYLON.MeshBuilder.CreatePlane('plane',{width: planeWidth,height: planeHeight},scene);
plane.position.z = meshZOffset;
var distance = meshZOffset - cameraPosition;
var height= engine.getRenderHeight();
var width= engine.getRenderWidth();
// var diag = Math.sqrt((height*height)+(width*width));
// console.log(diag);
var FOV = 2 * Math.atan( 500 / ( 2 * distance ));
console.log(FOV);
camera.fov = FOV;
camera.position.z = cameraPosition;
return scene;
}
// call the createScene function
var scene = createScene();
// run the render loop
engine.runRenderLoop(function(){
scene.render();
});
// the canvas/window resize event handler
window.addEventListener('resize', function(){
engine.resize();
});