Pointer Lock and First Person Mechanics

Developer
Charlie Walter
Size
3,178 Kb
Views
8,096
  1. Pointer Lock and First Person Mechanics Previews
  2. Pointer Lock and First Person Mechanics HTML Codes
  3. Pointer Lock and First Person Mechanics CSS Codes
  4. Pointer Lock and First Person Mechanics JS Codes

How do I make an pointer lock and first person mechanics?

Playing around with pointer lock and first person mechanics, having two rotation objects etc.. What is a pointer lock and first person mechanics? How do you make a pointer lock and first person mechanics? This script and codes were developed by Charlie Walter on 11 January 2023, Wednesday.

Pointer Lock and First Person Mechanics Previews
IQ Test

Pointer Lock and First Person Mechanics - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pointer Lock and First Person Mechanics</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>WASD keys to move</h1> <script src='https://www.html5canvastutorials.com/libraries/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pointer Lock and First Person Mechanics - Script Codes CSS Codes

body { background: #222; overflow: hidden; margin: 0;
}
h1 { position: absolute; font-family: open sans, helvetica, arial; font-size: 12px; font-weight: lighter; text-indent: 1em;
}
canvas { background: white;
}

Pointer Lock and First Person Mechanics - Script Codes JS Codes

//https://www.html5rocks.com/en/tutorials/pointerlock/intro/#toc-references
var scene_width = window.innerWidth, scene_height = window.innerHeight, player = { body : new THREE.Object3D() }, key = { left : false, up : false, right : false, down : false, space : false }, drawCube = function(x,y,z,w,h,d){ var cube = new THREE.Mesh(new THREE.CubeGeometry(w, h, d), new THREE.MeshNormalMaterial()); cube.overdraw = true; cube.position.set(x,y,z); scene.add(cube); }, animate = function(){ if(key.left) player.body.translateX(-0.15); if(key.up) player.body.translateZ(-0.15); if(key.right) player.body.translateX(0.15); if(key.down) player.body.translateZ(0.15); // render renderer.render(scene, camera); // request new frame requestAnimationFrame(function(){ animate(); }); };
// renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(scene_width, scene_height);
document.body.appendChild(renderer.domElement);
/* Pointer lock */
var canvas = document.getElementsByTagName("canvas")[0], mouse_sensitivity = 200, changeCallback = function(e){ if (document.pointerLockElement === canvas || document.mozPointerLockElement === canvas || document.webkitPointerLockElement === canvas) { // Pointer was just locked // Enable the mousemove listener document.addEventListener("mousemove", moveCallback, false); } else { // Pointer was just unlocked // Disable the mousemove listener document.removeEventListener("mousemove", moveCallback, false); } }, moveCallback = function(e){ var movementX = e.movementX || e.mozMovementX || e.webkitMovementX || 0, movementY = e.movementY || e.mozMovementY || e.webkitMovementY || 0; player.body.rotation.y -= movementX/mouse_sensitivity; camera.rotation.x -= movementY/mouse_sensitivity; };
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock;
canvas.onclick=function(){ // Ask the browser to lock the pointer) canvas.requestPointerLock();
};
// Hook pointer lock state change events
document.addEventListener('pointerlockchange', changeCallback, false);
document.addEventListener('mozpointerlockchange', changeCallback, false);
document.addEventListener('webkitpointerlockchange', changeCallback, false);
// Ask the browser to release the pointer
document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock || document.webkitExitPointerLock;
document.exitPointerLock();
// camera
var camera = new THREE.PerspectiveCamera(45, scene_width / scene_height, 1, 1000);
//camera.position.z = 10;
// scene
var scene = new THREE.Scene();
// cube
drawCube(0,0,0,1,1,1);
drawCube(5,0,0,1,1,1);
drawCube(5,0,5,1,1,1);
drawCube(-5,0,5,1,1,1);
drawCube(-5,5,5,1,1,1);
drawCube(0,3,5,1,1,1);
drawCube(-4,3,-5,1,1,1);
drawCube(2.5,3,-5,1,1,1);
drawCube(5,2,-20,1,1,1);
player.body.position.z = 5;
player.body.add(camera);
scene.add(player.body);
// start animation
animate();
document.body.onkeydown=function(e){ switch(e.keyCode){ case 65 : key.left = true; break; case 87 : key.up = true; break; case 68 : key.right = true; break; case 83 : key.down = true; break; case 32 : key.space = true; break; }
}
document.body.onkeyup=function(e){ switch(e.keyCode){ case 65 : key.left = false; break; case 87 : key.up = false; break; case 68 : key.right = false; break; case 83 : key.down = false; break; case 32 : key.space = false; break; }
}
Pointer Lock and First Person Mechanics - Script Codes
Pointer Lock and First Person Mechanics - Script Codes
Home Page Home
Developer Charlie Walter
Username cjonasw
Uploaded January 11, 2023
Rating 3
Size 3,178 Kb
Views 8,096
Do you need developer help for Pointer Lock and First Person Mechanics?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Charlie Walter (cjonasw) Script Codes
Name
3D PONG
Animating Scrolling
CSS3 Carousel
Three.js half circle health bar
Facebook tabs with AngularJS
Projection - Tank Three.js
Ninja Flash CC Animation Canvas
Collision with walls
Login form
Gamepad API - DOM Element Demo
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!