JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<script src="https://stemkoski.github.io/Three.js/js/THREEx.KeyboardState.js"></script>
Random map.<br>
<canvas id='canvas'></canvas>

CSS

html, body {
  margin: 0;
  height: 100%;
}
#canvas {
  width: 100%;
  height: 90%;
  display: block;
}

JavaScript

import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r119/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r119/examples/jsm/controls/OrbitControls.js';

let canvas, scene, camera, controls, renderer, character;

let mapSize = 20;

function randomNumber(n1, n2){
	if(n1 == n2){
        return n1;
    }
    var min = n1;
    var max = n2;
    if(n1 > n2){
        min = n2;
        max = n1;
    }
    return Math.floor(Math.random()*(max-min+1)+min);
}


function initialise(){
    
    canvas = document.querySelector('#canvas');
    renderer = new THREE.WebGLRenderer({canvas});
   // renderer.shadowMap.enabled = true;

    camera = new THREE.PerspectiveCamera();
    camera.position.set(0, 10, 20);

    controls = new OrbitControls(camera, canvas);
    controls.target.set(0, 5, 0);
    controls.update();

    scene = new THREE.Scene();
    // Skybox with cube map.
    let loader = new THREE.CubeTextureLoader();
    let skybox = loader.load([
      'https://threejsfundamentals.org/threejs/resources/images/cubemaps/computer-history-museum/pos-x.jpg',
      'https://threejsfundamentals.org/threejs/resources/images/cubemaps/computer-history-museum/neg-x.jpg',
      'https://threejsfundamentals.org/threejs/resources/images/cubemaps/computer-history-museum/pos-y.jpg',
      'https://threejsfundamentals.org/threejs/resources/images/cubemaps/computer-history-museum/neg-y.jpg',
      'https://threejsfundamentals.org/threejs/resources/images/cubemaps/computer-history-museum/pos-z.jpg',
      'https://threejsfundamentals.org/threejs/resources/images/cubemaps/computer-history-museum/neg-z.jpg',
    ]);
    scene.background = skybox;


    THREE.ImageUtils.crossOrigin = '';
    let woodTex = THREE.ImageUtils.loadTexture('http://i.imgur.com/CEGihbB.gif');
    let grassTex = THREE.ImageUtils.loadTexture('https://physicsworld.com/wp-content/uploads/2013/09/clouds-3.jpg');
    
    let material...