robinrowe Posted December 19, 2013 Share Posted December 19, 2013 Is there a simple Babylon user interaction example somewhere? If not, will someone show me how to modiify the simple sphere example code "Create a basic scene" tutorial to make the sphere move left or right when the user presses the arrow keys? Thanks, Robin Quote Link to comment Share on other sites More sharing options...
kru64 Posted December 19, 2013 Share Posted December 19, 2013 Here code. Press 1 or 2<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>BABYLON - BASICS</title> <!--Loading babylon engine --> <script src="../babylon.js"></script> <script src="../hand.js"></script> <!-- CSS --> <!-- ------ --> <style> html, body, div, canvas { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; } </style></head><!-- BODY --><!-- ------ --><body> <div id="rootDiv"> <!-- Main Canvas --> <canvas id="renderCanvas"></canvas> </div> </body> <!-- BABYLON SCRIPT --> <!-- -------------- --> <script type="text/javascript"> // Get the Canvas element from our HTML below var canvas = document.getElementById("renderCanvas"); // Load BABYLON 3D engine and set the root directory var engine = new BABYLON.Engine(canvas, true); //Create a new scene with a camera (mandatory), a light (better) and a sphere (to see the origin) var scene = new BABYLON.Scene(engine); // Creating a camera looking to the zero point (0,0,0) var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene); // Creating a omnidirectional light var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene); // Creating a sphere of size 1, at 0,0,0 var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);// here code for move shere//-------------------------------------------------- window.addEventListener("keydown", function (evt) { switch (evt.keyCode) { case 49: origin.position.x = origin.position.x+1; break; case 50: origin.position.x = origin.position.x-1; break; default: break; } });//-------------------------------------------------- // Attach the camera to the scene scene.activeCamera.attachControl(canvas); // Once the scene is loaded, just register a render loop to render it engine.runRenderLoop(function () { scene.render(); }); </script></html> Quote Link to comment Share on other sites More sharing options...
ProfessorF Posted December 20, 2013 Share Posted December 20, 2013 A non-keyboard example. Tap/Click on the ground plane and dude will move to where you tap<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>RAVE Babylon</title> <script src="babylon.js"></script> <script src="hand.js"></script> <script> var canvas, engine, scene, light0, origin, camera, dudemesh, targetx, targetz, rot; function start() { canvas = document.getElementById("cvRAVE"); engine = new BABYLON.Engine(canvas, true); scene = new BABYLON.Scene(engine); camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 50, -200), scene); light0 = new BABYLON.DirectionalLight("omni", new BABYLON.Vector3(1, 1, 0), scene); origin = BABYLON.Mesh.CreateSphere("origin", 10, 2.0, scene); ground = BABYLON.Mesh.CreateGround("ground", 10000, 1000, 1, scene); targetx = 0; targetz = 0; rot = 0; BABYLON.SceneLoader.ImportMesh("him", "Dude/", "dude.babylon", scene, function (newMeshes, particleSystems, skeletons) { dudemesh=newMeshes; newMeshes[0].position = new BABYLON.Vector3(0, 0, 0); // The original dude scene.beginAnimation(skeletons[0], 0, 120, 1.0, true); }); scene.activeCamera.attachControl(canvas); engine.runRenderLoop(function () { if (dudemesh) { dx = targetx - dudemesh[0].position.x; dz = targetz - dudemesh[0].position.z; rot = Math.atan2(dx, dz); // or dz,dx, but modify rotation len = Math.sqrt(dx * dx + dz * dz); if (len == 0) len = 1; dx /= len; dz /= len; dudemesh[0].rotation.y = rot+Math.PI; dudemesh[0].position.x += dx; dudemesh[0].position.z += dz; } scene.render(); }); } function moveDude(event) { var pickResult = scene.pick(event.clientX, event.clientY); targetx = pickResult.pickedPoint.x; targetz = pickResult.pickedPoint.z; } </script> <style> html, body { From tutorial width:100%; height: 100%; padding: 0; margin: 0; overflow: hidden; } #cvRAVE { width:100%;height:100%; } </style></head><body onload="start()"> <canvas onclick="moveDude(event)" id="cvRAVE" ></canvas></body></html> Dude.zip Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.