<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script> | |
<script src="FirstPersonControls.js"></script> | |
</head> | |
<body> | |
<script> | |
var camera, scene, renderer; | |
var floorGeometry, floorMaterial, floorMesh, floorTexture; | |
var boxGeometry, boxMaterial, boxMesh, boxTexture; | |
var controls; | |
var prevTime = performance.now(); | |
var velocity = new THREE.Vector3(); | |
function init() { | |
// Load a texture | |
boxTexture = new THREE.TextureLoader().load( "checkered.png" ); | |
floorTexture = new THREE.TextureLoader().load( "bw_checkered.png" ); | |
// Wrap the floor texture | |
floorTexture.wrapS = THREE.RepeatWrapping; | |
// Repeat the texture by 16 times in both directions | |
floorTexture.repeat.set( 16, 16 ); | |
// Create a camera | |
// Set a Field of View (FOV) of 75 degrees | |
// Set an Apsect Ratio of the inner width divided by the inner height of the window | |
// Set the 'Near' distance at which the camera will start rendering scene objects to 2 | |
// Set the 'Far' (draw distance) at which objects will not be rendered to 1000 | |
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 ); | |
// Create a scene | |
scene = new THREE.Scene(); | |
// Create a HemisphereLight source | |
var light = new THREE.HemisphereLight( 0xeeeeff, 0x777788, 0.75 ); | |
light.position.set( 0.5, 1, 0.75 ); | |
scene.add( light ); | |
// Create First Person Controls | |
controls = new THREE.FirstPersonControls( camera ); | |
scene.add( controls.getObject() ); | |
// Create a PlaneGeometry for the floor | |
floorGeometry = new THREE.PlaneGeometry( 100, 100, 100, 100 ); | |
// Roate the floor "down" | |
floorGeometry.rotateX( - Math.PI / 2 ); | |
// Create a floor material | |
floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture } ); | |
floorMesh = new THREE.Mesh( floorGeometry, floorMaterial ); | |
scene.add( floorMesh ); | |
// Create a geometry | |
// Create a box (cube) of 10 width, length, and height | |
boxGeometry = new THREE.BoxGeometry( 10, 10, 10 ); | |
// Create a MeshPhongMaterial with a loaded texture | |
boxMaterial = new THREE.MeshPhongMaterial( { map: boxTexture} ); | |
// Combine the geometry and material into a mesh | |
boxMesh = new THREE.Mesh( boxGeometry, boxMaterial ); | |
// Add the mesh to the scene | |
scene.add( boxMesh ); | |
// Create a WebGL Renderer | |
renderer = new THREE.WebGLRenderer(); | |
// Set the size of the renderer to the inner width and inner height of the window | |
renderer.setSize( window.innerWidth, window.innerHeight ); | |
// Add in the created DOM element to the body of the document | |
document.body.appendChild( renderer.domElement ); | |
} | |
function animate() { | |
// Call the requestAnimationFrame function on the animate function | |
requestAnimationFrame( animate ); | |
// Check the FirstPersonControls object and update velocity accordingly | |
playerControls(); | |
// Render everything using the created renderer, scene, and camera | |
renderer.render( scene, camera ); | |
} | |
function playerControls () { | |
// Are the controls enabled? (Does the browser have pointer lock?) | |
if ( controls.controlsEnabled ) { | |
// Save the current time | |
var time = performance.now(); | |
// Create a delta value based on current time | |
var delta = ( time - prevTime ) / 1000; | |
// Set the velocity.x and velocity.z using the calculated time delta | |
velocity.x -= velocity.x * 10.0 * delta; | |
velocity.z -= velocity.z * 10.0 * delta; | |
// As velocity.y is our "gravity," calculate delta | |
velocity.y -= 9.8 * 100.0 * delta; // 100.0 = mass | |
if ( controls.moveForward ) { | |
velocity.z -= 400.0 * delta; | |
} | |
if ( controls.moveBackward ) { | |
velocity.z += 400.0 * delta; | |
} | |
if ( controls.moveLeft ) { | |
velocity.x -= 400.0 * delta; | |
} | |
if ( controls.moveRight ) { | |
velocity.x += 400.0 * delta; | |
} | |
// Update the position using the changed delta | |
controls.getObject().translateX( velocity.x * delta ); | |
controls.getObject().translateY( velocity.y * delta ); | |
controls.getObject().translateZ( velocity.z * delta ); | |
// Prevent the camera/player from falling out of the 'world' | |
if ( controls.getObject().position.y < 10 ) { | |
velocity.y = 0; | |
controls.getObject().position.y = 10; | |
} | |
// Save the time for future delta calculations | |
prevTime = time; | |
} | |
} | |
init(); | |
animate(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment