Jump to content

How do I add my own custom controls and get camera to move with animated character


En929
 Share

Recommended Posts

Now that I got my animations together (from Mixamo) and know how to make them, convert them, upload them, etc. how do I attach my own custom controls to them instead of the preset controls. Also, how do I get the camera to follow the player. For example, let's say I'd want my character to just walk forward with the space bar and nothing else and the camera follows the player?

Note: I got my camera set to "FreeCamera" because I wanted to customize my controls instead of using the built in ones. Maybe Freecamera is the wrong camera for doing what I want to do. 

Finally, the part that I needed help with is below the dotted lines. That is, I don't need help with all of the code below. Just the portions between the dotted lines.

Thanks!

 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Babylon.js sample code</title>
        <!-- Babylon.js -->
<script src="hand.minified-1.2.js"></script>
<script src="cannon.js"></script>
<script src="babylon.2.5.js"></script>
        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>
    </head>
<body>
    <div id="canvasZone">
        <canvas id="renderCanvas"></canvas>
    </div>
    <script>
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);

        var createScene = function () {
            var scene = new BABYLON.Scene(engine);
			
 		
			
            var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(0, -0.5, -1.0), scene);
          //  var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 30, 0), scene);
		  
		  
		  
            
			var camera = new BABYLON.FreeCamera("camera1",   new BABYLON.Vector3(0, 5, -200), scene);
          // camera.attachControl(canvas, false);
           // camera.setPosition(new BABYLON.Vector3(20, 70, 120));
            light.position = new BABYLON.Vector3(50, 250, 200);
        	light.shadowOrthoScale = 2.0;
            camera.minZ = 1.0;
        
            scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3);
			

		
			
        
            // Ground
            var ground = BABYLON.Mesh.CreateGround("ground", 1000, 1000, 1, scene, false);
            var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
            groundMaterial.diffuseColor = new BABYLON.Color3(0.2, 0.2, 0.2);
            groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
            ground.material = groundMaterial;
            ground.receiveShadows = true;
			//minus = down and plus = up
			ground.position.y = -70;
			ground.position.z = 250;
            // Shadows
            var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
            shadowGenerator.useBlurVarianceShadowMap = true;






		
//-----------------------------------Here's the part that I needed help with. I wanted to make this animated character walk forward with the spacebar------------------------------------------------------------------------


            BABYLON.SceneLoader.ImportMesh("", "", "Henry5.babylon", scene, function (newMeshes2, particleSystems2, skeletons2) {
                var dude = newMeshes2[0];
        
                for (var index = 1; index < newMeshes2.length; index++) {
                    shadowGenerator.getShadowMap().renderList.push(newMeshes2[index]);
                }
        

		
        
                dude.rotation.x = Math.PI+190;
				dude.rotation.z= Math.PI;
                dude.position = new BABYLON.Vector3(0, -70, 280);
				

	
		

                scene.beginAnimation(skeletons2[0], 0, 100, true, 1.0);
            });
        
            return scene;
        };
        


//----------------------------------After this point, that's all I needed help with for now. Thanks!---------------------------------------------------------------------------























        var scene = createScene();

        engine.runRenderLoop(function () {
            scene.render();
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
		
		window.addEventListener("keydown", handleKeyDown, false);
		window.addEventListener("keyup", handleKeyUp, false);
    </script>
</body>
</html>

 

Link to comment
Share on other sites

Hi en929.  Wow, that's a lot of code paste.  I think you can remove all that... but it's your call.

Naturally, you would turn-on some keypress listeners (such as WASD keys), and experiment with changing the .position and .rotation of your imported models... with each keypress.  Perhaps use SHIFTED w and d for rotation.  Otherwise.... un-shifted W, A, S, D for positioning.  The BABYLON ActionManager is nice, too, and you should read our docs about it.

Keypress listening is mostly a HTML thing, not a BabylonJS thing, so there's a trillion tutorials on the web... about keypresses.

There is also a fancy .moveWithCollisions function... very useful for player-moving.  Use our playground search (search in code) to find others who have used .moveWithCollisions.  You can also search for addEventListener and removeEventListener, and in no-time, you will be an expert in driving-around your models.

It might also be wise to search for 'dude'.  Dude has been the BJS "demonstration player" for a long time, and he has MANY MANY playgrounds.  :)  Another good search... followCamera.  Good luck.  Stay tuned... others may comment soon.

Link to comment
Share on other sites

I use FreeCamera with ortho mode, after check other types of camera like target, the best option for me was:

scene.registerAfterRender(function() {
        scene.activeCamera.position = mesh.position;
    }
});

Yesterday i spent few hours on optimize my game -> babylon.furcatomasz.pl, and i want to change camera position only when player moving -> this is better option.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...