search

googlearchive / vrview

Library for embedding immersive media into traditional websites.
http://developers.google.com/cardboard/vrview
Apache License 2.0
1.71k stars 1.09k forks source link

On hover event #251

Open Olexyy opened 6 years ago

Olexyy commented 6 years ago

To be cometitive with concurrents this would be good to have on hover event...

lincolnfrog commented 6 years ago

Feel free to create a PR adding this and I will review and approve.

Olexyy commented 6 years ago

Actually hotspot renderer already has blur and focus, the only thing was to transfer it over frame)), I ve added to message reciever, message, and player neded changes... Works for me , I'll try to make separarte branch and notify Yu when I'm done. Very informative thing as hotspot is actually a reference to other VR view, that has own Title and Descripton

Olexyy commented 6 years ago

Ok, created PR.

jj-wd commented 6 years ago

Hi Olexij,

that's exactly what I was looking for and it works nice. Thanks. How did you integrate it? Do you have a working example?

Here's my approach, but is far from perfect: I added another property (hint) into the array in index.js and added the following to change the content of a <div> with id "hint" I added to the html file before (that overlays the vrview div). But obviously, this doesn't work in full screen/cardboard mode.

Adjusted index.js: ... var scenes = { dolphins: { image: 'dolphins.jpg', preview: 'dolphins-preview.jpg', hint: 'Go to the Dolphins', hotspots: { ...

... vrView.on('error', onVRViewError); vrView.on('getposition', onGetPosition); vrView.on('focus', onHSFocus); vrView.on('blur', onHSBlur); ...

... onHSFocus = function(e) { console.log('onHSFocus', scenes[e.id].hint); document.getElementById("hint").innerHTML = scenes[e.id].hint; };

onHSBlur = function(id) { console.log('onHSBlur', id); document.getElementById("hint").innerHTML = ""; }; ...

As said, this is not good, but maybe it's still useful for someone or someone can tell me how to do it better ;-)