JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using babylon.js - Test page</title>
<script src="hand.minified-1.1.1.js"></script>
<script src="babylon.js"></script>
<script src="waterMaterial.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script>
if (BABYLON.Engine.isSupported()) {
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(100, 100, 230), scene);
//var camera = new BABYLON.ArcRotateCamera("Camera", 40, 40, 150, BABYLON.Vector3.Zero(), scene);
var sun = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(60, 100, 10), scene);
//camera.setPosition(new BABYLON.Vector3(7, 7, 100));
// Skybox
var skybox = BABYLON.Mesh.CreateBox("skyBox", 1000.0, scene);
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("skybox/skybox", 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;
// Ground
var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "carolles.png", 1000, 1000, 100, 0, 30, scene, false);
...