web實(shí)現(xiàn)類似于打cs第一稱視角
1.導(dǎo)入各種文件
2代碼實(shí)現(xiàn)
Click to play
(W, A, S, D = Move, SPACE = Jump, MOUSE = Look around)
var camera, scene, renderer, controls;
var objects = [];
var raycaster;
var blocker = document.getElementById( 'blocker' );
var instructions = document.getElementById( 'instructions' );
? ? ? ? ? ? THREE.DRACOLoader.setDecoderPath( './' );
? ? ? ? ? ? THREE.DRACOLoader.setDecoderConfig( { type: 'js' } );
? ? ? ? ? ? var dracoLoader = new THREE.DRACOLoader();
// http://www.html5rocks.com/en/tutorials/pointerlock/intro/
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 ) {
controlsEnabled = true;
controls.enabled = true;
blocker.style.display = 'none';
} else {
controls.enabled = false;
blocker.style.display = 'block';
instructions.style.display = '';
}
};
var pointerlockerror = function ( event ) {
instructions.style.display = '';
};
// Hook pointer lock state change events
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 ) {
instructions.style.display = 'none';
// Ask the browser to lock the pointer
element.requestPointerLock = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock;
element.requestPointerLock();
}, false );
} else {
instructions.innerHTML = 'Your browser doesn\'t seem to support Pointer Lock API';
}
init();
animate();
var controlsEnabled = false;
var moveForward = false;
var moveBackward = false;
var moveLeft = false;
var moveRight = false;
var canJump = false;
var prevTime = performance.now();
var velocity = new THREE.Vector3();
var direction = new THREE.Vector3();
function init() {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.z=0;
camera.position.y=0;
camera.lookAt({
x:0,
y:0,
z:0
})
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
// scene.fog = new THREE.Fog( 0xffffff, 0, 750 );
// var light = new THREE.HemisphereLight( 0xeeeeff, 0x777788, 0.75 );
// light.position.set( 0.5, 1, 0.75 );
// scene.add( light );
? ? ? ? ? ? ? ? var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
? ? ? ? ? ? ? ? scene.add( ambientLight );
? ? ? ? ? ? ? ? var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
? ? ? ? ? ? ? ? camera.add( pointLight );
? ? ? ? ? ? ? ? scene.add( camera );
? ? ? ? ? ? ? ? //
? ? ? ? ? ? ? ? // light = new THREE.DirectionalLight(0xffffff,1);
? ? ? ? ? ? ? ? // light.position.set(0,0,10000);
? ? ? ? ? ? ? ? // scene.add(light);
controls = new THREE.PointerLockControls( camera );
scene.add( controls.getObject() );
var onKeyDown = function ( event ) {
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 += 350;
canJump = false;
break;
}
};
var onKeyUp = function ( event ) {
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;
}
};
document.addEventListener( 'keydown', onKeyDown, false );
document.addEventListener( 'keyup', onKeyUp, false );
raycaster = new THREE.Raycaster( new THREE.Vector3(), new THREE.Vector3( 0, - 1, 0 ), 0, 10 );
// floor
// var floorGeometry = new THREE.PlaneGeometry( 2000, 2000, 100, 100 );
? ? ? ? ? ? ? ? // floorGeometry.rotateX( - Math.PI / 2 );
? ? ? ? ? ? ? ? //
? ? ? ? ? ? ? ? // for ( var i = 0, l = floorGeometry.vertices.length; i < l; i ++ ) {
? ? ? ? ? ? ? ? //
? ? ? ? ? ? ? ? // var vertex = floorGeometry.vertices[ i ];
? ? ? ? ? ? ? ? // vertex.x += Math.random() * 20 - 10;
? ? ? ? ? ? ? ? // vertex.y += Math.random() * 2;
? ? ? ? ? ? ? ? // vertex.z += Math.random() * 20 - 10;
? ? ? ? ? ? ? ? //
? ? ? ? ? ? ? ? // }
? ? ? ? ? ? ? ? //
? ? ? ? ? ? ? ? // for ( var i = 0, l = floorGeometry.faces.length; i < l; i ++ ) {
? ? ? ? ? ? ? ? //
? ? ? ? ? ? ? ? // var face = floorGeometry.faces[ i ];
? ? ? ? ? ? ? ? // face.vertexColors[ 0 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
? ? ? ? ? ? ? ? // face.vertexColors[ 1 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
? ? ? ? ? ? ? ? // face.vertexColors[ 2 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
? ? ? ? ? ? ? ? //
? ? ? ? ? ? ? ? // }
? ? ? ? ? ? ? ? //
? ? ? ? ? ? ? ? // var floorMaterial = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
? ? ? ? ? ? ? ? //
? ? ? ? ? ? ? ? // var floor = new THREE.Mesh( floorGeometry, floorMaterial );
? ? ? ? ? ? ? ? // scene.add( floor );
// objects
? ? ? ? ? ? ? ? //
// var boxGeometry = new THREE.BoxGeometry( 20, 20, 20 );
? ? ? ? ? ? ? ? //
// for ( var i = 0, l = boxGeometry.faces.length; i < l; i ++ ) {
? ? ? ? ? ? ? ? //
// var face = boxGeometry.faces[ i ];
// face.vertexColors[ 0 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
// face.vertexColors[ 1 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
// face.vertexColors[ 2 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
? ? ? ? ? ? ? ? //
// }
? ? ? ? ? ? ? ? //
// for ( var i = 0; i < 500; i ++ ) {
? ? ? ? ? ? ? ? //
// var boxMaterial = new THREE.MeshPhongMaterial( { specular: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors } );
// boxMaterial.color.setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
? ? ? ? ? ? ? ? //
// var box = new THREE.Mesh( boxGeometry, boxMaterial );
// box.position.x = Math.floor( Math.random() * 20 - 10 ) * 20;
// box.position.y = Math.floor( Math.random() * 20 ) * 20 + 10;
// box.position.z = Math.floor( Math.random() * 20 - 10 ) * 20;
? ? ? ? ? ? ? ? //
// scene.add( box );
// objects.push( box );
? ? ? ? ? ? ? ? //
// }
//
? ? ? ? ? ? ? ? dracoLoader.load( 'models/out.drc', function ( geometry ) {
? ? ? ? ? ? ? ? ? ? geometry.computeVertexNormals();
? ? ? ? ? ? ? ? ? ? var material = new THREE.MeshLambertMaterial();
? ? ? ? ? ? ? ? ? ? var mesh = new THREE.Mesh( geometry, material );
? ? ? ? ? ? ? ? ? ? mesh.castShadow = true;
? ? ? ? ? ? ? ? ? ? mesh.receiveShadow = true;
? ? ? ? ? ? ? ? ? ? scene.add( mesh );
mesh.position.y=-200;
? ? ? ? ? ? ? ? ? ? // Release the cached decoder module.
? ? ? ? ? ? ? ? ? ? THREE.DRACOLoader.releaseDecoderModule();
? ? ? ? ? ? ? ? } );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
if ( controlsEnabled === true ) {
raycaster.ray.origin.copy( controls.getObject().position );
raycaster.ray.origin.y -= 10;
var intersections = raycaster.intersectObjects( objects );
var onObject = intersections.length > 0;
var time = performance.now();
var delta = ( time - prevTime ) / 1000;
velocity.x -= velocity.x * 8.0 * delta;
velocity.z -= velocity.z * 8.0 * delta;
velocity.y -= 9.8 * 100.0 * delta; // 100.0 = mass
direction.z = Number( moveForward ) - Number( moveBackward );
direction.x = Number( moveLeft ) - Number( moveRight );
direction.normalize(); // this ensures consistent movements in all directions
if ( moveForward || moveBackward ) velocity.z -= direction.z * 1200.0 * delta;
if ( moveLeft || moveRight ) velocity.x -= direction.x * 1200.0 * delta;
if ( onObject === true ) {
velocity.y = Math.max( 0, velocity.y );
canJump = true;
}
controls.getObject().translateX( velocity.x * delta );
controls.getObject().translateY( velocity.y * delta );
controls.getObject().translateZ( velocity.z * delta );
if ( controls.getObject().position.y < 10 ) {
velocity.y = 0;
controls.getObject().position.y = 10;
canJump = true;
}
prevTime = time;
}
renderer.render( scene, camera );
}
具體可以實(shí)現(xiàn)類似于打cs的效果
