Jump to content

Keyboard movement with blender model


Recommended Posts

Hey guys, 

i'm brand new to javascript and babylon.js, but i'm loving it. My question is about keyboard movement with models I have imported from blender. I have imported three models into my project from blender. What i want to do is to be able to pick any of the three models independently by clicking on them using the mouse.  Once a model is chosen, I want to be able to move that model using the keyboard arrows. My first thought was to use a switch statement, and put the keyboard movement code into each case.  However, for some reason I don't think my code makes it to the switch. Also, I don't really know how to handle keyboard input. Any help would be greatly appreciated. 


Here is my code:

/// < <reference path="babylon.2.1.d.ts" />

var BjsApp = BjsApp || {};

//intialize babylon function name
BjsApp.init = function() {
    //get the canvas
    var canvas = document.getElementById('renderCanvas');
    //create a BabylonJS engine object
    var engine = new BABYLON.Engine(canvas,true);
    engine.fullscreen = true;
    //create a scene
    var scene = new BABYLON.Scene(engine);
    //create a camera
    var camera =  new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(3, 8, -10), scene);
    camera.rotation = new BABYLON.Vector3(0, Math.PI, 0);
    //let the user move the camera
     //Create ground which is carpet
     var ground = BABYLON.Mesh.CreateGround("Ground", 300, 300, 2, scene); 
     var groundPlane = new BABYLON.StandardMaterial("GroundPlane", scene);
     groundPlane.diffuseTexture = new BABYLON.Texture("assets/Ground1.jpg", scene);
     groundPlane.diffuseTexture.uScale = 3.0; //Repeat 3 times on the Vertical Axes
     groundPlane.diffuseTexture.vScale = 3.0; //Repeat 3 times on the Horizontal Axes
     groundPlane.backFaceCulling = false; //Always show the front and the back of an element

     ground.material = groundPlane;
     //var whiteWall = BABYLON.Mesh.CreateBox("whiteWall", 600, scene );
     //var whiteWallMaterial = new BABYLON.StandardMaterial("whiteWall", scene);
     //whiteWallMaterial.backFaceCulling = false;
     //whiteWallMaterial.disableLighting = true;
     //whiteWall.material = whiteWallMaterial;  
     //whiteWall.infiniteDistance = true;
     //whiteWall.diffuseColor = new BABYLON.Color3(0, 0, 0);
     //whiteWall.specularColor = new BABYLON.Color3(0, 0, 0);
     //whiteWallMaterial.reflectionTexture = new BABYLON.CubeTexture("Skybox/skybox", scene);
     //whiteWallMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;   
     var smallDrawer;
     var mediumDrawer
     var largeDrawer;
     BABYLON.SceneLoader.ImportMesh("", "assets/", "fourniture1.babylon", scene, function (newMeshes) {

                        smallDrawer = newMeshes[0];
                        newMeshes[0].position = new BABYLON.Vector3(3,2,0);
                 BABYLON.SceneLoader.ImportMesh("", "assets/", "fourniture1.babylon", scene, function (Meshes) {

                        mediumDrawer = Meshes[0];
                        Meshes[0].position = new BABYLON.Vector3(-6,4,0);
                        Meshes[0].scaling =  new BABYLON.Vector3(2, 2, 2);

                   BABYLON.SceneLoader.ImportMesh("", "assets/", "fourniture1.babylon", scene, function (Mesh) {

                        largeDrawer = Mesh[0];
                        Mesh[0].position = new BABYLON.Vector3(-18,6,0);
                        Mesh[0].scaling =  new BABYLON.Vector3(3, 3, 3);
                var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);
                   engine.runRenderLoop(function() {
        window.addEventListener("click", function () {
           //We try to pick an object
            var pickResult = scene.pick(scene.pointerX, scene.pointerY);
                pickedObject = pickResult.pickedMesh.name;
                switch (pickedObject) 
                    case "smallDrawer":
                        smallDrawer.position.x += 5;
                        case "mediumDrawer":
                        mediumDrawer.position.x += 5;
                        case "largeDrawer":
                        largeDrawer.position.x += 5;




Link to comment
Share on other sites

Welcome to the forum, where you will get a great response from participants much more knowledgeable than me. Like most people debugging code the experts and the rest of us like to have a live example in front of them. If you could host your models somewhere and then place your code within the Playground then you are much more likely to get a good response.

In the meantime, if it helps, here is a playground http://www.babylonjs-playground.com/#1PWKRP#10 that uses the scene.actionManager to respond to key presses. No importation is used but it may give you some idea for assigning keys to move a mesh. You need to look at lines 464 onwards

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