Jump to content

Implement onscreen control button for camera


Recommended Posts

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.

Link to comment
Share on other sites

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

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

        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        #renderCanvas {
            width: 100%;
            height: 100%;
    <input type="BUTTON" value = 65 id= "btn" onCLICK="myFunction()" >
    <canvas id="renderCanvas"></canvas>
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
         // 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 () {
			hotspot.rotation.y += 0.025;

//This is the that given error

  function myFunction(){
         var x = document.getElementById("btn").value

@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".

Link to comment
Share on other sites

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.


Link to comment
Share on other sites

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);


Link to comment
Share on other sites

... 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?

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.

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.


  • Recently Browsing   0 members

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