JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<title>Babylon lots of cubes</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
#mycanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
</head>
<body>
<div id="container">
<canvas id="mycanvas"></canvas>
</div>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script>
var container, stats;
container = document.getElementById("container");
stats = new Stats();
container.appendChild(stats.dom);
var canvas = document.getElementById('mycanvas');
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene();
scene.clearColor = new BABYLON.Color3(0, 0, 0);
var gridSize = 75;
var camera = new BABYLON.ArcRotateCamera('camera', 0, 0, gridSize * 1.5, new BABYLON.Vector3(0, 0, 0), scene);
camera.fov = 60 / 180 * Math.PI;
camera.minZ = 0.01;
camera.maxZ = 1e10;
camera.setPosition(new BABYLON.Vector3(0, 0, -gridSize * 1.5));
camera.attachControl(canvas, true);
var light1 = new BABYLON.DirectionalLight('light1', new BABYLON.Vector3(1, 2, 3), scene);
light1.intensity = 0.8;
var light2 = new BABYLON.HemisphericLight('light2', new BABYLON.Vector3(0, 1, 0), scene);
light2.diffuse = new BABYLON.Color3(0.25, 0.25, 0.25);
var material = new BABYLON.StandardMaterial('mat', scene);
material.diffuseColor = new BABYLON.Color3(0.9, 0.9, 0.9);
material.specularColor = new BABYLON.Color3(0., 0., 0.);
var boxMesh = BABYLON.MeshBuilder.CreateBox("b", {size: 0.8}, scene);
var sps = new BABYLON.SolidParticleSystem('sps', scene);
...