three实现第一人称射击游戏效果
代码语言:html
所属分类:游戏
代码描述:three实现第一人称射击游戏效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #instructions { width: 100%; height: 100%; user-select: none; text-shadow: 1px 1px 1px #9E9E9E; position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); 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; font-family: Arial; font-size: 14px; line-height: 24px; cursor: pointer; } </style> </head> <body translate="no"> <body style="margin: 0;"> <div id="instructions"> <div> <h1>点击开始</h1> 射击:单击鼠标左键<br /> 移动: 键盘W-A-S-D 或者 箭头<br /> 跑: SHIFT键<br /> 跳跃: 空格键<br /> 看: 移动鼠标 退出:esc键 </div> </div> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.r118.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script> <script> THREE.FirstPersonControls = function ( camera, MouseMoveSensitivity = 0.002, speed = 800.0, jumpHeight = 350.0, height = 30.0) { var scope = this; scope.MouseMoveSensitivity = MouseMoveSensitivity; scope.speed = speed; scope.height = height; scope.jumpHeight = scope.height + jumpHeight; var moveForward = false; var moveBackward = false; var moveLeft = false; var moveRight = false; var canJump = false; var run = false; var velocity = new THREE.Vector3(); var direction = new THREE.Vector3(); var prevTime = performance.now(); camera.rotation.set( 0, 0, 0 ); var pitchObject = new THREE.Object3D(); pitchObject.add( camera ); var yawObject = new THREE.Object3D(); yawObject.position.y = 10; yawObject.add( pitchObject ); var PI_2 = Math.PI / 2; var onMouseMove = function ( event ) { if ( scope.enabled === false ) return; var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0; var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0; yawObject.rotation.y -= movementX * MouseMoveSensitivity; pitchObject.rotation.x -= movementY * MouseMoveSensitivity; pitchObject.rotation.x = Math.max( - PI_2, Math.min( PI_2, pitchObject.rotation.x ) ); }; var onKeyDown = (function ( event ) { if ( scope.enabled === false ) return; switch ( event.keyCode ) { case 38: // up case 87: // w moveForward = true; break; case 37: // left case 65: // a moveLeft = true; break; case 40: // down case 83: // s moveBackward = true; break; case 39: // right case 68: // d moveRight = true; break; case 32: // space if ( canJump === true ) velocity.y += run === false ? jumpHeight : jumpHeight + 50; canJump = false; break; case 16: // shift run = true; break; } }).bind(this); var onKeyUp = (function ( event ) { if ( scope.enabled === false ) return; switch ( event.keyCode ) { case 38: // up case 87: // w moveForward = false; break; case 37: // left case 65: // a moveLeft = false; break; case 40: // down case 83: // s moveBackward = false; break; case 39: // right case 68: // d moveRight = false; break; case 16: // shift run = false; break; } }).bind(this); scope.dispose = function() { document.removeEventListener( 'mousemove', onMouseMove, false ); document.removeEventListener( 'keydown', onKeyDown, false ); document.removeEventListener( 'keyup', onKeyUp, false ); }; document.addEventListener( 'mousemove', onMouseMove, false ); document.addEventListener( 'keydown', onKeyDown, false ); document.addEventListener( 'keyup', onKeyUp, false ); scope.enabled = false; scope.getObject = function () { return yawObject; }; scope.update = function () { var time = performance.now(); var delta = ( time - prevTime ) / 1000; velocity.y -= 9.8 * 100.0 * delta; velocity.x -= velocity.x * 10.0 * delta; velocity.z -= velocity.z * 10.0 * delta; direction.z = Number( moveForward ) - Number( moveBackward ); direction.x = Number( moveRight ) - Number( moveLeft ); direction.normalize(); var currentSpeed = speed; if (run && (moveForward || moveBackward || moveLeft || moveRight)) currentSpeed = currentSpeed + (currentSpeed * 1.1); if ( moveForward || moveBackward ) velocity.z -= direction.z * currentSpeed * delta; if ( moveLeft || moveRight ) velocity.x -= direction.x * currentSpeed * delta; scope.getObject().translateX( -velocity.x * delta ); scope.getObject().translateZ( velocity.z * delta ); scope.getObject().position.y += ( velocity.y * delta ); if ( scope.getObject().position.y < scope.height ) { velocity.y = 0; scope.getObject().position.y = scope.height; canJump = true; } prevTime = time; }; }; var camera, scene, renderer, controls; var vertex = new THREE.Vector3(); var color = new THREE.Color(); var particles = new Array(); var world = new THREE.Group(); var circle_sprite = new THREE.TextureLoader().load("http://repo.bfw.wiki/bfwrepo/image/5dd653c337706.png"); function randomPosition(radius) { radius = radius * Math.random(); var theta = Math.random() * 2.0*Math.PI; var phi = Math.random() * Math.PI; var sinTheta = Math.sin(theta); var cosTheta = Math.cos(theta); var sinPhi = Math.sin(phi); var cosPhi = Math.cos(phi); var x = radius * sinPhi * cosTheta; var y = radius * sinPhi * sinTheta; var z = radius * cosPhi; return [x, y, z]; } function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; }; var instructions = document.querySelector("#instructions"); var havePointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document; if ( havePointerLock ) { var element = document.body; var pointerlockchange = function ( event ) { if ( document.pointerLockElement === element || document.mozPointerLockElement === element || document.webkitPointerLockElement === element ) { controls.enabled = true; instructions.style.display = 'none'; } else { controls.enabled = false; instructions.style.display = '-webkit-box'; } }; var pointerlockerror = function ( event ) { instructions.style.display = ''; }; document.addEventListener( 'pointerlockchange', pointerlockchange, false ); document.addEventListener( 'mozpointerlockchange', pointerlockchange, false ); document.addEventListener( 'webkitpointerlockchange', pointerlockchange, false ); document.addEventListener( 'pointerlockerror', pointerlockerror, false ); document.addEventListener( 'mozpointerlockerror', pointerlockerror, false ); document.addEventListener( 'webkitpointerlockerror', pointerlockerror, false ); instructions.addEventListener( 'click', function ( event ) { element.requestPointerLock = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock; if ( /Firefox/i.test( navigator.userAgent ) ) { var fullscreenchange = function ( event ) { if ( document.fullscreenElement === element || document.mozFullscreenElement === element || document.mozFullScreenElement === element ) { document.removeEventListener( 'fullscre.........完整代码请登录后点击上方下载按钮下载查看
网友评论0