Implement onscreen control button for camera

Swatantra · December 20, 2016

Hi Guys.

I am new to HTML5 game development.I want to implement 4 buttons on screen(left, right,up and down), which controls the camera.has someone idea how to implement it??

@Dad72, @davrous, @Deltakosh

Pryme8 · December 20, 2016

https://www.davrous.com/2013/02/22/creating-an-universal-virtual-touch-joystick-working-for-all-touch-models-thanks-to-hand-js/

http://doc.babylonjs.com/tutorials/Cameras

Dad72 · December 21, 2016

You can use HTML and position them with CSS.

Then with the onClick event make your changes on the camera.

Pryme8 · December 21, 2016

I would do on mouse down, and then on mouse up,

and actually do the calculations from a mouse move response... I can show you the order for that it's kinda weird if you have never done it, but it will make it so it handles like a real joystick then.

Swatantra · December 22, 2016

@Dad72 i did that but there is an error given that camera is undefined.How to handle this??

Dad72 · December 22, 2016

Have a demo on the playground to see what happens. It will be easier to help you.

Swatantra · December 23, 2016

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

    <title>Babylon.js - Basics</title>
    <script src="hand.js"></script>
    <script src="babylon.js"></script>
    <script src="work.js"></script>

    <style>
        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        #renderCanvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <input type="BUTTON" value = 65 id= "btn" onCLICK="myFunction()" >
    <canvas id="renderCanvas"></canvas>
</body>
</html>

var canvas;
var engine;
var scene;
var camera;
var mesh;
var light;

document.addEventListener("DOMContentLoaded", startBabylonJS, false);

function startBabylonJS() {
    if (BABYLON.Engine.isSupported()) {
        canvas = document.getElementById("renderCanvas");
        engine = new BABYLON.Engine(canvas, true);

        scene = new BABYLON.Scene(engine);
         // Change the scene background color to green.
         scene.clearColor = new BABYLON.Color3(0, 1, 0);
         // This creates and positions a free camera
         var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(30, 70,500), scene);
         // This targets the camera to scene origin
         camera.setTarget(BABYLON.Vector3.Zero());
         // This attaches the camera to the canvas
         camera.attachControl(canvas, false);

         //Check Collision
         scene.gravity = new BABYLON.Vector3(0, 0, 0);
         camera.applyGravity = scene.activeCamera.applyGravity;
         camera.ellipsoid = new BABYLON.Vector3(1, 1, 1);
         scene.collisionsEnabled = true;
         camera.checkCollisions = true;

         //Create Ground
         var ground= new BABYLON.MeshBuilder.CreateGround("gd",{width: 400, height:300}, scene);
         ground.position= new BABYLON.Vector3(0,0,0);
         
         //Apply Metaria to the Ground
         var material = new BABYLON.StandardMaterial("material", scene);
         ground.material = material;
         material.emissiveTexture = new BABYLON.Texture("11.jpg", scene);
         ground.checkCollisions = true;

         //Front wall left side
         var wall1 = BABYLON.MeshBuilder.CreateBox("wall1", {height: 150, width:30, depth:10}, scene);
         wall1.position = new BABYLON.Vector3(145,75,75);
         wall1.checkCollisions = true;
            
         //Wall Color
         var material1 = new BABYLON.StandardMaterial("material1", scene);
         wall1.material = material1;
         material1.emissiveTexture = new BABYLON.Texture("WallTexture.jpg", scene);
         
         //Front wall Right Side
         var wall2 = BABYLON.MeshBuilder.CreateBox("wall2", {height: 150, width:30, depth:10}, scene);
         wall2.position = new BABYLON.Vector3(-145,75,75);
         wall2.checkCollisions = true;
         wall2.material = material1;

         //Back Wall
         var wall3 = BABYLON.MeshBuilder.CreateBox("wall3", {height: 150, width: 300, depth:10}, scene);
         wall3.position = new BABYLON.Vector3(0,75,-135);
         wall3.checkCollisions = true;
         wall3.material = material1;

         //LEFT SIde wall
         var wall4 = BABYLON.MeshBuilder.CreateBox("wall4", {height: 150,width:200, depth:10} , scene);
         wall4.position = new BABYLON.Vector3(145,75,-30);
         wall4.rotation.y = Math.PI/2;
         wall4.checkCollisions = true;
         wall4.material = material1;

         //right side
         var wall5 = BABYLON.MeshBuilder.CreateBox("wall5", {height: 150,width:200, depth:10}, scene);
         wall5.position = new BABYLON.Vector3(-145,75,-30);
         wall5.rotation.y = Math.PI/2;
         wall5.checkCollisions = true;
         wall5.material = material1;
        
         var roof = BABYLON.MeshBuilder.CreateBox("roof",{height: 240, width:340, depth: 20}, scene);
         roof.position = new BABYLON.Vector3(0,150,-20);
         roof.rotation.x = Math.PI/2;

         //roof color
         var material2 = new BABYLON.StandardMaterial("material2", scene);
         roof.material = material2;
         material2.emissiveTexture = new BABYLON.Texture("roofTexture.jpg", scene);
         roof.checkCollisions = true;
        

        var hotspot = BABYLON.MeshBuilder.CreateBox("hotspot",{height: 40, width:30, depth:30}, scene);
        hotspot.position = new BABYLON.Vector3(0,25,0);

        var hotspotMat = new BABYLON.StandardMaterial("hotspotMat", scene);
        hotspotMat.emissiveColor = new BABYLON.Color3(1, 1, 1);
        hotspot.material = hotspotMat;

        // Once the scene is loaded, just register a render loop to render it
        engine.runRenderLoop(function () {
            scene.render();
			hotspot.rotation.y += 0.025;
        });
    }
}

//This is the that given error

  function myFunction(){
         var x = document.getElementById("btn").value
         alert(x);
         if(x==65)
            camera.keysLeft(65);
      	}

@Dad72 when i initialize the function below the camera variable, it gives error "Function is undefined" and when i initialize the function like above code, then "Camera is undefined".

Pryme8 · December 23, 2016

whoa, just add

(document.getElementByID('btn')).addEventListener('click', function(){

script for what ever...
}, false);

and make the camera non var decalired so its scope goes outside of the function or declair the var camera and reserve its name space prior to the add event dom content.

This is all scope problems. I would take a few basic JavaScript tutorials because this is the kind of stuff you need to understand.

Dad72 · December 23, 2016

You have created a global variable for the camera, but you used "var camera" in your function startBabylonJS().
Your camera is therefore not accessible from your function myFunction()

Remove simply var in the function startBabylonJS():

~~var~~ camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(30, 70,500), scene);

Pryme8 · December 23, 2016

... Am I invisible?

8 hours ago, Pryme8 said:

and make the camera non var decalired so its scope goes outside of the function or declair the var camera and reserve its name space prior to the add event dom content.

This is all scope problems.

or did I just speak Klingon or something?

Sign In

Implement onscreen control button for camera

Recommended Posts

Swatantra

Link to comment

Share on other sites

Pryme8

Link to comment

Share on other sites

Dad72

Link to comment

Share on other sites

Pryme8

Link to comment

Share on other sites

Swatantra

Link to comment

Share on other sites

Dad72

Link to comment

Share on other sites

Swatantra

Link to comment

Share on other sites

Pryme8

Link to comment

Share on other sites

Dad72

Link to comment

Share on other sites

Pryme8

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity