How it works today:

vr-components/examples/_templates/skysphere/vr-skysphere.html

<template is="vr-template" name="vr-skysphere" radius="5000" url="default.jpg">
  <vr-object geometry="primitive: sphere; segments: 54; radius: ${radius}" material="url: ${url}"></vr-object>
</template>

vr-components/examples/skysphere/index.html

<vr-skysphere position="0 0 0" url="../_images/panos/city.jpg"></vr-skysphere>

How it should work:

vr-components/examples/_templates/skysphere/vr-skysphere.html

<template is="vr-template" name="vr-skysphere" radius="5000" url="../../skysphere/default.jpg">
  <vr-object geometry="primitive: sphere; segments: 54; radius: ${radius}" material="url: ${url}"></vr-object>
</template>

If a url is passed from <vr-skysphere> instance, we use that URL relative to the location of the HTML document. That's what we're today, and that's fine.

But if a url is not passed and we use the default url defined in the import source, we should resolve those URLs from the location of the HTML import document.

I'm on the fence about making this change because it's kind of weird and inconsistent from a default vs override passed POV, but it is probably a more sane expected default. Perhaps we could accept some type of basepath attribute that would change the base root path of any URLs used inside the template definition. Thoughts?