I am attempting to zoom into a clicked shape or group of shapes. The actual move works, but the property to tell it to animate does not.
map.getViewModel().setLookAtData({
bounds: boundingBox
}, true);
This does move and zoom correctly but without animation. If I add a specific zoom level it animates as expected, but part of what I need it to figure out is the zoom level for me.
I can probably fake it if I can work out any reliable way to calculate what the zoom level should be manually, but that is less than ideal. For what ever reason, using only bounds breaks the feature that allows animation. Any work around for this?
Map instance methods such as setZoom(), setCenter() and setViewBounds() accept a second argument indicating whether an animated transition should be applied.
We recommend not to create your own zoom animations as shown in the snippet below:
// Assumption: 'map' is initialized and available.
var currentZoom = map.getZoom();
var endZoom = currentZoom + 3;
// Update zoom level on each animation frame,
// till we reach endZoom:
function step() {
currentZoom += 0.05;
map.setZoom(currentZoom);
(currentZoom < endZoom) && requestAnimationFrame(step);
}
// Start zoom animation
step();
Instead, call the method setZoom() with an optional second parameter to perform an animation:
/** * Assumption: 'map' is initialized and available */ // Call
getZoom() with an optional second parameter, // indicating that an
animation is to be performed: map.setZoom(map.getZoom() + 3, true);
Possible Workaround: seems to work if you pass the bounds centroid:
let data = {bounds: bounds, position: bounds.getCenter() };
map.getViewModel().setLookAtData(data, opt_animate);
Related
I'm using ArcRotateCamera, when I click on mesh, I have to focus camera on
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 300, BABYLON.Vector3.Zero(), scene);
camera.setTarget(BABYLON.Vector3.Zero());
// on mesh click, focus in
var i = 2;
var pickInfo = scene.pick(scene.pointerX, scene.pointerY);
if (pickInfo.hit) {
pickInfo.pickedMesh.actionManager = new BABYLON.ActionManager(scene);
pickInfo.pickedMesh.actionManager.registerAction(
new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger,
function (event) {
camera.position = (new BABYLON.Vector3(pickInfo.pickedPoint.x, pickInfo.pickedPoint.y, camera.position.z + i));
i += 2;
})
);
}
this code changes mesh's z position but don't makes it in the center of screen
There are a few things that can be changed in your code.
1st - what you are doing is executing a code action after a click, instead of simply running the code in the callback after a pick has occurred. You are registering a pick action (technically user click) on right on the first frame, but only if the mouse was found in the right location at the right moment. My guess is that it didn't work every time (unless you scene is covered with meshes :-) )
2nd - you are changing the camera's position, instead of change the position to which it is looking. Changing the camera's position won't result in what you want (to see the selected mesh), it will move the camera to a new position while still focusing on the old position.
There are a few ways to solve this. The first is this:
scene.onPointerDown = function(evt, pickInfo) {
if(pickInfo.hit) {
camera.focusOn([pickInfo.pickedMesh], true);
}
}
The ArcRotate camera provides focusOn function that focuses on a group of meshes, while fixing the orientation of the camera. this is very helpful. You can see a demo here:
https://playground.babylonjs.com/#A1210C#51
Another solution would be to use the setTarget function:
https://playground.babylonjs.com/#A1210C#52
Which works a bit differently (notice the orientation change of the camera).
Another thing - use the pointer events integrated in Babylon, as they are saving you the extra call for a scene pick. pointer down is executed with the pickinfo integrated in the function, so you can get the picking info of the current pointer down / up / move each frame.
**** EDIT ****
After a new comment - since you want to animate the values, all you need to do is store the current values, calculate the new ones, and animate the values using the internal animation system (documentation here - https://doc.babylonjs.com/babylon101/animations#basic-animation) . There are many ways to achieve this, I took an old function and modernized it :-)
Here is the demo - https://playground.babylonjs.com/#A1210C#53
Looking to animate the below SVG, which I have got working initially. However, I want it to 'draw' the second SVG in the opposite direction, WITH the dots i've defined.
Is there any way I can do this? Effectively drawing my shape from left to right with the dots.
Codepen: http://codepen.io/anon/pen/gFcAz
The normal dash offset animation trick really only works with solid lines.
This is the closest I managed to get using CSS animations.
http://jsfiddle.net/L4zCY/
Unfortunately the dashes crawl because you have no control over the step rate of the stroke-dashoffset. If you could make it step by 10 at a time, the dashes wouldn't move.
So I think the only way around it is to use Javascript.
var path = document.querySelectorAll("svg path").item(0);
animateDashedPath(path);
/*
* Animates the given path element.
* Assumes the path has a "5 5" dash array.
*/
function animateDashedPath(path)
{
var pathLength = path.getTotalLength();
var animationDuration = 2000;
var numSteps = Math.round(pathLength / (5+5) + 1);
var stepDuration = animationDuration / numSteps;
// Build the dash array so we don't have to do it manually
var dasharray = [];
while (numSteps-- > 0) {
dasharray.push(5);
dasharray.push(5);
}
dasharray.push(pathLength);
// Animation start conditions
path.setAttribute("stroke-dasharray", dasharray.join(" "));
path.setAttribute("stroke-dashoffset", -pathLength);
// We use an interval timer to do each step of the animation
var interval = setInterval(dashanim, stepDuration);
function dashanim() {
pathLength -= (5+5);
path.setAttribute("stroke-dashoffset", -pathLength);
if (pathLength <= 0) {
clearInterval(interval);
}
}
}
Demo here
Update
It looks like there is an issue with in FF. If you create the "right" number of dashes for the path length, it doesn't quite reach the end of the path. You need to add extra.
A version of the demo that works properly on FF is here
I use three.js and THREE.OrbitControls for animation
I dont know how change zoom with button click
How I understand ..for zooming answer this functions
this.dollyIn = function ( dollyScale ) {
if ( dollyScale === undefined ) {
dollyScale = getZoomScale();
}
scale /= dollyScale;
};
this.dollyOut = function ( dollyScale ) {
if ( dollyScale === undefined ) {
dollyScale = getZoomScale();
}
scale *= dollyScale;
};
what I need send to increment or decrement zoom
I how do it for this button form ??
<input id="clickMe" type="button" value="+" onclick="..." />
I've done this in one of my project.
You are right, you can use dollyIn() and dollyOut() functions from OrbitControls to do the zooming in or out.
Here is the steps and snippet code :
You need to initialize the OrbitControls along with your camera and renderer domElement :
var controls = new THREE.OrbitControls(camera, renderer.domElement);
Create function for zooming in and out :
function zoomModel(isZoomOut, scale) {
if(isZoomOut){
controls.dollyIn(scale);
}else{
controls.dollyOut(scale);
}
}
Add event listener into your button to call the zoomModel function :
$("#clickMe").on("click", function(){
// call this to make the model larger/ zoom in
zoomModel(true, 4);
// call this to make it smaller / zoom out
//zoomModel(false, 4);
});
For newer THREEjs versions (tried on r74 and r75) you can call these on button click events:
controls.constraint.dollyOut(/*Add your desired scale here*/) //Zoom in
or
controls.constraint.dollyIn(/*Add your desired scale here*/) //Zoom out
Look in OrbitControls.js how the scale-value is applied to the radius of the camera around its target in the update()-function and how getZoomScale() is implemented.
The scale is multiplied with the overall radius. So to zoom out, the scale value has to larger than 1 and to zoom in, scale has to be smaller than 1. Also, scale will be reset to 1.0 at the end of the OrbitControls update function.
getZoomScale() on the other hand always returns 0.95 if zoomSpeed is set to 1.0.
To put it in a nutshell, if you only call controls.dollyOut() or controls.dollyIn() on button-click-event, your zoom will change like what you would experience with one tick of your mouse wheel, as this uses the same function call.
In a given instance of google maps...
Is there a way to turn off the other instances of the maps which tile to the right and left of the initial central map?
I've seen ways to restrict the pan ability of the map ... but it uses lat + lng to determine when to re-center the map ... and thus the usage falls apart at different zoom levels.
For example: https://google-developers.appspot.com/maps/documentation/javascript/examples/map-simple
If on zooms all the way out, you can see how the map of the globe is tiled along the x-axis.
I would like a single instance of the map.
You could add an observer to the zoom_changed event, and set the minZoom if more than 90 degrees of map is shown. The second statement recursively reduces the zoom to an acceptable limit before the limit is known.
var zoomObserver = function () {
width = Math.abs(map.getBounds().getNorthEast().lat() -
map.getBounds().getSouthWest().lat());
if (width > 90){
var opt = { minZoom: map.getZoom()};
map.setOptions(opt);
}
if (width > 179){
map.setZoom(map.getZoom() + 1);
}
};
google.maps.event.addListener(map,'zoom_changed', zoomObserver );
This simple solution works for most use cases, doesn't take into account doubling the width of the map through resizing the browser window, so you may need to add the observer to another event in that case.
I've been having trouble creating a mechanism to allow the user to select a span of time from a timeline. Basically i want them to be able to click and drag horizontally, and retrieve the start and end positions of that event.
I especially need to include the case where the event goes off the edge of the screen (even if the end position is snapped to the edge of the screen that's fine).
While doing all of this, I want to be able to draw a box that goes from the start of the event to the current position of the mouse, so that it's obvious which area if being selected.
Basically, it doesn't seem to me that you're dragging something. You just have a sequence of press, move and release. You will have to click on something, I bet you could consider the press event on the timeline itself. So it'll be something like:
timeline.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
timeline.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
// the next line just considers that leaving the object surface is the same as depressing the mouse button
timeline.addEventListener(MouseEvent.MOUSE_OUT, onMouseUp);
function onMouseDown(evt:MouseEvent):void {
// add the event listener for the mouse move action
timeline.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
// create the movie clip for the box
// you get the mouse coordinates from evt.localX and evt.localY (relative to the origin of the timeline movieclip) or evt.stageX and evt.stageY (as global values)
}
function onMouseMove(evt:MouseEvent):void {
// adjust the selection width and height
// you get the mouse coordinates from evt.localX and evt.localY (relative to the origin of the timeline movieclip) or evt.stageX and evt.stageY (as global values)
}
function onMouseUp(evt:MouseEvent):void {
// remove the event listener for the mouse move, that means that the function onMouseMove will no longer be called
timeline.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
// brush up and send the final coordinates of the selection to the next function
}
For the selection graphics itself, you can either use an instance of a movie clip from your library, or you could simply create an empty movie clip, make it semitransparent and draw a rectangle in it, like so:
var selection:MovieClip = new MovieClip();
selection.alpha = 0.5;
selection.graphics.beginFill(0x000000);
selection.graphics.drawRect(x,y,width,height);
selection.graphics.endFill();
this.addChild(selection);