JSFiddle - React, Tailwind, and code Playground

by mudin

HTML

<canvas id="render-canvas">

</canvas>

<script type="text/javascript" src="https://preview.babylonjs.com/babylon.js"></script>

CSS

canvas {
  width: 100%;
  height: 100%
}

JavaScript

(function () {
    // your page initialization code here
    // the DOM will be available here
    const canvas = document.getElementById("render-canvas");
    const engine = new BABYLON.Engine(canvas);
    const scene = new BABYLON.Scene(engine);
    
/* 
    var environment = scene.createDefaultEnvironment({ enableGroundShadow: true, groundYBias: 1 });
    environment.setMainColor(BABYLON.Color3.FromHexString("#74b9ff"))
     */
     // Enable VR
    var vrHelper = scene.createDefaultVRExperience();


    
    var box = new BABYLON.Mesh.CreateBox("box", 2, scene);
    box.rotation.x = -0.2;
    box.rotation.y = -0.4;
    box.material = new BABYLON.StandardMaterial("material", scene);
    box.material.emmisiveColor = new BABYLON.Color3(0, 0.58, 0.86);

    function renderLoop() {
        box.rotation.x += 0.01;
        box.rotation.y += 0.01;
        scene.render();
    }
    engine.runRenderLoop(renderLoop);
    
    let camera;
    if (navigator.getVRDisplays) {
        camera = new BABYLON.WebVRFreeCamera("WebVRCamera",
            new BABYLON.Vector3(-10, 2, -10), scene);
    } else {
        camera = new BABYLON.VRDeviceOrientationFreeCamera("WebVRFallbackCamera",
            new BABYLON.Vector3(-10, 2, -10), scene);
    }
    scene.activeCamera = camera;
    
    var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);
    var light = new BABYLON.PointLight("light", new BABYLON.Vector3(10, 10, 0), scene);

    
     vrHelper.onAfterEnteringVRObservable.add(()=>{
        if(scene.activeCamera === vrHelper.vrDeviceOrientationCamera){
            BABYLON.FreeCameraDeviceOrientationInput.WaitForOrientationChangeAsync(1000).then(()=>{
                // Successfully received sensor input
            }).catch(()=>{
               // alert("Device orientation camera is being used but no sensor is found, prompt user to enable in safari settings");
               if (typeof DeviceMotionEvent.requestPermission === 'function')...