New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add three scenes for link traversal #1575

Merged
merged 1 commit into from Jun 30, 2017

Conversation

Projects
None yet
7 participants
@dmarcos
Collaborator

dmarcos commented Jun 23, 2016

Description:
Creates a showcase to illustrate link traversal, characteristic of the WebVR 1.0 spec. A hover and click effects for the links are still pending.

@cvan I know you have opinions on how pages should handle link traversal while remaining in VR. Let's discus and incorporate those ideas into this PR.

This is a link to the demo if you want to quickly try it out:
http://swimminglessonsformodernlife.com/aframe/examples/showcase/link-traversal/

@ngokevin ngokevin added this to the 0.3.0 milestone Jul 28, 2016

@ngokevin ngokevin modified the milestones: 0.4.0, 0.3.0 Aug 11, 2016

@ngokevin ngokevin removed this from the 0.4.0 milestone Oct 24, 2016

@cvan

This comment has been minimized.

Show comment
Hide comment
@cvan

cvan Nov 15, 2016

Member

can you rebase?

Member

cvan commented Nov 15, 2016

can you rebase?

@micahstubbs

This comment has been minimized.

Show comment
Hide comment
@micahstubbs

micahstubbs Nov 27, 2016

as a developer, I like the idea of link, as it feels a bit more intuitive

micahstubbs commented Nov 27, 2016

as a developer, I like the idea of link, as it feels a bit more intuitive

@ngokevin ngokevin added this to the 0.5.0 milestone Dec 18, 2016

@ngokevin ngokevin modified the milestones: 0.6.0, 0.5.0 Feb 2, 2017

@dmarcos

This comment has been minimized.

Show comment
Hide comment
@dmarcos

dmarcos Jun 24, 2017

Collaborator

Tests pending

Collaborator

dmarcos commented Jun 24, 2017

Tests pending

* Tracked controls system.
* It maintains a list with the available tracked controllers
*/
module.exports.System = registerSystem('link', {

This comment has been minimized.

@ngokevin

ngokevin Jun 24, 2017

Member

I don't think this needs to be a system, it doesn't provide any services to the link component. It can be part of the scene module, which is where all the other WebVR-related handlers live (e.g., onvrdisplaypresentchange as well as enterVR/exitVR.

@ngokevin

ngokevin Jun 24, 2017

Member

I don't think this needs to be a system, it doesn't provide any services to the link component. It can be part of the scene module, which is where all the other WebVR-related handlers live (e.g., onvrdisplaypresentchange as well as enterVR/exitVR.

This comment has been minimized.

@dmarcos

dmarcos Jun 24, 2017

Collaborator

It does. I should probably initialize the variable but the currently peeked link is referenced on the system

@dmarcos

dmarcos Jun 24, 2017

Collaborator

It does. I should probably initialize the variable but the currently peeked link is referenced on the system

This comment has been minimized.

@ngokevin

ngokevin Jun 25, 2017

Member

That's fine to put any variables you need here, but the activate/deactivate event handlers belong on the scene module vs. links IMO, they're not link-specific.

@ngokevin

ngokevin Jun 25, 2017

Member

That's fine to put any variables you need here, but the activate/deactivate event handlers belong on the scene module vs. links IMO, they're not link-specific.

@@ -0,0 +1,372 @@
/*eslint-disable */

This comment has been minimized.

@ngokevin

ngokevin Jun 24, 2017

Member

We can pull the 3rd party components in from unpkg.com

@ngokevin

ngokevin Jun 24, 2017

Member

We can pull the 3rd party components in from unpkg.com

@ngokevin

I just did a parse initial pass, more nits than not. I'm trying to test it on Vive/Nightly, but not entering VR at the moment for me.

*/
module.exports.Component = registerComponent('link', {
schema: {
href: {default: ''},

This comment has been minimized.

@ngokevin

ngokevin Jun 26, 2017

Member

can sort these

@ngokevin

ngokevin Jun 26, 2017

Member

can sort these

This comment has been minimized.

@vik66
@vik66
Show outdated Hide outdated src/components/link.js
Show outdated Hide outdated src/components/link.js
Show outdated Hide outdated src/components/link.js
Show outdated Hide outdated src/components/link.js
Show outdated Hide outdated examples/showcase/link-traversal/js/components/link-controls.js
el.removeEventListener('trackpadtouchend', this.stopPeeking);
break;
default:
console.warn('Uknown controller ' + this.controller + '. Cannot remove link event listeners.');

This comment has been minimized.

@ngokevin

ngokevin Jun 26, 2017

Member

typo

@ngokevin
Show outdated Hide outdated src/components/link.js
Show outdated Hide outdated src/components/link.js
Show outdated Hide outdated src/components/link.js
@ngokevin

This comment has been minimized.

Show comment
Hide comment
@ngokevin

ngokevin Jun 26, 2017

Member

Alright, Nightly enters for me now. Camera had a low height for a bit until I restarted. But I experienced that the enter VR wasn't kicking in after navigation, and the portals are too large/far away (I can't walk up to them, and or poke my head thru because they look huge)

Member

ngokevin commented Jun 26, 2017

Alright, Nightly enters for me now. Camera had a low height for a bit until I restarted. But I experienced that the enter VR wasn't kicking in after navigation, and the portals are too large/far away (I can't walk up to them, and or poke my head thru because they look huge)

@stevel4857

This comment has been minimized.

Show comment
Hide comment
@stevel4857

stevel4857 Jun 26, 2017

stevel4857 commented Jun 26, 2017

@ngokevin

This comment has been minimized.

Show comment
Hide comment
@ngokevin

ngokevin Jun 28, 2017

Member

In link-controls.js

if (previousSelectedLinkEl || selectedLinkEl.components.link === undefined) { return; }

This threw an error for me selectedLinkEl is not yet set.

link-controls.js:302 Uncaught TypeError: Cannot read property 'components' of undefined
    at i.onMouseEnter (http://localhost:9005/js/link-controls.js:302:49)
    at Object.module.exports.fireEvent (http://localhost:9005/js/aframe-master.min.js:450:2078)
    at http://localhost:9005/js/aframe-master.min.js:293:2801
    at Array.map (native)
    at HTMLElement.value (http://localhost:9005/js/aframe-master.min.js:293:2772)
    at i.twoWayEmit (http://localhost:9005/js/aframe-master.min.js:202:3787)
    at i.onIntersection (http://localhost:9005/js/aframe-master.min.js:202:3035)
    at HTMLElement.<anonymous> (http://localhost:9005/js/aframe-master.min.js:432:132)
    at Object.module.exports.fireEvent (http://localhost:9005/js/aframe-master.min.js:450:2078)
Member

ngokevin commented Jun 28, 2017

In link-controls.js

if (previousSelectedLinkEl || selectedLinkEl.components.link === undefined) { return; }

This threw an error for me selectedLinkEl is not yet set.

link-controls.js:302 Uncaught TypeError: Cannot read property 'components' of undefined
    at i.onMouseEnter (http://localhost:9005/js/link-controls.js:302:49)
    at Object.module.exports.fireEvent (http://localhost:9005/js/aframe-master.min.js:450:2078)
    at http://localhost:9005/js/aframe-master.min.js:293:2801
    at Array.map (native)
    at HTMLElement.value (http://localhost:9005/js/aframe-master.min.js:293:2772)
    at i.twoWayEmit (http://localhost:9005/js/aframe-master.min.js:202:3787)
    at i.onIntersection (http://localhost:9005/js/aframe-master.min.js:202:3035)
    at HTMLElement.<anonymous> (http://localhost:9005/js/aframe-master.min.js:432:132)
    at Object.module.exports.fireEvent (http://localhost:9005/js/aframe-master.min.js:450:2078)
@ngokevin

This comment has been minimized.

Show comment
Hide comment
@ngokevin

ngokevin Jun 28, 2017

Member

Still looking into this, but creating the links programmatically with

var LINKS = [
  {href: '?env=arches', image: 'img/arches.png', title: 'Arches'},
  {href: '?env=checkboard', image: 'img/checkerboard.png', title: 'Checkerboard'},
  {href: '?env=egypt', image: 'img/egypt.png', title: 'Egypt'},
  {href: '?env=forest', image: 'img/forest.png', title: 'Forest'},
  {href: '?env=goaland', image: 'img/goaland.png', title: 'Goaland'},
  {href: '?env=goldmine', image: 'img/goldmine.png', title: 'Goldmine'},
  {href: '?env=japan', image: 'img/japan.png', title: 'Japan'},
  {href: '?env=poison', image: 'img/poison.png', title: 'Poison'},
  {href: '?env=threetowers', image: 'img/threetowers.png', title: 'Three Towers'},
  {href: '?env=tron', image: 'img/tron.png', title: 'Tron'},
  {href: '?env=yavapai', image: 'img/yavapai.png', title: 'Yavapai'},
];

AFRAME.registerComponent('generate-links', {
  init: function () {
    LINKS.forEach(link => {
      var linkEl;

      // Current page.
      if (window.location.search.indexOf(link.href.substring(1)) !== -1) { return; }

      linkEl = document.createElement('a-entity');
      linkEl.setAttribute('link', {
        href: link.href,
        src: link.image,
        title: link.title
      });
      this.el.appendChild(linkEl);
    });
  }
});

Gives errors like:

core:schema:warn Unknown property `0` for component/system `material`. 
aframe-master.min.js:21 core:schema:warn Unknown property `1` for component/system `material`. 
aframe-master.min.js:21 core:schema:warn Unknown property `2` for component/system `material`. 
aframe-master.min.js:21 core:schema:warn Unknown property `3` for component/system `material`. 

aframe-master.min.js:297 Uncaught (in promise) TypeError: Cannot use 'in' operator to search for 'strokeColor' in pano
    at i.updateCachedAttrValue (aframe-master.min.js:297)
    at i.updateProperties (aframe-master.min.js:297)
    at HTMLElement.value (aframe-master.min.js:289)
    at HTMLElement.value (aframe-master.min.js:289)
    at i.update (aframe-master.min.js:222)
    at i.updateProperties (aframe-master.min.js:297)
    at HTMLElement.value (aframe-master.min.js:289)
    at e (aframe-master.min.js:289)
    at Array.forEach (<anonymous>)
    at HTMLElement.value (aframe-master.min.js:289)

I debugged and found that attrValue at some point became a string value of pano rather than an object like I'd expect. material component was calling updateCachedAttrValue('pano')

Member

ngokevin commented Jun 28, 2017

Still looking into this, but creating the links programmatically with

var LINKS = [
  {href: '?env=arches', image: 'img/arches.png', title: 'Arches'},
  {href: '?env=checkboard', image: 'img/checkerboard.png', title: 'Checkerboard'},
  {href: '?env=egypt', image: 'img/egypt.png', title: 'Egypt'},
  {href: '?env=forest', image: 'img/forest.png', title: 'Forest'},
  {href: '?env=goaland', image: 'img/goaland.png', title: 'Goaland'},
  {href: '?env=goldmine', image: 'img/goldmine.png', title: 'Goldmine'},
  {href: '?env=japan', image: 'img/japan.png', title: 'Japan'},
  {href: '?env=poison', image: 'img/poison.png', title: 'Poison'},
  {href: '?env=threetowers', image: 'img/threetowers.png', title: 'Three Towers'},
  {href: '?env=tron', image: 'img/tron.png', title: 'Tron'},
  {href: '?env=yavapai', image: 'img/yavapai.png', title: 'Yavapai'},
];

AFRAME.registerComponent('generate-links', {
  init: function () {
    LINKS.forEach(link => {
      var linkEl;

      // Current page.
      if (window.location.search.indexOf(link.href.substring(1)) !== -1) { return; }

      linkEl = document.createElement('a-entity');
      linkEl.setAttribute('link', {
        href: link.href,
        src: link.image,
        title: link.title
      });
      this.el.appendChild(linkEl);
    });
  }
});

Gives errors like:

core:schema:warn Unknown property `0` for component/system `material`. 
aframe-master.min.js:21 core:schema:warn Unknown property `1` for component/system `material`. 
aframe-master.min.js:21 core:schema:warn Unknown property `2` for component/system `material`. 
aframe-master.min.js:21 core:schema:warn Unknown property `3` for component/system `material`. 

aframe-master.min.js:297 Uncaught (in promise) TypeError: Cannot use 'in' operator to search for 'strokeColor' in pano
    at i.updateCachedAttrValue (aframe-master.min.js:297)
    at i.updateProperties (aframe-master.min.js:297)
    at HTMLElement.value (aframe-master.min.js:289)
    at HTMLElement.value (aframe-master.min.js:289)
    at i.update (aframe-master.min.js:222)
    at i.updateProperties (aframe-master.min.js:297)
    at HTMLElement.value (aframe-master.min.js:289)
    at e (aframe-master.min.js:289)
    at Array.forEach (<anonymous>)
    at HTMLElement.value (aframe-master.min.js:289)

I debugged and found that attrValue at some point became a string value of pano rather than an object like I'd expect. material component was calling updateCachedAttrValue('pano')

@ngokevin

This comment has been minimized.

Show comment
Hide comment
@ngokevin

ngokevin Jun 28, 2017

Member

I think an issue is el.setAttribute('material', 'pano', data.src.src); in link.js. If I pass in a raw URL vs <img> from <a-assets>, then it sort of breaks. This has been an awkward part of the API, we should just have the link component check if it's an <img> or string, or hope it just works as a string.

Changed to el.setAttribute('material', 'pano', typeof data.src === 'string' ? data.src : data.src.src);

Member

ngokevin commented Jun 28, 2017

I think an issue is el.setAttribute('material', 'pano', data.src.src); in link.js. If I pass in a raw URL vs <img> from <a-assets>, then it sort of breaks. This has been an awkward part of the API, we should just have the link component check if it's an <img> or string, or hope it just works as a string.

Changed to el.setAttribute('material', 'pano', typeof data.src === 'string' ? data.src : data.src.src);

@ngokevin

This comment has been minimized.

Show comment
Hide comment
@ngokevin

ngokevin Jun 28, 2017

Member

It doesn't look like the portals are doing look-at on the camera

Member

ngokevin commented Jun 28, 2017

It doesn't look like the portals are doing look-at on the camera

@ngokevin

This comment has been minimized.

Show comment
Hide comment
@ngokevin

ngokevin Jun 28, 2017

Member

Should <a-entity link scale="0.5 0.5 1"> work?

Member

ngokevin commented Jun 28, 2017

Should <a-entity link scale="0.5 0.5 1"> work?

@ngokevin

This comment has been minimized.

Show comment
Hide comment
@ngokevin

ngokevin Jun 29, 2017

Member

I think the title text above the portals need double-sided materials in case you go to the other side

Member

ngokevin commented Jun 29, 2017

I think the title text above the portals need double-sided materials in case you go to the other side

@dmarcos dmarcos merged commit 0f0c39e into aframevr:master Jun 30, 2017

3 checks passed

codecov/patch 51.33% of diff hit (target 1%)
Details
codecov/project 88.89% (target 70%)
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@ngokevin

This comment has been minimized.

Show comment
Hide comment
@ngokevin
Member

ngokevin commented Jun 30, 2017

r+

@ngokevin ngokevin referenced this pull request Jun 30, 2017

Closed

Add link component #403

@philipardeljan

This comment has been minimized.

Show comment
Hide comment
@philipardeljan

philipardeljan Jun 30, 2017

Am I doing something wrong or maybe I don't get it, should we be able to "click" on them with mouse/trackpad?

edit: similar to this BUT instead of hovering/waiting to load you can Tap/Click on them instead? https://aframe-gallery.glitch.me/

philipardeljan commented Jun 30, 2017

Am I doing something wrong or maybe I don't get it, should we be able to "click" on them with mouse/trackpad?

edit: similar to this BUT instead of hovering/waiting to load you can Tap/Click on them instead? https://aframe-gallery.glitch.me/

@ngokevin

This comment has been minimized.

Show comment
Hide comment
@ngokevin

ngokevin Jun 30, 2017

Member

This is for VR to VR scene traversal.

Member

ngokevin commented Jun 30, 2017

This is for VR to VR scene traversal.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment