Sign in to follow this  
Psychho

[EXAMPLE/SOURCE] First Person Controls(with pointer lock) on Randomly Generated Terrain with Metrix.js

Recommended Posts

I just whipped up another quick example for Metrix.js this time it shows you how to build a controllable player on a randomly generated heightmap with first person controls.

 

You can try out the example here http://psych.gs/public_html/playgame.php?gameId=Metrix.js 0.3 - First Person Controls on HeightMap

 

heres what the random terrain in the example looks like(for the lazy) 

Metrix.js%200.3%20-%20First%20Person%20C

 

and heres the source, requires three.js(http://threejs.org/) and Metrix.js(http://psych.gs/public_html/metrix.html)

<!DOCTYPE html><html lang="en"><head>    <script src="three.min.js"></script>    <script src="Metrix0.3.js"></script>    <script>        var mouseLocked = false;                var user,fpsControls;        var terrainMap,terrainMesh;                Metrix.WorldOptions.Gravity = 3;                window.onload = function() {            Metrix.Initialize();        };                Metrix.OnLoad = function() {            var txt = new MUI.Element("span",document.body);            txt.SetHTML("click anywhere to start");                    Metrix.camera.position.set(0,10,0);            user = new Metrix.Object(Metrix.camera,{velocity: true, slope: {start: 0.3}, collisions: true, gravity: true, mass: 30, drag: 2, bounds: {aabb: new Metrix.AABB(null,new THREE.Vector3(0.5,2,0.5),0,-1,0)}});//Create Metrix.Object to control velocity, collisions and gravity of the player            user.AddUpdateCallback(userUpdate);            fpsControls = new Metrix.FirstPersonController(Metrix.camera,1,1);//Add a first person controller to control yaw, pitch and look sensitivity                        terrainMap = new Metrix.HeightMap(new THREE.Vector3(0,0,0),1,Utils.GenerateHeightMap(1,20,-10,40,40,true));//Create a new height map thats randomly generated using Metrix.js's Utils.GenerateHeightMap(maxRandomClimb,maxHeight,minHeight,smooth,smoothingAmount)            terrainMesh = terrainMap.GenerateMesh(new THREE.MeshPhongMaterial({color: 0x20af30, specular: 0x202020, shininess: 20, ambient: 0x109f20}));//Generate a THREE.Mesh from the height map                        Metrix.AddHeightMap(terrainMap);//Add the terrain to the metrix world                        var sun = new THREE.SpotLight(0xfafafa,1.5,0,-2);            sun.position.set(40,100,90);                        Metrix.scene.add(terrainMesh);            Metrix.scene.add(new THREE.AmbientLight(0x303030));            Metrix.scene.add(sun);                        window.addEventListener("click",function() {                if (!mouseLocked) {                    Metrix.LockMouse(mouseMove,mouseExit);//If mouse isnt locked and mouse clicked, lock mouse                    Metrix.AddObject(user);//Unpause be adding user back to the metrix world                }                mouseLocked = true;            });                        Metrix.Go();//Start Metrix.js game loop        };                function userUpdate() {            if (Metrix.Key[KEY_W]) {//If W key down, move forward                user.MoveForward(1);            }            if (Metrix.Key[KEY_D]) {//If D key down, move right                user.MoveRight(1);            }            if (Metrix.Key[KEY_S]) {//If S key down, move backward                user.MoveForward(-1);            }            if (Metrix.Key[KEY_A]) {//If A key down, move left                user.MoveRight(-1);            }            if (Metrix.Key[KEY_SPACE] && user.Grounded()) {//If SPACE key down and user is on ground, jump                user.velocity.y = 35;            }        }                function mouseMove(mX,mY) {            fpsControls.Look(-mX,-mY);//Look around, mX = mouse movement x, mY = mouse movement y        }        function mouseExit() {            mouseLocked = false;            Metrix.RemoveObject(user);//Remove user to pause the game once mouse lock is cancelled        }    </script></head><body></body></html>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.