Comments (26)
I don't know how I could help you. It's simple trigonometry to know which area is visible knowing the viewport width and height, the current zoom level and the current camera position.
Simple but I don't know the formula, Wikipedia and math websites will help.
That being said it gave me the idea of a markers feature, actually displayed on the sphere it-self, with add, remove, show, hide, goto methods.
from photo-sphere-viewer.
Yes, would be a very useful feature and not hard to implement. I'm almost done with it, just need a more accurate way to adapt to current camera view.
I used HTML overlay (instead of textures in render) because it allows easy interaction with Angular.
Can't get that damn formula right. It offsets faster than the view
Markers have left
and top
in absolute and -/+
depending on direction
var offsetX = PSV.prop.theta - (pos.left - PSV.prop.mouse_x) * PSV.config.long_offset;
from photo-sphere-viewer.
I think you are mixing spherical and orthogonal coordinates, hence the offset.
from photo-sphere-viewer.
Did you managed to solve your offset ? I am facing the same problem naively thinking there is a linear relationship between angles and plane positions.
https://github.com/mistic100/Photo-Sphere-Viewer/blob/feature/5-markers/src/js/PSVHUD.js#L128
But it's not linear, it's... strange. I'll have to study how PerspectiveCamera works.
from photo-sphere-viewer.
It's working ! the method used is explained here http://stackoverflow.com/a/27448966
Now I'll make everything pretty and configurable :-)
from photo-sphere-viewer.
You can see the WIP here http://www.strangeplanet.fr/work/photosphere/example/
from photo-sphere-viewer.
- display markers
- add marker tooltips on mouseover
- add marker details displayed in side panel on click
- add button in navbar which display a list of markers
- add
gotoMarker
,hideMarker
,showMarker
,addMarker
,removeMarker
methods
from photo-sphere-viewer.
No, no I didn't.
Please send your address so I send unlimited amounts of beer!
Is is set in version ?
from photo-sphere-viewer.
Also for the markers
- add
curentMarker
-- return the object associated with the currently selected marker
That way if you select a marker and execute a function, you get directly the current one, no need for$event
callback in function.
Makes easier to provide an array
of objects to set as markers and then interact with each one
from photo-sphere-viewer.
When your done with the marker
feature I'm going to make a angular
class so you can commit it as well
from photo-sphere-viewer.
After your done with markers I'll make an angular module for the plugin. That'll be cool
from photo-sphere-viewer.
I'll prefer you publish the directive in a separate (your own) repository.
I'll make a reference to it in the doc.
from photo-sphere-viewer.
OK. Will do
from photo-sphere-viewer.
So I think it's done. But there will be a problem if you want to integrate with angular.
When a marker is added a clone is done https://github.com/mistic100/Photo-Sphere-Viewer/blob/feature/5-markers/src/js/PSVHUD.js#L75
This will make any possible angular model detached. I could remove the clone but I also need to store some custom data on the marker (position2D, position3D, parsed anchor) and I don't really want to modify the object of the user.
How should this be done correctly ?
from photo-sphere-viewer.
Cool.
Let me test it because I will be integrating it with angular and I'll provide info how to make it the best
At first sight fast methods::
angular.merge
on marker object will do.
Will provide more info soon. Working
from photo-sphere-viewer.
Nice!
Tested and started to integrate, also adding markers dynamically works fine with angular, got a good solution for that.
The only problem is placing them. Fetching the click event from the canvas but no matter how I use offsetX, offsetY, clientX, clientY
it doesn't come on the place clicked. Note: screenX, screenY
is always 0 for canvas
Also using events from PSV.prop
for mouseX
is same thing. Any advice on how to calculate the X,Y
needed from mouse click $event
on the canvas
?
from photo-sphere-viewer.
You forgot that you are working with a perspective projection of a 3D environment. What you need is to use the Raycaster to detect the click position in the sphere (x, y, z) then translate to geodesic coordinates (latitude, longitude) and if needed translate to texture coordinates.
If you can wait I'll add a "mouse-click" event on the viewer with the following properties :
- viewer_x
- viewer_y
- latitude
- longitude
- texture_x
- texture_y
from photo-sphere-viewer.
Tested. Using longitude, latitude
from the 'click' data
I made it add markers dynamically.
Is the 'click'
data stored in the PSV
object like many other coordinates ? I can't find it.
Would be helpful to recover it from the root object
from photo-sphere-viewer.
Using longitude
and latitude
in Angular to add new marker works, but there is a slight error. For some reason there is a distance between place of click and the placement.
Meaning, it's exactly under the click location.
The error distance is constant.
from photo-sphere-viewer.
constant by how many ? are you sure it's not related to the positioning of the marker itself ? by default the marker image is centered on the position, you can change it with the anchor
marker attribute (for example "bottom center")
from photo-sphere-viewer.
For me it doesn't make sense to store the last clicked position in the viewer, it's an ephemeral thing.
from photo-sphere-viewer.
It's a constant of about 30px
by screen size, exactly under the clicked spot.
It makes sense, because the click you use to save latitude
and longitude
and store info about the objects in the 360.
This is a inserted marker on click event
<div class="marker visible" style="width: 32px; height: 32px; transform: translate3d(183.264px, 232.993px, 0px); background-image: url(pin.png);"></div>
Something from here maybe?
THREE.WebGLRenderer: image is not power of two (4095x2047). Resized to 4096x2048 <canvas width="4095" height="2047">
This is automatic on each load of 360
from photo-sphere-viewer.
I just tested with a simple code in the demo file
PSV.on('click', function(e) {
PSV.addMarker({
id: Math.random(),
longitude: e.longitude,
latitude: e.latitude,
image: 'pin2.png',
width: 32,
height: 32,
anchor: 'bottom center'
});
});
and it works perfectly, no offset
the THREE JS warning about the texture size has not impact
from photo-sphere-viewer.
Yes, working fine.
I found the margin-top
issue.
When you have something on top of the container, the marker will drop by $height
px
Ex:
<div style="height:40px"></div>
<div id="360ishereinthiscontainer">...</div>
the markers will drop vertically by the height of the top $element
.
A screen.Y
problem maybe? Instead of canvas size
from photo-sphere-viewer.
Yes, just tested now. Alone in a page, it doesn't need a margin-top: -$some px
If it's part of anything, like a table, div.col
etc it requires further alignment
from photo-sphere-viewer.
Forgot that "clientX" and "clientY" are always relative to the window. Now it's fixed.
from photo-sphere-viewer.
Related Issues (20)
- [Support]: Adding different 3D arrow models to the Virtual Tour Plugin and changing their vertical position HOT 1
- 10MB size limit in chromium browsers HOT 3
- «speed» option doesn't work in the Virtual Tour Plugin HOT 1
- Safari browser crashes and reloads the page HOT 3
- When using Equirectangular tiles, the parameter baseUrl is recommended and needs a low-resolution panoramic slice. May I ask what resolution can be set as the parameter of baseUrl HOT 2
- Equirectangular tiles load: using ImageMagick generate tiles problem HOT 3
- Markers from tour links have incorrect orientation HOT 2
- Thumbnails don't load when the image URL contains `( )` HOT 1
- «linkOffset» option doesn't take negative values in degrees in Virtual Tour plugin HOT 2
- Virtual Tour: name of link doesn't get displayed HOT 8
- Type error in CubemapAdapter HOT 1
- Can you support video streaming? Video streams like hls and m3u8 HOT 1
- Marker Point Scaling Issue HOT 3
- showAllTooltips() method doesn't correctly show tooltips for Virtual Tour markers in 5.5.2 HOT 2
- Gallery Plugin items are not clickable on mobile HOT 4
- Website is down HOT 1
- marker如果用html 展示,浏览器开启硬件加速,会特别卡,用谷歌或者eage都可以复现
- Load css file error with v5.4.4 by chrome 112.0.5614.0 HOT 4
- Urgently hope to have an official document in Chinese HOT 1
- markers: Uninitialized tooltip cannot be moved HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from photo-sphere-viewer.