I am using three js to display video where the user can move through the video using mouse, example here:
https://threejs.org/examples/?q=video#webgl_video_panorama_equirectangular
the code: https://github.com/mrdoob/three.js/blob/master/examples/webgl_video_panorama_equirectangular.html
Is there a way to display where user is watching (position and direction) inside container, something like this:
http://ignitersworld.com/lab/imageViewer.html
In the top left corner there is a little square showing current position. I would like to know position and direction in which view is facing (all in 2D)
How could I achieve that?
edit:
orientation has been solved.
I am looking for position on the layout within video, is this possible? Like on the picture: https://imgur.com/a/xsNYM
You can get the camera direction and calculate the angles. These angles will be your 2D orientation on a sphere:
var dir = camera.getWorldDirection();
var groundProjection = dir.clone().projectOnPlane(new THREE.Vector3(0,1,0))
var longitudeRadians = Math.atan2(groundProjection.x, groundProjection.z);
var latitudeRadians = Math.atan2(groundProjection.length(), dir.y)
// longitudeRadians is now an angle between -3.14 and 3.14
// latitudeRadians is now an angle between 0 and 3.14
Here is a running example: https://jsfiddle.net/holgerl/bqvdotps/
Related
I have an image which as a "ruler" (made of basic divs positioned absolute on top of the image) that are use to measure the ends of the image. Now the idea is that if you long press one of the ruler ends (the dots at the end of the line which are draggable), the image in the background would zoom in that point, and follow the dot if the user moves it. I am able to detect the long press but I cannot get the image to zoom and follow the dot once detected. The code below is where I have done the detection and now I should apply the styling to move the image. I thought of using the transition property but couldn't get it to zoom on the dot. Any help is appreciated...
Here's a codesandbox with how the ruler works: Link
Meaningful code:
const x = get('x', varToUse); //This just gives the x coordinate of the ruler end
const y = get('y', varToUse); //This just gives the y coordinate of the ruler end
const image = ruler.current.parentElement.parentElement.childNodes[1].childNodes[1];
if (zoom) {
image.style.transform = `translate(${x * 2}px, ${y * 2}px) scale(2.0)`;
} else {
image.style.transform = `scale(1.0)`;
}
This is what the ruler looks like just to get an understanding:
You can make the image a div with background-image.
.image {
background-image: url({image_url});
}
so this way you can update the image size and position easily with this properties
.image {
background-size: x y;
background-position x y;
}
I think this way is easier to do the image resizing and zoom abilities.
another way is to use a canvas library that can help you a lot they have lots of built in functions.
I think trying it without library is better for now but as it grows try to move to a canvas library
The first reason is that in the code you provided, the DOM element that is being manipulated is a div id='root'. The image should be selected.
I am referring an svg animation given in below link
https://codepen.io/thinkdesign/pen/JybJOq
I am not able to understand how the recursion works here
var offset = 0;
var animation = function() {
offset -= 100;
pattern.animate({ x: offset }, 500, mina.ease, animation);
};
here we are changing x axis on each function call , so the x axis should go beyond screen at some point. Please help me understanding how this works
Nothing is moving across the page here. The x that is being moved here is the pattern's X offset. An SVG <pattern> is a fill that consists of a "tile" that is repeated infinitely in every direction. The <pattern> has an x and y attribute that tells the browser where to start the tiling from. Animating the pattern's x offset has the effect of making it look like the tile is continuously moving across your object.
Picture a rectangular window lying on a tiled floor. If you slide that window across the floor, it looks to you like the tile pattern moves through the window.
I'm working on a 2d canvas-based app using EaselJS where the user can move indefinitely on the xy-plane by dragging the background. Think google maps, except the background is a repeating tile.
The code for the movement is very simple and looks something like this:
// container - the createjs.Container being panned
// background - a createjs.Shape child of container, on which the
// background is drawn
background.onPress = function(evt) {
var x = evt.stageX, y = evt.stageY;
evt.onMouseMove = function(evt) {
// the canvas is positioned in the center of the window, so the apparent
// movement works by changing the registration point of the container in
// the opposite direction.
container.regX -= evt.stageX - x;
container.regY -= evt.stageY - y;
x = evt.stageX;
y = evt.stageY;
stage.update();
};
evt.onMouseUp = function(evt) {
// Here the background would be redrawn based on the new container coords.
// However the issue occurs even before the mouse is released.
background.redraw();
stage.update();
};
};
All works as expected until reaching 32678px (2^15) on either axis. What occurs is different in different browsers, but the point where it first happens is the same.
In Firefox, it will suddenly shift a large chunk of pixels (~100) rather than 1. It will then happen again at 65538 (2^16+2), perhaps more after that, but I haven't witnessed it. After the trouble points, the drag will continue smoothly, as expected, but remaining shifted.
In Chrome, the effect is more dramatic. The drawing breaks and results in repeated ~100px wide "stripes" of the background across the page at 32768, and does not correct itself on redraw.
Oddly, the numbers in EaselJS don't reflect the issue. The only change in the container's transform matrix is the tx or ty incrementing by 1. No other matrices change. It seems as though EaselJS is getting all the numbers right.
Can anyone shed any light this issue?
Edit:
I worked around this problem by redrawing parts of the container using a calculated regX/regY, rather than attempting to translate very large regX/regY coords on the canvas.
This question may be related
What is the maximum size for an HTML canvas?
From what I gather browsers use short int to store canvas sizes with 32,767 being the maximum possible value.
Links possibly related to your issue,
Mozilla - HTML5 Canvas slow/out of memory
https://stackoverflow.com/a/12535564/149636
I have an active ArtLayer referenced by the variable NewLayer that I want to move to the absolute position x,y in the canvas.
I have been googling for a couple of hours now without any results. Can some one please give an example?
// Thanks.
After some more API reading and searching I came to the conclusion that it is only possible to move a layer with delta move.
I wrote this little function to position a layer at an absolute position. Hope this is helpful to the next reader with the same question...
//******************************************
// MOVE LAYER TO
// Author: Max Kielland
//
// Moves layer fLayer to the absolute
// position fX,fY. The unit of fX and fY are
// the same as the ruler setting.
function MoveLayerTo(fLayer,fX,fY) {
var Position = fLayer.bounds;
Position[0] = fX - Position[0];
Position[1] = fY - Position[1];
fLayer.translate(-Position[0],-Position[1]);
}
I need to grab the following coordinates topX, topY, bottomX, bottomY, as they represent a box around a source image. They are equal to:
topX = X coordinate at top left corner on source image
topY = Y Coordinate at top left corner on source image
bottomX = X coordinate at bottom right corner on source image
bottomY = Y coordinate at bottom right corner on source image
Here is a sample plugin that calculates these values. The source image width = 1024px and the height = 750px:
http://thindery.com/jsfiddle/crop_move.html
However, I have a new plugin that does more functionality than the above plugin, but I can't figure out how to get these 4 variables I need.
here is the jsfiddle http://jsfiddle.net/thindery/cv96e/
i tried to create my own boxedCoords(), based on how the original plugin calculated the values. However i'm still new to jQuery and I can't get it to work.
anybody have an idea how I can get these 4 variables?
This was solved. For the solution: jsfiddle