Search the Community

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: https://www.jqueryscript.net/demo/3D-Rotating-Carousel-Plugin-with-jQuery-three-js-Image-Gallery-Threejs/ 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.

Hello everyone, this is my first post here, so please don't be too harsh on my mistakes! Just started with Babylon JS a few weeks ago... I'm trying to build a concept showcase based on Babylon JS - will eventually create a link in the Demos and Projects section next wheek when something reasonable becomes available. The goal is to create a hierarchical data definition and data presentation system (where one can create the definitions of data items and the relations between them) and than can start using these to input real data. Like defining the META descriptions of a GraphQL-like system and the imputing and visualizing the data. As per the specs the data elements can reach tens of thousands for a single "entry", would like to try building this into the 3D space for faster browsing, zoom-in and out of detail levels, moving back and forth through a chain of similar items and so on. And for a rough guideline on what is to be modeled - consider the 3D representation in the Homeworld games. Well, this actually should go to the entry in "Demos and Projects".. And the actual questions now: 1) After an ArcRotateCamera's positions is animated, it stops to respond to mouse wheel. Here is a snipped of the animation (sorry for not creating a Playground, will learn to do this, tоo): function _3d_camera_move_animate(from, to) { var a = new BABYLON.Animation( 'camMoveAnimate', 'position', 60, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT ); a.setKeys([ {frame:0, value:from}, {frame:100, value:to} ]); CAMERA.animations.push(a); SCENE.onBeforeRenderObservable.add(_3d_camera_force_rebuild); SCENE.beginAnimation(CAMERA, 0, 100, false, 10.0, function() { SCENE.onBeforeRenderObservable.remove(_3d_camera_force_rebuild); }); } function _3d_camera_force_rebuild() { CAMERA.rebuildAnglesAndRadius(); } 2) The moving above is used to move the camera after an object is selected and this relates to the next question: If you have the positions of 2 objects and the camera, how to calculate how to move the camera to the side, to give the impression that when you select the second object it starts to face it, while it was facing the first object before that. The actual problem is that if the camera is moved equally to the distance between the 2 objects, this is too much - as the objects are away from the camera and the "observable" distance is far less that the actual one. 3) How to prevent the camera of exiting a PhotoDome? For example when using the mouse wheel... Sorry for the lengthy post... Best regards, ilia.

Hi guys! I find a problem that i can't make the arcrotateccamera rotate to the nearest 'destination'. here is the PlayGround. https://www.babylonjs-playground.com/#RVZ1O#2 Rotate several circles around the center, then click the purple button. You will find meshes rotate back quickly to the original position before rotation. I want the purple button rotate to the position which camera.alpha=0 or PI but not rotate to the original position(for instance, the button just rotate a angle about -PI/2).

I'm trying to navigate a mesh with the arcrotatecamera using Firefox on a Surface Book, but the touch is doing some weird things where if i try to alternate between zooming in and out, and gets stuck. What can I do? https://www.babylonjs-playground.com/#12WBC#69

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

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;

This is a third-person shooter demo. If you like it, please give me stat. It USES babylonjs, such as ArcRotateCamera. github： https://github.com/renjianfeng/BabylonTPSDemo github.io:https://renjianfeng.github.io/BabylonTPSDemo/example/index.html

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

Hi, i am loading a STL file as described in https://doc.babylonjs.com/extensions/stl My aim is to use the ArcRotateCamera to view, rotate, zoom the 3D Modell. Is based my code on this example (http://www.babylonjs-playground.com/#1GM4YQ) 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="https://preview.babylonjs.com/cannon.js"></script> <script src="https://preview.babylonjs.com/oimo.js"></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 // camera.target = 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: http://www.ferrisol.com/apo/stl3.html 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

Are there any way to enable touch panning for ArcRotateCamera? now we have 1 finger rotate,2 finger zoom,maybe 3 finger for panning?

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: https://playground.babylonjs.com/#IDDZ4K Youtube:

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. http://www.babylonjs-playground.com/#JLPAE#138

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. http://www.babylonjs-playground.com/index.html#6QH6SN 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!

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

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!

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?

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

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

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!

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!

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. http://www.babylonjs-playground.com/#0XK6K2 by the way, for some reason I can't use use the right click in the playground... Thanks!

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?

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

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

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