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

En929 · June 20, 2017

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>

Wingnut · June 21, 2017

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.

TomaszFurca · June 21, 2017

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.

Sign In

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

Recommended Posts

En929

Link to comment

Share on other sites

Wingnut

Link to comment

Share on other sites

TomaszFurca

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity