JSFiddle - React, Tailwind, and code Playground
by Ivan Enzhaev
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/3.3.0/babylon.js"></script>
<canvas id="renderCanvas"></canvas>
CSS
html, body {
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#renderCanvas {
touch-action: none;
width: 100%;
height: 100%;
}
JavaScript
console.log("hello");
var Scene = (function ()
{
var _canvas = null;
var _engine = null;
var _scene = null;
var _Create = function (canvasID)
{
_canvas = document.getElementById(canvasID);
_engine = new BABYLON.Engine(_canvas, true);
document.addEventListener('contextmenu', function (event) { event.preventDefault(); }, false);
BABYLON.SceneLoader.Load("", "https://dl.dropboxusercontent.com/s/wjvobkacnyvxgp3/CristmasTreeScene.babylon", _engine,
function (newScene)
{
newScene.executeWhenReady(function ()
{
_scene = newScene;
var light = new BABYLON.DirectionalLight("DirectionalLight", new BABYLON.Vector3(-1, -1, -1), _scene);
var light2 = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(0, 1, 0), _scene);
light2.diffuse = new BABYLON.Color3(0.2, 0.2, 0.2);
light2.specular = new BABYLON.Color3(0, 0, 0);
var camera = new BABYLON.ArcRotateCamera("Camera", 30 * Math.PI / 180, 70 * Math.PI / 180, 15, new BABYLON.Vector3(0, 2, 0), _scene);
camera.minZ = 0.1;
camera.wheelPrecision = 100;
_scene.activeCamera = camera;
camera.attachControl(_canvas, true);
//_scene.activeCamera.attachControl(_canvas);
var planeMesh = _scene.meshes[1];
var planeMaterial = new BABYLON.StandardMaterial("planeMat", _scene);
planeMaterial.diffuseTexture = new BABYLON.Texture("https://dl.dropboxusercontent.com/s/wwpenimo7hcee7g/TexturesCom_SnowPlain_3x3_512_albedo.png");
planeMaterial.invertNormalMapX = true;
planeMaterial.invertNormalMapY = true;
var planeNormalTexture = new...