Search the Community

Showing results for tags 'arcrotatecamera'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 47 results

  1. I would like to be able to switch between ArcRotateCamera and FreeCamera with as little motion as possible. I haven't been able to figure out: 1) How to get the FreeCamera to face the same direction as ArcRotate was when switching. 2) How to remove the 'spinning' effect when switching. You can 'coil' a camera up by rotating it several times and after switching, it 'uncoils' itself by rapidly spinning. I thought that for FreeCameras this number is stored in .rotation.y and .alpha for ArcRotateCameras, but limiting these to ±Math.PI doesn't fix this issue. Don't really want to set inertia to 0 because I like inertia PLAYGROUND LINK
  2. Hi, I have a scene with 4 models that can be seen through ArcRotateCamera rotation, nothing fancy but I need to give it a shape similar to: Where the sides look a bit crowded showing the model at center with more presence. Is there any way I can achieve it? maybe with somekind of distortion? Thank you.
  3. I am unable to modify (increase) the idleRotationSpeed of my ArcRotateCamera. I tried adjusting the values of speed.idleRotationSpeed but to no avail; the arc rotation camera always circles the object at the same rate. Here is a code snippet: var camera = new BABYLON.ArcRotateCamera("arcCam", 10,1,30, BABYLON.Vector3.Zero(),scene); camera.attachControl(canvas,true); camera.upperBetaLimit = Math.PI / 2; camera.lowerRadiusLimit = 4; var speed = new BABYLON.AutoRotationBehavior("camera",scene); speed.idleRotationSpeed = 0.01; speed.parent = camera; camera.useAutoRotationBehavior = true;
  4. renjianfeng

    Third-person shooter demo.

    This is a third-person shooter demo. If you like it, please give me stat. It USES babylonjs, such as ArcRotateCamera. github:
  5. Hi All, It seems that when I try to rotate the beta value manually, it never goes in a full circle. It always stop at the value of -0.021415926535897932 and 3.173 and it doesn't seem to form a full circle connecting line. (those 2 value is not at the same location or even close) Is there anyway for me to make the ArcRotateCamera to follow and face the back of the player? Thanks
  6. Hi, i am loading a STL file as described in My aim is to use the ArcRotateCamera to view, rotate, zoom the 3D Modell. Is based my code on this example ( and replaced the Import Mesh part with the STL import. Therefore hand.js and babylon.stlFileLoader.js are imported. The STL files are in binary and ascii (i tried both). Please find the example STL files (just a cube) attached. Here the code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Babylon.js sample code</title> <!-- Babylon.js --> <script src="lib/dist/babylon.js"></script> <script src="lib/dist/loaders/babylon.stlFileLoader.js"></script> <script src="handjs/bin/hand.js"></script> <script src=""></script> <script src=""></script> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style> </head> <body> <div id="canvasZone"> <canvas id="renderCanvas"></canvas> </div> <script> var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var createScene = function () { var scene = new BABYLON.Scene(engine); //Adding a light var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene); //Adding an Arc Rotate Camera var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene); camera.attachControl(canvas, false); // The first parameter can be used to specify which mesh to import. Here we import all meshes //BABYLON.SceneLoader.ImportMesh("", "scenes/", "skull.babylon", scene, function (newMeshes) { // Set the target of the camera to the first imported mesh // = newMeshes[0]; //}); BABYLON.SceneLoader.Load("stlfiles/", "blockstla.stl", engine, function (newScene) { newScene.activeCamera.attachControl(canvas, false); engine.runRenderLoop(function () { newScene.render(); }); }); // Move the light with the camera scene.registerBeforeRender(function () { light.position = camera.position; }); return scene; } var scene = createScene(); engine.runRenderLoop(function () { scene.render(); }); // Resize window.addEventListener("resize", function () { engine.resize(); }); </script> </body> </html> The STL model is loading as expected but the ArcRotateCamera is not working as expected. I have the feeling that I only have the functionalities of the FreeCamera. Please find the result here: Are there any known incompatibilities with the STL Loader and the ArcRotateCamera? Did i make a mistake? Thx for your help blockstl.stl blockstla.stl
  7. Are there any way to enable touch panning for ArcRotateCamera? now we have 1 finger rotate,2 finger zoom,maybe 3 finger for panning?
  8. Hey Guys! I have a video demo of what my build, What i'm struggling with is how to make it seem flatter when panning from left to right and hiding the fact you can see the edges or the circle the sprites are positioned in and can tell they are coming round in a circle not across a flat image, which is the effect i'm after. Here is a youtube video of my current build, and a babylon playground with broken textures (sorry!) to view how i'm going about the build! Playground: Youtube:
  9. At least in the case of an ArcRotateCamera, the scene objects are not visible if the initial position of the camera is Vector3(0, 10, 0), or directly above. If its Z position is set even a fraction off of zero, there is no problem.
  10. The arguments in the attachControl() method for ArcRotateCamera do not seem to behave as described in the documentation. I am unable to achieve what I could before 3.0. Prevent default seems to be affected by whether "useCtrlForPanning" is true. I can't get the RMB to pan at all, as I could the previous version. please toy with the booleans and see what I mean. Ideally, I would have the RMB and ctrl+LMB both panning, with no menu showing up on RMB click. At the very least, I would like to be able to disable the right click menu while having panning enabled. Thanks!
  11. I want to use an ArcRotateCamera where the position and direction of the camera is determined by a parent object like in this rollercoaster playground where the player can additionally look around. So far so good, thaks to the creator @jerome I guess. I'd like to extend this szenario with a barrel distorted stereo output (using cameraRigMode_VR), but parenting the camera to an object (wagon in case of the playground) does not work, stereo output works, but no parenting. Can someone give me a hint please? Thanks in advance
  12. Hello BJS sorcerers, I am in need of your voodoo once again! I am using an arcRotateCamera. I have some hidden boxes that I am using as colliders the camera can pass through. Here is the lowdown: camera is outside of the party box camera is inside the party box so it makes a little love, does a little dance, and gets down tonight and sends a message to angular "im at the party" (true) camera leaves the party box. stops with the love making, no more dancing - it only cries itself to sleep, and sends a message to angular "i left the party" (false) I am using .onCollide to detect the collisioins between the camera and other stuff. The hidden boxes do have checkCollisions = true; I get the logs for the true event, but I never get false. some code for you to laugh at: scene.executeWhenReady(function() { _scene.collisionsEnabled = true; var cam = _scene.activeCamera; cam.collisionRadius = new BABYLON.Vector3(1, 1, 1); cam.checkCollisions = true; cam.onCollide = function(collidedMesh) { if (collidedMesh.obj_type == "locations") { cameraAtLocation = true; console.log('cameraAtLocation', cameraAtLocation); } else { cameraAtLocation = false; console.log('cameraAtLocation', cameraAtLocation); } }; }; so to recap, I need to know when the camera leaves the collision if that makes sense. Thanks you wonderful people!
  13. Newlearner

    Arc rotate camera

    Hi, I have created the object on Babylon Js and can able to rotate and view the object using arc rotate camera. My requirement is: 1. I positioned the camera on some position. 2. When the user click and move the mouse on canvas, can able to rotate the object. I have done the above things Whenever the user release the mouse on canvas while rotating, the camera back to the default position of initial stage.----> This is my requirement. Can anyone help on this?
  14. Hello everyone! I'm new with babylon.js and now I'm trying to make a third person shooter game. The idea is to make an ArcRotateCamera that is able to perform unlimited alpha rotation. However, I'm struggling with the mouse cursor as it has a limited movement (that is the border of the browser), making an unlimited alpha rotation impossible. Is there any way to make it possible? Thank you in advance
  15. I have an ArcRotateCamera targeted on a sphere like this: camera = new BABYLON.ArcRotateCamera("camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene); earth = BABYLON.Mesh.CreateSphere("earth", 16, 2, scene); After clicking on the sphere at point P1 = (x1, y1, z1) , I'd like for the camera to animate in a way that it would change its focus directed at P1. Ideally I would like the camera to animate to a new position P2 = (x1 * 2, y1 * 2, z1 * 2) but I realized that I need to animate an arcRotateCamera using its alpha, beta and radius. So my question is how can I convert P2 position to its corresponding alpha, beta and radius to give me this animation affect. thanks in advance, Sima
  16. Hello everyone! I know there is a function .setPosition but I want to know this... Let's make my camera is at Vector3(0, 0, 100). The user move the camera wherever he wants. With a button I want the camera go back to Vector3(0, 0, 100), but not in a frame, but smoothly... how can i do it? Or, even better, how can I move the camera to a specific point calculating the fastest route and assigning a velocity? For me the problem is that the route is not a line, but a curve and I don't know how to calculate it. Or maybe in BabylonJS there are other ways to accomplish it! I hope I've been clear Thanks in advance for any help you'll provide!
  17. Hi, I'm having problems with the ArcRotateCamera following a moving object. I decided to make an example in jsfiddle In the demo you can left mouse button click on the ground and the sphere will move towards that position. During the movement you should be able to rotate the camera with right mouse button, this doesn't work for some reason? Now I know what you are thinking, why not make a playground example? Well I did but for some strange reason it works in the playground while using the same version of babylon. The playground example I might be abusing the camera.setTarget method but why does it work in the playground and not in jsfiddle? Any other way that could achieve following the object with the ArcRotateCamera is much appreciated!
  18. Hi! I'm using the right click to move the camera around, but I wanted to limit that movement/panning/translation. For exemple, when the camera/object/mouse hits the margin of the screen, it "kind of" locks it, and doesn't allow the objects in the scene to get out of sight. by the way, for some reason I can't use use the right click in the playground... Thanks!
  19. I am working on babylon for few days. and I am a beginner level on 3d libraries. I changed the upVector of ArcRotaionCamera. and now the z Axis is pointing up. but while dragging the mouse to move around it not working as expected. is there a way around this?
  20. Hi, I would like to understand a strange behavior of my camera and how to prevent it. Let me explain. I have a mesh that I like to see from different point of views with an ArcRotateCamera. If collisions are enabled, if the camera move from viewpoint1 to viewpoint2 and the translation between these 2 points intersects the mesh, the new camera position is not the expected one. If collisions are disabled, it works. If the translation doesn't intersect the mesh, it also works. Here is a PG to illustrate my issue : you can change viewpoints by pressing keys '1', '2', '3', '4', '5' or '6' to see respectively the cube from front, left, back, right, top or bottom viewpoint you can toggle collision by pressing 'c' If collisions are enabled, my issue happens when : switching from opposite viewpoints (1 -> 3, 2 -> 4, 5 -> 6), you obviously intersect the cube if you are close enough of the cube, moving to any viewpoint will intersect the cube and pressing consecutively the same key will not have the same result until the camera is not in the intended position If collisions are disabled, camera's behavior is the expected one. I don't know why my camera moves like this. I assume that the camera is not teleported from a viewpoint to another but it is translated which implies a collision with my mesh. Can it be fix in Babylon.js ? Do I misuse the library ? How can I prevent this behavior ? I succeed to avoid it but I have to use window.setTimeout twice to disable collisions, then move my camera and enable collisions. function setViewpoint(viewpoint) { camera.checkCollisions = false; window.setTimeout(function() { camera.alpha = viewpoint.alpha; camera.beta = viewpoint.beta; window.setTimeout(function() { camera.checkCollisions = true; }, 100); }, 100); } It is a bit tricky and I'd like to find another way to do it. Thanks
  21. Hello, I'm new to Babylon.js and I'm looking for a way to use the ArcRotateCamera AND move its target by arrow keys for example. I would like to rotate the camera around the scene and also to be able to look closely to left bottom corner for instance. Is it possible or am I making stuff up? Thank you :-)
  22. Hello everyone, I'm currently building an object viewer with BJS that utilizes a single ArcRotateCamera. I had to create manual control buttons for the camera, because apparently it can't be expected of the average web user to know how the simple concept of drag and drop works. So, I built 6 button to rotate the camera up, down, left and right and zoom in and out. The beta axis needed some special attention, because the application's state machine can have a state where upperBetaLimit and lowerBetaLimit are null, so the user can rotate past the top / bottom. This works fine with the mouse, but when the button is used and the last rotation modification moves the beta value past zero/360 degrees, the camera's z-axis (which should be fixed and not even modifiable for ArcRotateCamera) flips upside down for a split second before some sort of internal correction seems to turn it back around to normal. But that moment is very irritating and I doubt that my client will approve the app with such an ugly display bug. Any idea what might be causing it and how to get rid of it? I already tried to prevent the beta value from ever reaching exactly zero, because I expected that this was the problem, but as it turned out, that was not it. Here is the code for the up button: $('#buttonRotateUp').on('mousedown touchstart', function (e) { e.preventDefault(); if (window.camBetaRotationInterval) { clearInterval(window.camBetaRotationInterval); } $('#buttonRotateDown').removeClass('limit-reached'); if (!$(this).hasClass('pressed') && !$(this).hasClass('limit-reached')) { $(this).addClass('pressed'); var rotateStep = 0.15; // checking if the limits are not null if ((scene.activeCamera.lowerBetaLimit || scene.activeCamera.lowerBetaLimit === 0) && scene.activeCamera.upperBetaLimit && (scene.activeCamera.beta + rotateStep) > scene.activeCamera.upperBetaLimit) { $('#buttonRotateUp').addClass('limit-reached'); scene.activeCamera.beta = scene.activeCamera.upperBetaLimit; } else { if ((scene.activeCamera.beta + rotateStep) == 0.0) { scene.activeCamera.beta += (rotateStep + 0.1); } else { scene.activeCamera.beta += rotateStep; } } window.camBetaRotationInterval = setInterval(function () { var $btn = $('#buttonRotateUp'); var rotateStep = 0.015; if ($btn.hasClass('limit-reached') || ((scene.activeCamera.lowerBetaLimit || scene.activeCamera.lowerBetaLimit === 0) && scene.activeCamera.upperBetaLimit && (scene.activeCamera.beta + rotateStep) > scene.activeCamera.upperBetaLimit)) { $btn.addClass('limit-reached'); scene.activeCamera.beta = scene.activeCamera.upperBetaLimit; } else { if ((scene.activeCamera.beta + rotateStep) == 0.0) { scene.activeCamera.beta += (rotateStep + 0.01); } else { scene.activeCamera.beta += rotateStep; } } }, 25); } }).on('mouseup touchend', function (e) { e.preventDefault(); $(this).removeClass('pressed'); if (window.camBetaRotationInterval) { clearInterval(window.camBetaRotationInterval); } });
  23. Hi, I would like to use a right handed coordinate system (thanks for adding support for that in 2.5) with the Z-axis pointing upwards. I tried to set the upVector for ArcRotateCamera, but the Z-Axis isn't pointing upwards afterwards and the mouse control is acting weird. Here is an example: Am I missing something? Thanks, Jan
  24. Hi guys, i notised that if you use arcRotateCamera and setTarget(mesh) you're unable to unlock the target, e.g setTarget(mesh.position.clone()); without updating the mesh's position first, i'm using 2.5, but it is also available in the PG; // Press any key to setTarget(sphere), press again to setTarget(sphere.position.clone()), try to pan using the left mouse button, you're still stuck, uncomment line 33 ( sphere.position.x += 0.00000001;), do it again and now you can pan.. Example; Fix has been merged, thanks @Deltakosh
  25. I am using BABYLON.ArcRotateCamera to visualise and move through my 3D scene. However, I am trying to change the way in which the .alpha rotation works. My understanding of ArcRotateCamera: By default the .aplha is used to rotate the camera around the "Y" axis and .beta rotates the camera around "X" axis. What I want ArcRotateCamera to do: I want to change the .alpha rotation such that it rotates around the "Z" axis instead of the default "Y" axis. Does anyone know how I can do ths? FYI - I have experimented with creating custom camera inputs (which is great for manipulating mouse buttons/wheel actions) but I can see no way obvious of achieving the above, hence there is probably another approach that is needed. Thanks...