search

c-frame / aframe-stereo-component

aframe.io component to enable separate eye rendering of objects, plus stereo video rendering (full 360 or half dome)
https://c-frame.github.io/aframe-stereo-component/
MIT License
137 stars 52 forks source link

Failed to execute QuerySelector #20

Open MagicIndustries opened 7 years ago

MagicIndustries commented 7 years ago

I had this component working previously, but now I'm getting this error:

Uncaught (in promise) DOMException: Failed to execute 'querySelector' on 'Document': 'assets/panos/Odeion_FrontRow_001_360_L.jpg' is not a valid selector.
    at init (http://localhost:8080/assets/lib/aframe-stereo-component.min.js:1:1012)
    at i.updateProperties (https://aframe.io/releases/0.5.0/aframe.min.js:244:3019)
    at i.module.exports.Component (https://aframe.io/releases/0.5.0/aframe.min.js:244:1485)
    at new i (https://aframe.io/releases/0.5.0/aframe.min.js:244:4852)
    at HTMLElement.value (https://aframe.io/releases/0.5.0/aframe.min.js:236:4592)
    at HTMLElement.value (https://aframe.io/releases/0.5.0/aframe.min.js:236:5965)
    at e (https://aframe.io/releases/0.5.0/aframe.min.js:236:5464)
    at Array.forEach (native)
    at HTMLElement.value (https://aframe.io/releases/0.5.0/aframe.min.js:236:5772)
    at https://aframe.io/releases/0.5.0/aframe.min.js:236:3893

If I remove the path and put the image in the root I get this error instead:

Uncaught (in promise) TypeError: Cannot use 'in' operator to search for 'tagName' in Odeion_FrontRow_001_360_L.jpg
    at init (http://localhost:8080/assets/lib/aframe-stereo-component.min.js:1:1084)
    at i.updateProperties (https://aframe.io/releases/0.5.0/aframe.min.js:244:3019)
    at i.module.exports.Component (https://aframe.io/releases/0.5.0/aframe.min.js:244:1485)
    at new i (https://aframe.io/releases/0.5.0/aframe.min.js:244:4852)
    at HTMLElement.value (https://aframe.io/releases/0.5.0/aframe.min.js:236:4592)
    at HTMLElement.value (https://aframe.io/releases/0.5.0/aframe.min.js:236:5965)
    at e (https://aframe.io/releases/0.5.0/aframe.min.js:236:5464)
    at Array.forEach (native)
    at HTMLElement.value (https://aframe.io/releases/0.5.0/aframe.min.js:236:5772)
    at https://aframe.io/releases/0.5.0/aframe.min.js:236:3893

The code I'm using is below in it's entirety - am I missing something stupid? I've tried it with and without a camera, same results. I'm using the current master dist/aframe-stereo-component.js.min.js

<head>
    <title>test</title>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
    <script src="assets/lib/aframe-stereo-component.min.js"></script>
</head>
<body>

<a-scene>
  <a-sky
        id="skyleft"
        src="assets/panos/Odeion_FrontRow_001_360_L.jpg"
        rotation="0 -130 0"
        stereo="eye:left"
        visible="false">
    </a-sky>
</a-scene>
</body>
</html>
MagicIndustries commented 7 years ago

I've since discovered it throws the querySelector error if you use a src attribute with either a path on the image or an asset id. IE:

This works:

<a-entity
      id="#skyLeft"
      geometry="primitive: sphere; radius: 10000;  segments-width: 248"
      material="src: Odeion_FrontRow_001_360_L.jpg"
      scale="1 1 -1" stereo="eye:left">
    </a-entity>

These two both throw the querySelector error:


<a-entity
      id="#skyLeft"
      geometry="primitive: sphere; radius: 10000;  segments-width: 248"
      material="src: assets/panos/Odeion_FrontRow_001_360_L.jpg"
      scale="1 1 -1" stereo="eye:left">
    </a-entity>

<a-entity
      id="#skyLeft"
      geometry="primitive: sphere; radius: 10000;  segments-width: 248"
      material="src: #img1"
      scale="1 1 -1" stereo="eye:left">
    </a-entity>
AmadeusW commented 7 years ago

I have the same issue! Thank you so much for the fix.

@oscarmarinmiro any thoughts on merging the PR? It looks good but I left a few suggestions on the PR to help you out.

oscarmarinmiro commented 7 years ago

thanks @MagicIndustries , merged. @AmadeusW I'll look into your suggestions, of course. Thanks a lot for the patience

oscarmarinmiro commented 7 years ago

Sorry but the PR broke stereo video playing. I just tweaked the code a little, included an image example in the pages and README, and tested on 0.6.0. Hope it all works fine for you

https://github.com/oscarmarinmiro/aframe-stereo-component/releases/tag/v0.6.0

AmadeusW commented 7 years ago

Great! I'll update to 0.6.0 and test it.