Search the Community

Am I missing something obvious? I am trying to get the VJC control working in Chrome V45 , BJS 2.2. I have included hand.js, I am not seeing any errors on the console. I first load my scene and then run a routine called start when it is loaded). The .babylon scene has one free camera. If I do not try to use the VJC, it works fine as a single Free Camera. If I do use the VJC (by commenting in self.joystick, I get the display of the scene, but the camera is frozen. I have looked the tutorials for cameras http://doc.babylonjs.com/tutorials/05._Cameras and for VJC: http://doc.babylonjs.com/tutorials/How_to_use_VirtualJoysticksCamera define(['libs/babylon/hand.js', 'libs/babylon/babylon.2.2.max.js', 'libs/jquery/jquery-2.1.4'], function () { var myself = function () { var self = this; var scene = null; var engine = null; var canvas = null; var sphere = null; var car = null; var torus = null; this.load = function () { if (BABYLON.Engine.isSupported()) { self.canvas = $("#renderCanvas").get(0); self.engine = new BABYLON.Engine(self.canvas, true); BABYLON.SceneLoader.Load("../Models/", "town-car.babylon", self.engine, function (newScene) { self.scene = newScene; $(window).resize(self.resize); self.scene.executeWhenReady(self.start); }, function (progress) { // To do: give progress feedback to user }); } } this.start = function () { self.sphere = self.scene.getMeshByName("Sphere"); self.car = self.scene.getMeshByName("Full Car"); self.torus = self.scene.getMeshByName("Torus"); self.setup(); self.scene.activeCamera.attachControl(self.canvas); // I suspect this, but I have tried commenting it out, and it still does not help self.joystick(); self.scene.debugLayer.show(); self.engine.runRenderLoop(function () { self.update(); self.scene.render(); }); } this.resize = function () { self.engine.resize(); } this.update = function () { self.sphere.position.y += 0.1; self.car.position.x += 0.02; self.torus.position.z += 0.05; } this.setup = function () { self.scene.ambientColor = new BABYLON.Color3(0.2, 0.2, 0.2); var skybox = BABYLON.Mesh.CreateBox("skyBox", 8000.0, self.scene); var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", self.scene); skybox.infiniteDistance = true; skybox.renderingGroupId = 0; skyboxMaterial.backFaceCulling = false; skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/skybox", self.scene); skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); skybox.material = skyboxMaterial; } this.joystick = function () { var VJC = new BABYLON.VirtualJoysticksCamera("VJC", self.scene.activeCamera.position, self.scene); VJC.rotation = self.scene.activeCamera.rotation; VJC.checkCollisions = self.scene.activeCamera.checkCollisions; VJC.applyGravity = self.scene.activeCamera.applyGravity; self.scene.activeCamera.detachControl(self.canvas); self.scene.activeCamera = VJC; self.scene.activeCamera.attachControl(self.canvas); } }; return myself;});