JSFiddle - React, Tailwind, and code Playground

by Duc Nguyen

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="js/three.js"></script>
    <script src="js/controls/PointerLockControls.js"></script>
    <script src="js/loaders/MTLLoader.js"></script>
    <script src="js/loaders/OBJLoader.js"></script>
    <script src="js/shaders/CopyShader.js"></script>
    <script src="js/shaders/FXAAShader.js"></script>
    <script src="js/postprocessing/OutlinePass.js"></script>
    <script src="js/postprocessing/EffectComposer.js"></script>
    <script src="js/postprocessing/RenderPass.js"></script>
    <script src="js/postprocessing/ShaderPass.js"></script>

    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <title>Bảo tàng số</title>
  </head>

  <body>
    <div id="instruction">
      Nhấn <span id="key">&nbsp;E&nbsp;</span> để <span id="action"></span>
    </div>
    <script src="js/script.js"></script>
  </body>

</html>

CSS

* {
  box-sizing: border-box;
}

canvas {
  width: 100%;
  height: 100%;
  margin: auto;
  border-radius: 3px;
}

#instruction {
  width: 40%;
  padding: 20px;
  font-size: 20px;
  color: white;
  background-color: rgba(0, 0, 0, 0.4);
  text-align: center;
  z-index: 100;
  position: absolute;
  bottom: 180px;
  left: 410px;
}

div,
span {
  border-radius: 5px;
}

#key {
  padding: 10px;
  background-color: aliceblue;
  font-weight: bold;
  color: black;
  width: 50px;
  height: 50px;
}

#action {
  color: yellow;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
var controls = new THREE.PointerLockControls(camera);
var ambientLight = new THREE.AmbientLight(0xffffff, 0.55);
var hemisphereLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 1);
var direcLight = new THREE.DirectionalLight(0xffffff, 0.8);
var spotLight = new THREE.SpotLight(0xccff99, 1.8, 1000, Math.PI / 6, 0.25, 2);

spotLight.position.set(0, 80, 100);
spotLight.rotateX(Math.PI / 6);
direcLight.position.set(-500, 5000, 2000);
direcLight.castShadow = true;
direcLight.shadow.mapSize.set(2048, 2048);

scene.add(ambientLight);
scene.add(direcLight);
scene.add(spotLight);

var raycaster = new THREE.Raycaster();
var moveUp = false;
var moveDown = false;
var moveLeft = false;
var moveRight = false;
var canJump = false;

const GRAVITY = 9.8;
const MASS = 100;
const AXIS_HELPER = new THREE.AxisHelper(1000);
const HEIGHT = 30;
var OUTLINE;
var COMPOSER;
var FXAA;
var MUSEUM;
var instruction = document.getElementById('instruction');
var action = document.getElementById('action');

scene.add(AXIS_HELPER);

var prevTime = performance.now();
var velocity = new THREE.Vector3();
var direction = new THREE.Vector3();
var rayDirect = new THREE.Vector3();

renderer.setSize(window.innerWidth, window.innerHeight, false);
renderer.setClearColor(new THREE.Color(0xf2f2f2), 1);
document.body.appendChild(renderer.domElement);

// LOAD MODEL
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setResourcePath('/models/');
mtlLoader.setPath('/models/');
mtlLoader.load('/3dbaotang.mtl', (materials) => {
  materials.preload();

  var objLoader = new THREE.OBJLoader();
  objLoader.setMaterials(materials);
  objLoader.setPath('/models/');
  objLoader.load('3dbaotang.obj', (object) => {
    MUSEUM = object;
    MUSEUM.castShadow = true;
    MUSEUM.receiveShadow = true;
    MUSEUM.position.y = 70;

   ...