threejs-minecraft-31

//In index.html
<script src="js/PointerLockControls.js"></script>
<script src="js/NavigationTool.js"></script>

//In index.css
html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0px;
  background-color: #ffffff;
  overflow: hidden;
  font-family: arial;
}

button#animate {
  z-index: 10;
  position: absolute;
}

button#reset {
  z-index: 10;
  position: absolute;
  left: 70px;
}

#blocker {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

#instructions {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
}

// In index.js
// ... other code snippet


const planeGeometry = new THREE.PlaneGeometry( 300, 300, 50, 50 );
// ... other code snippet
const plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.name = 'floor';
plane.receiveShadow = true;

// … other code snippet

// Add navigation tool
//const navTool = new THREE.OrbitControls(camera);
//navTool.enableDamping = true;
//navTool.dampingFactor = 0.25;
const navTool = new NavigationTool( camera );
navTool.attach( scene );

// Find this block and replace the original one with the following
// Start rendering
function render() {
    requestAnimationFrame( render );

    navTool.update( scene );
    creeper.animate();
    renderer.render( scene, camera );
}